We remember color theory in art class: the importance of the color wheel, temperature and chroma. As a web designer, you work with color theory every day - whether unconsciously or consciously. In this article, I'll show you how to use the right principles and tools to create good color combinations for your next web project.

Color theory: the order of colors

The first records of color theory and the color wheel date back to at least the beginning of the 17th century. The origin of colors, the reflection of light, the process in the human eye - all of this has occupied mankind for a long time.

We designers are often primarily visual types. Creating color combinations often comes from the gut. We constantly see and analyze the colors around us. This results in an intuitive way of dealing with colors. 

However, factual knowledge of colors and their effects is not only indispensable for explaining the choice and arrangement of colors. It is also important for making decisions that deviate from the norm.

In order to find the optimal color combinations for your customers and websites, a sound knowledge of color theory is essential.

As designers for digital surfaces, we have a decisive advantage over print media: how many colors you ultimately use and which tones you choose has no effect on the cost of the product. However, this only applies as long as your project remains digital.

You are also not subject to the technical limitations that we have with print media. As a designer, this gives you the wonderful freedom to develop your full potential.

Primary, secondary and tertiary colors

Our screens are generally based on RGB (Red, Green, Blue) - also known as the Additive Color System. As a rule of thumb, you can say that everything that reflects light is based on the Additive Color System. In this structure, we use the primary colors as a starting point. White is created by the combination of all colors, while black represents the absence of colors.

Explained using the example of a simple color wheel: Primary colors are yellow, red and blue. Secondary colors are created when you mix primary colors together. Tertiary colors are created from mixtures that contain primary and secondary colors.

Hues, tints, shades and chroma

Hues, or color tone, describes the unmixed six primary and secondary colors:

• Tints describes the shade that is created when you add white to a color.
• Shades uses the same principle as Tints - but here we mix in black.
• Chroma, also known as saturation or tone, is what we call the mixing of hues with grey or neutral colors such as white and black. If we follow this definition, then shades and tints also belong to chroma.

Temperature and contrast

You can also classify the colors into temperatures. A few rules of thumb apply here:

Warm colors look more dominant when you pair them with cold colors.

This also allows you to convey a feeling of depth. Cold colors therefore appear further away than warm colors. Colors of intense warmth can also make cold colors appear even colder.

Grey as well as shades of grey, white and black belong to the group of neutral colors. Beige and brown are also often classified as neutral colors. However, I personally only partially agree with this, because a shade of gray can definitely appear warm or cold. I also consider beige and brown to be warm tones. For me, neutral colors are defined as white and black and all shades of gray in between to which no other color has been added.

Neutral colors tend to look uninteresting on their own, which is why they need at least one color to stand out. 

Exceptions prove the rule here, as there are some minimalist black and white layouts that manage without any other colors. Brown and beige can also look very attractive as the dominant color, e.g. in a monochromatic design.

Primary colors contrast with each other.

There is another way to create contrast. By looking at the colors that are about three squares apart on the color wheel. These pairings can easily create disharmony. Because they clash. However, used correctly, for example as a call-to-action, they can give your design an interesting contrast.

8 principles for harmonious color palettes

Complementary colors

Complementary colors are two colors that are directly opposite each other are combined in this concept, as in the example of Youtube Culture & Trends Report.

Two complementary colors stand out from each other as much as possible. This creates a contrasting yet harmonious color scheme. These designs are suitable for dynamic, attention-grabbing designs. You should therefore make sure that this also reflects the product you want to communicate.

Triangle combination

The triangle combination describes three colors that are equidistant from each other on the color wheel.

Similar to the previous combinations, this one is also quite simple and easy to use. It offers more diversity, but you are still on the safe side with it. The basic principle is that there is hardly any harmonious combination. These color palettes are particularly suitable for websites that are intended to appeal to a wide range of users.

You should still choose a color that dominates the design. This ensures a clear design and more harmony. This is also shown by the example of Slaveryfootprint.org.

Split complementary colors

Split complementary colors describe a similar concept to complementary colors. Here, only one side is split. Instead of the complementary primary color, you now use the surrounding tertiary colors. This palette offers more possible combinations.

Adding a third color to the complementary scheme adds a little more balance to the layout. This combination is used quite often on the web. However, the color scheme does not have to be as loud as in this example. 

The third color is often used by designers as an accent color and is used very sparingly. You can use this principle to give your websites a soft contrast.

Square color combination

Similar to the three-sided concept, the square color combination combines four colors. Of all the combinations presented so far, this is the most difficult to master. 

Here, too, we combine two pairs of complementary colors. However, sensitivity is required here when distributing the hierarchy. On this website, the red tone is used sparingly to prevent the red from dominating the other colors. Instead, a cold blue and a neutral beige have been used as dominant colors.

When using this principle, you should make sure to use warm and cold colors in harmony with each other.

Square split complementary colors

Consists of two adjacent colors and their complementary colors.

With these colors, you can create a color palette that gives you the appealing contrast of complementary colors while being more diverse, as in this example.

Analog

Analogous color palettes are two or more colors that lie next to each other on the color wheel. Analogous color palettes are less contrasting than the previously described combinations, but still have the same effect. 

For your website, it is a good idea to work out a hierarchy and use the colors accordingly. In the example below, Crips Studios has chosen purple as its most dominant color. This color is then also the one that sets the mood on your website.

Monochrome

Monochrome describes different tones and/or chroma of the same color. This is the simplest way to achieve a harmonious color scheme. Used well, it can still make your site stand out from other sites.

The use of monochrome colors additionally enhances the emotional effect of the original color and also creates elegance. Minimal designs benefit from monochrome color palettes. You should also know that monochrome websites are low in contrast.

Chroma and tinting

The use of colors with similar chroma or tint values. In the example of Bliss, a harmony was created through the constant use of pastel shades.

Inspiration & tools for color theory

It has become a classic and is still one of my favorite tools for creating color palettes: Adobe Color Wheel.

As a new feature, you can also check your selection to see whether it is still displayed with sufficient contrast for users who suffer from color blindness.

• Eggradients provides a range of inspiration for gradients and the matching CSS styles.
• Khroma is an AI-based browser application that learns which colors you particularly like and creates corresponding combinations. Definitely recommended as a quick inspiration for colors and combinations.
• Coolors is a platform where you can find inspiration and create your own color palettes. It also offers extensions for Chrome and Adobe.

Colourco works in a similar way to Adobe Color Wheel. You can set the principle according to which your color palette should be created. You can then test and create color combinations by simply hovering. You can download your selection as a Sass stylesheet or .png.

Emotive Feels also offers you an attractively designed website for exploring different colors and their effects.