Color matters!

Let’s imagine the world without colors. White sun, white clouds, gray sky, trees, grass and flowers. Gray sea, beach, and so on. And now let’s imagine the Internet without colors… This is why color matters!

This is what the Internet would be like…google

fb

It looks creepy don’t you think? I think I don’t need to convince you that colors matter in our real lives and on the Internet. Supposedly, the human eye can recognize 7 million colors. How to choose the best ones for our website? There are a few tips.

Firstly: use what you have. If you have a logotype or key visuals then use their colors. 

coca-cola-page

Coca-cola has a well-known logo with the recognizable red color and of course uses it on the website.

Secondly: check the meaning of color. There is a study of the influence of hues on the human behavior. It is called color psychology. Every color is associated with specific feelings and emotions. For example, red is the color of love, passion, excitement and power. While blue is associated with calmness, responsibility, ambitions and trust.

Colours-Mean-Brands1

Infographic from boutiquemc.co.uk

Thirdly: check the competition. Don’t use colors from similar websites. The reason is simple: your site will be associated with the other one and will be advertising it.

Color palette

When you choose the main color of the website, you need to build the color palette. There are many ways to do that. The simplest kind of color schemes is the monochromatic one. This palette is based on one, single color, and uses its many variations, each made by altering brightness and saturation.

darken

Monochromatic palette with darker hues of the green color

brighten

Monochromatic palette with brighter hues of the green color

desaturate

Monochromatic palette with desaturated hues of the green color

saturate

Monochromatic palette with saturated hues of the green color

Color wheel

To create color schemes with many colors we use a color wheel. It is an abstract illustrative organization of color hues around a circle. The basic color wheel includes only three primary colors: blue, red, and yellow. The corresponding secondary colors are green, orange, and violet or purple. The tertiary colors are green-yellow, yellow–orange, orange-red, red–violet, violet-blue and blue–green, and so on. This scheme shows the relationships between colors.

color wheel

color wheel

Complementary

complementaryYou can build your color scheme based on the complementary colors. They are located on the opposite sides of the color wheel. Remember, though, that you shouldn’t use complementary colors with high saturation on a large area, as they are tiring for the user’s eyes. Complementary colors aren’t good for text and background. Using the opposite colors is the best way to make something stand out.

 

 

 

Analogous

 

analogusAnalogous colors are located next to each other on the color wheel. They are harmonious and eye-friendly. The designer has to remember to set a proper contrast between the analogous colors, as the project might get illegible.

 

 

 

 

Triada

 

triadaThe triada scheme uses three colors that are vertices of an equilateral triangle on the color wheel. They are evenly spaced. This palette should be properly balanced with the saturation and brightness. It’s a good idea to set one color as the dominating one and two others as accents.

 

 

 

 

Split complementary

 

split-complementaryThe split complementary palette is a combination of the complementary and analogous colors. You can use it in a similar way to the triada: two colors dominating and one for accents.

 

 

 

 

 

Tetrada

 

retangleThe tetradic scheme is, in fact, two pairs of complementary colors. That gives the designer many possibilities to build a project. But you need to remember about the balance and neutral background.

 

 

 

 

Neutral colors

Every good color scheme of a website needs neutral colors for the background or the fonts. You can use warm or cold colors. Sometimes when you need a specific gray color matching the base color, you can simply desaturate that base one. Another option is to use a partially desaturated color, e.g. with 98 % – 99 % desaturation level. The user doesn’t notice that it isn’t gray, however, the whole palette will be pleasant in perception.

cold

Palette of the cold neutral colors

warm

Palette of the warm neutral colors

desaturate

Palette with the desaturated hues of the green color

Color scheme examples

When we know the main rules of color schemes, we can mix and play with them. I’ve got some examples of nice palettes.

palette1

In the first picture, we can see two complementary colors: blue and orange. Both of them have derivative monochromatic hues in the palette.

palette2

The second picture shows the analog palette (violet, red, orange) with the additional complementary color (green).

palette3

The third palette was built with two colors of triada: red and blue. Moreover, we can see here monochromatic blue hues.

palette4

The last picture illustrates neutral palette with two complementary colors – red and green.

Color palette from the picture

There is another way to build color scheme – use the colors from the photo. This is a great idea when you have some graphics to place your design.

cats

cats-palette

If you don’t know this amazing picture, just google: “the best picture of the internet”.

Proportion of colors on the website

The last thing is to set a good proportion of colors in your scheme. Sometimes colors in the palette suggest how we can use them in our design.

1. The first example shows an even proportion of colors in the palette. Leaving the neutral colors of the background and font – all colors on this website are used with a similar proportion. This is the best proportion for the analogous, triadic and tetradic color schemes. It is very popular among modern, tile websites.

even

2. In the second example, you can see the dominant proportion in the color scheme. One of the colors is used in many places on the whole website. The other colors occur only in several parts of the design.

dominant

3. I called the third palette harmonic. The amount of color is smaller in each subsequent color. It is a good idea to build a design based on the monochromatic palette. You can often find it in one-page-website projects.

harmonic

4. The last type of proportion is the accent. If we have a neutral palette with one or two vibrant colors, then we should use them in the small elements on our website, e.g. buttons, icons and headers. Nowadays this is the most popular proportion on the Internet. It looks clear and professional.

accent

 

It’s clear – it’s important!

I don’t need to convince you that colors are very important in our real lives and on the Internet. A legible leading color can make your brand more recognizable. A nice, well-matched color scheme may lengthen the time that users spend on your website. It might increase the probability that the user will come back to you. Besides, a good color palette makes the process of building a website design easier. So before you start designing the project, think about the colors and build the best color scheme for your website. And remember – colors matter, colors first!

Note: the templates used in this article come from this website 

Subscribe to our newsletter
Menu