ArtBistro

Could have had more definitions...didn't find it very helpful

http://www.livelygrey.com/2007/09/color_contrasts.html

« Books | Main | Disaster in Full-color »

Color Contrasts
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:

This color design has it all: the grey part on the right has a saturation contrast as well as a brightness contrast with the blue part. The orange button has a contrast of hue with its blue background, which makes it stand out very clearly. It's important to note that the button doesn't stand out because it's orange. It stands out because it is NOT blue! The functionality, the shapes and the colors fit exactly together in one brilliant design.

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.

On first sight there is almost exclusively contrast of hue. But if you look carefully you will notice a brightness hierarchy.

This is a measuring device. The color design distinguishes two parts: the blue-grey front and the brown casing. The casing has a combination of all 3 contrasts with the front: brightness because the casing is much brighter than the front, hue because the bluish front and the brown casing are complementary, and saturation because the bluish front is much greyer than the casing. The buttons have a contrast of brightness with the front which makes them clearly visible without cluttering the overall design.

To illustrate the importance of contrasts, I photoshopped the brown cell phone to produce the second image in blue. But I left the contrasts intact in the blue phone. You may notice that while all the colors have been altered, the overall design didn't change much. My choice of colors didn't affect the shapes or composition. I suppose it's a matter of personal taste whether you prefer the blue or the brown version, but both designs are perfectly acceptable. However, in the third image I took the exact same colors as in the first image and then applied them in a different manner. This caused a change in contrasts. As a result I completely ruined the design of the phone, without even changing my color palette!

So, again repeat after me: It's not about the colors.......
Email this • Digg This! (5 Diggs, 1 comment) • Share on Facebook • Sphere: Related Content

Posted on September 5, 2007 10:47 AM | Permalink

TrackBack URL for this entry:
http://www.livelygrey.com/cgi-bin/mt/mt-t.cgi/19

Listed below are links to weblogs that reference Color Contrasts:

» Full-Color Disaster from Livelygrey
The map in the previous post looked deceptively simple. It might give you the impression that such a design is easy to make. As it happens, today Wired.com obliged me by providing an example showing it's NOT that easy.... The... [Read More]

Tracked on September 13, 2007 9:44 PM

Could have been more clear on definitions and examples.

Great article, but I agree on wanting more. Color theory is vital to every artist, it would be nice to have more information.

This is great, so many people around me use color like mayonnaise... too much, and in the wrong way...

i really don't have a clue as to what that article said. But I think that plain colors appeal to my eye more.I like that it's all about what you like as a person.