How To >> Browse Articles >> Color


Training: You Know Your Colors, But Do You Know Their Contrasts?

Training: You Know Your Colors, But Do You Know Their Contrasts?

This design is mainly ton-sur-ton. Which means that the colors have no contrast of hue. Except for the display, which has specifically contrast of hue.

Igor Asselbergs

Repeat after me: It’s not about the colors, it’s about how the colors relate to one another. Say it loud. Say it one thousand times. And never forget it.

Don’t worry about what I mean by that. Just read this blog. Ultimately, each and every post on this blog is written to support this premise.

If color design is about how colors relate to one another, we must accept that it’s more about contrasts than about single colors. That makes color contrasts among the most valuable assets in your color toolkit. And among the color contrasts, the most important is:

1. Contrast of Brightness When it becomes darker, you will perceive brightness contrasts long after you cease to see the difference between red and green. This is simply the result of the build of our eyes. But other than that, there is no stronger contrast than between black and white. It’s no coincidence that most texts appear as black characters on a white background. This blog is no exception.

2. Contrast of Hue The second important contrast is the one of hue. Contrasts of hue can be quite powerful. Johannes Itten, the Bauhaus professor, defined 7 color contrasts. Among those were ‘contrast of warm and cool’ and ‘contrast of complement’. But in fact, the two latter contrasts are subject to the contrast of hue.

3 Contrast of Saturation This contrast can add subtlety to your design. But don’t count on it to get a strong message across.

And that’s it. Basically there are only 3 kinds of contrasts that you can use in a color design. They follow the 3 ‘dimensions’ of color that I explained previously. However, the fun starts when you combine all 3 contrasts. In fact it’s quite rare to see a one-of-a-kind contrast. Here are some real-life examples:

Continue reading on next page.

Find the right campus or online art or design program for you!