What is the most decisive element on a website? You might think it is content, and right you are. Though, there are many circumstances affecting on how this content is perceived by user and if it is eye-catching at all. Firstly, you need to get readers’ attention and then you can leave everything on the content.

Colors play the ultimate role in design and in how a visitor feels on a website. You can manipulate design colors and so reach dreamlike success.

First Impression is Irrevocable

Don’t judge a book by its cover – do you follow this principle when hunting for a good design? I suppose no, and you don’t need to conceal it. Fancy cover draws attention, excites, get users interested in the website. First impression is formed within maximum 7 seconds after a user opens a website. It is a big achievement to manage this and so ensure yourself more readers and presumably higher conversion rates.

What helps users to form a quick impression of the site? It is the home page appeal. It includes all details, like Header design, background color, content arrangement, and colors, of course.

Power of Color Psychology

We would like to give you a brief overview of the meanings that basic colors have. This info is useful if you are going to mix colors for your website design.

White is a color of perfection. It symbolizes purity, as a for example a bride’s wedding dress. Besides, this is the color of cleanliness and bright light. Blank board or sheet of paper is white, where this color can be a symbol of creativity and innovation. White is a neutral color that won’t spoil the website design.

Black is a dark color yet it has many good meanings: intelligence, power, stability, professionalism. It is the color of luxury and sophistication. This is another classic shade together with white, and it can be very useful when used for web design.

Gray is the most neutral color and it is rather calm. Color gray means stability and daily routine, it is the symbol of casual things. Quantity of gray influences on the website perception: too much gray can look a bit boring and monatomic, yet a slight effect of gray will dilute the color scheme and make bright elements more visible.

Brown is the color of Earth, and maybe that is the reason why it is the color of mourning in India. Nevertheless, this color means stability and friendship in Western Hemisphere. Moreover, material wealth is what people associate brown with.

Orange is one of the most, if not the most, positive colors generally. Orange is the color of social stimulation, and so far as it is both physically and mentally stimulating, it gets people to consideration and conversation. It is awesome if your design and color scheme allows you to use a bit of orange. It puts users in a good mood.

Yellow is the color of sun, so you don’t need to be explained how positive it is. Yellow inspires to new thoughts and original ideas. If your website aims at teaching users or make them take actions, you will need to make yellow your accent color. It usually doesn’t perform as the dominant color, because it is so bright that can blind readers.

Red is hot, passionate, provocative, but it is also catchy, attractive and fashionable. Red is the color of ambitions and adventures. This color stimulates to get risks and take actions. CTA buttons done in red are winning but only when the primary color blends with them well.

Green is the color of nature surrounding people. Balance is what this color means in psychology. Green is good to be used on business sites, because it means money and prosperity.

Blue is the color we see every day above our heads. This color brings a feel of trust, realism, and peace. Religious theme can make benefit from using this color both as primary and accent.

Purple is associated with imagination and dreams. It is the one to symbolize wisdom, respect, royalty and wealth. Purple is powerful color with the leadership meaning.

Color Proportion

Proportion of colors is a crucial point of consideration when you are on the first stage of website designing. It is always a controversial question how many colors to use. Someone thinks the more colors are used the brighter website is, the others follow the ‘less is’ more principle. The most problematic thing is to find the golden mean.

The ideal model is 60-30-10, where 60% of all website design go to a dominant color, 30% of web space can be filled with the subdominant color(s), and 10% should be accentuated with an extra color (accent). You don’t need to stick to this pattern, if you need more colors on your site. You can add a few of subdominant, i.e. secondary colors, but keep them all just 30% of the whole space. How to create appropriate shades of your secondary color? You can add a bit of white to get a lighter tint, use black to add a darker effect, or gray to get down the intensity and have a more neutral shade.

What Are Accent Colors For?

Accent colors are called so because they stress on certain details you them to stress. Now we will specialize web design elements that need to be emphasized.

The first thing, which is rather obvious, is the call to action. Action is what you want to get from your visitors, so lead them to the way they need to act – make CTA buttons flaring among other content.

