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

Colour theory: the order of colours

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 - humankind has been interested in all these topics for a long time.

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

But factual knowledge of colors and their effects is not only indispensable for explaining the choice and arrangement of colors. It's 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 thus unavoidable.

As designers for digital interfaces have a decisive advantage over print media. The number of colors we ultimately use and which tones we decide on has no effect on the cost of the product. This only applies, however, as long as the project remains digital.

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

Primary, secondary and tertiary colors

Our screens are usually based on RGB (red, green, blue) - also known as the Additive Color System. As a rule of thumb, anything 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 combining all the colors, while black represents the absence of the 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 describes the unmixed six primary and secondary colors:

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

Temperature and contrast

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

Warm colours look more dominant when you pair them with cool colours.

In this way you can also convey the feeling of depth. Cold colours therefore seem further away than warm ones. Colours of intense warmth can also make cold colours seem even colder.

Gray and shades of gray, white and black belong to the group of neutral colors. Beige and brown are also often assigned to the neutral colors. Whereby I personally only agree with this to a certain extent; a shade of gray can definitely seem warm or cold. I also tend to count beige and brown as warm tones. Neutral colors are, for me, white and black and all shades of gray in between where no other color has been added.

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

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

Primary colours contrast with each other.

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

8 principles for harmonious colour palettes

Complementary colors

Complementary colors are two colors that are directly opposite each other and combined in this concept. As in the example from Youtube Culture & Trends Report.

Two complementary colors stand out from each other to the maximum extent. This creates a contrasting, yet harmonious color scheme. These combinations lend themselves to dynamic, attention-grabbing designs. You should therefore make sure this also reflects the product you want to communicate.

Triadic combination

The triadic 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're still on the safe side. There's hardly a harmonious composition from the basic principle. These color palettes are particularly well suited for websites intended to appeal to a wide range of users.

You should still choose a color that dominates the design as this ensures a clear design and more harmony. An example of this type of color scheme can be found on Slaveryfootprint.org.

Split-complementary colors

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

Adding a third color to the complementary scheme adds a bit more balance to the layout. This combination is used quite often on the web. Whereby the color scheme doesn't have to be as loud as in this example. 

The third color is often used by designers as an accent color and used very sparingly. With this principle, you can 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 one is the most difficult to master. 

Here, too, we combine two pairs of complementary colors. However, sensitivity is required here in the distribution of 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, be sure to use warm and cool colors in harmony with each other.

Square divided 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.

Analogous

Analogous colors are two or more colors that lie next to each other on the color wheel. Analogous color schemes appear less contrasty than the previously described compositions but still produce the desired effect. 

For your website, it's 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 further enhances the emotional impact of the source color and also creates elegance. Minimal designs benefit from monochrome color palettes. Note also that monochrome websites are low contrast.

Chroma and tint

This describes the use of colors with similar chroma or tint values. In the example of Bliss, harmony was created by the consistent use of pastel tones.

Colour Theory Inspiration & Tools

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

A new feature allows you to check your color scheme to see if it will still be displayed with enough contrast for users who suffer from color blindness.

• Eggradients provides a range of inspiration for gradients and the CSS styles to go with them.
• Khroma is an AI-based browser application that learns which colours you particularly like and creates corresponding combinations. Definitely recommended as a quick inspiration for colours and combinations.
• Coolors is a platform where you can get inspired and create your own colour 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 colour palette is to be created. By simply hovering, you can then test and create colour combinations. You can download your selection as a Sass stylesheet or .png.

Emotive Feels also offers an appealingly designed website for exploring a wide range of colours and their effects.