We probably all vaguely remember color theory in art class and the meaning of primary, secondary, and tertiary colors. As a web designer, you work with color theory every day - whether subconsciously or consciously. In this post, I'll show you how to use the right principles and tools to create good color combinations for your next web project.
Color theory: why we sometimes need a refresher
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 people. 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.
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.
We are also not subject to the technical limitations present with print media. This gives us as designer considerable freedom to fully develop our ideas.
The color wheel, temperature and chroma
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.
Primary, secondary and tertiary 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 colors look more dominant when you pair them with cool colors. This way you can also convey the feeling of depth. Cold colors thus seem further away than warm colors. Colors of intense warmth can also make cold colors 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 colors look rather uninteresting on their own and need at least one color to stand out. Exceptions prove the rule here, as there are some minimalist black and white layouts that work well without any other colors. Brown and beige can also be very attractive as a dominant color, e.g. in a monochromatic design.
Primary colors contrast with each other. There is another way to create contrast. Looks at the colors that are about three spaces apart on the color wheel. These pairings can easily create disharmony. That's because they clash with each other. However, when used correctly, e.g. as a call-to-action, they can give your design an interesting contrast.
Eight principles for creating harmonious color palettes
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.
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 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 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 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.
Inspiration and online 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 colors say something special to you and creates corresponding combinations. I definitely recommend this tool for quick inspiration on colors and combinations.
- Coolors is a platform where you can get inspired 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 simply by hovering. Your combination can be downloaded as a Sass stylesheet or .png.
The attractively designed website https://emotivefeels.com/ allows you to explore different colors and their effects.