Usually navigation menu has a top position on a website to make it jumping on visitors right with a site opening. Colors can intensify the menu exposure. And you can’t use the primary color for this, because it will blend with the biggest part of the page, so accent color appears to be very useful here.

Many users surf the web for a needed website just because they need to get a phone number of the company/person/restaurant. That is why, it is reasonable to place contact info in the Header and highlight it with a bright accent color. It does not exclude the power of typography, which means that this info should be typed with a bigger font.

Whether you have a background photo gallery with arrows to flip through, or your website navigation is scrollable, you need to prioritize these scroll buttons. So far, as you can’t make them half-size of the website page, you need to lay stress on them within color. You make it easier for users to experience you webpage by doing so.

Promotional elements are different stuff you use to get your product or content advertised. For example, these are social media follow/sharing buttons: find such designs of these to correlate with your color scheme and repeat your accent color.

There is a sure thing that people ignore design that ignores people. That is why many website owners feel a strong need to add interactivity to their projects. Playful UI elements are used a lot then. They influence on user experience and on how users behave being on a website. Whatever you create to excite your site quests (original shapes, animations, original captchas in form of a quiz or a little game, etc), it would be perfect to make it in your accent color.

Accent Colors in Different Color Schemes

I am not sure I am good in predictions, but I suggest many of you are interested in how to choose an accent color if you want your site be monochromatic? Then we’d better examine all color schemes and how to pick an accent color for each, so that not to leave something undisclosed in the article.

Monochromatic Color Scheme

Monochromatic color scheme means a usage of one color, yet different shades of it. It is impossible to stay with one tint for the whole design, or you make your visitors bored and feel asleep. Accent color should be the brightest shade you include in your color palette. For example, you design your site in blue shades: you have blue-gray, sky blue, medium blue and tiffany blue. What would be an accent tone? Perhaps, it would be medium blue, as it is the deepest and brightest one in the row. If you pick orange color combo, then you can make brown and apricot tones to be dominant and subdominant, respectively; bright orange will serve for accents.

Analogous Color Scheme

Analogous color scheme includes colors adjacent to each other on the color wheel. When you pick the color you wish to use the most, it is clear that the rest colors will be used to enrich your site and make accents. For example, you like green-yellow color combo, then you make light green your dominant color, a few more green shades are subdominant and yellow is accent tone.

Complementary Color Scheme

Complementary color scheme usually consists of high contrasting tones. These are two colors placed opposite each other on the color wheel. Warm-cool color mix is the best, as an example you can take a composition of red and blue-green.

Split Complementary Color Scheme

Split complementary color scheme uses one color and the two colors adjacent to its complementary. The color one is yellow for example, then two others will be picked from the blue palette. It is reasonable to make yellow accent color in this case.

Triadic Color Scheme

Triadic color scheme uses three very opposite colors, so this is quite hard to combine. As an example, I can give you such variant: yellow, purple, blue-green. Blue-green is the most calming and neutral in this collection, so it can be the primary color. Blue and green are both cool colors, as well as purple, so purple would better be the secondary color in this combo. Yellow is warm color and it will make perfect accents on this vibrant palette.

Tetrad Color Scheme

Tetrad color scheme is the trickiest one, because whatever four tones you choose, they are difficult to harmonize. Let it be yellow-orange-blue-green scheme, or blue-green-purple-red one, you will need to specify one color as the dominant and play with others in different proportions.

Examples on How to Use Accent Colors in Web Design Wisely

Now, it’s a turn of real design examples to show you how it is better to combine colors and make accents properly.

Roon Website Design in Blue Shades

Black and White Website with Blue Accent Color

Blue and White Website with Red Color for Accents

Maispastel Website with Complex Color Combination

Black Monochromatic Website Design with Yellow Accents

ViziCities Website with Colorful Design and Brigh Accents

Swat Health Website with Blue-green Accent Shade

Portfolio Website with Beautiful Pastel Design and Red CTA

Dan Paris Website with Creative Design and Bright Accent Color

Data Dashboards Website with Green Color to Make Accents