This is what the Internet would be like…
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 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.
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.
Monochromatic palette with darker hues of the green color
Monochromatic palette with brighter hues of the green color
Monochromatic palette with desaturated hues of the green color
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
Complementary
You 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
Analogous 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
The 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
The 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
The 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.
Palette of the cold neutral colors
Palette of the warm neutral colors
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.
In the first picture, we can see two complementary colors: blue and orange. Both of them have derivative monochromatic hues in the palette.
The second picture shows the analog palette (violet, red, orange) with the additional complementary color (green).
The third palette was built with two colors of triada: red and blue. Moreover, we can see here monochromatic blue hues.
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.
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.
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.
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.
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.
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