Livelygrey

The content of this article has been moved to this location.

What's the difference between a lamp and a radio? We can hear a loud radio anywhere in the house, it doesn't matter much whether or not we turn our ears to it.

The picture shows how sound travels around a ball towards the ear. The sound doesn't carry much information about the form of location of the ball. Sound only gives a very limited sensation of form, and thus a limited sensation of space.

Here we have a lamp. The blue ball is an obstacle or the light of the lamp. As a result of the presence of the ball, the lamp is not directly visible. We can only see the light of the lamp indirectly, reflected by the green ball. Now a striking, almost magical phenomenon becomes apparent: as a result of the light meeting the balls the green ball has become visible, it got color. So where light touches an object, we see color being created. From the fact that the green ball is visible, but not the lamp, the onlooker can gather that the lamp must be hidden behind an unknown object: the blue ball. Lamp, balls and onlooker have a fixed relationship and together they create a sensation of form and space. One of the most important features of this sensation is color.

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 map below was published on Wired to show the differences in prices of broadband internet access. Each color indicates a certain price in broadband access. Can you make sense of it? I can't. And my eyes start hurting when I try.

I won't comment on the graphic design, because I want to focus on the choice of colors. To illustrate that the quality of the map very much hinges on the choice of colors, I reworked the map in all new colors. See below.

First I made sure to have enough contrast between the background and the landmasses. So that at least you'll be able to see the different continents. Because I used black in the background, all the other colors have a brightness of at least 40%. See my post on contrasts for further explanation. Then I established a hierarchy of colors so that the cheaper the internet access, the lighter the color. Grey indicates where broadband is not available. I followed the natural brightness of the colors as explained here. It's a real simple color design. No big deal. But now the map does clearly indicate where in the world you have the best chance of finding cheap internet access. And as a bonus it's more pleasing to the eye as well....

The New York Times came up with an extensive article on the disaster that is going on in Baghdad. The article is accompanied by a full color interactive map which cleanly and clearly illustrates the gory reality on the ground. The colors indicate how the city has fallen apart into separate shiite and sunni neighbourhoods. As a shiite, you risk your life going into a sunni area and the other way round. It may be hard to believe when reading the news, but prior to 2003 no-one in Baghdad realy cared whether you were sunni or shiite. But these days many of the families of mixed descend have no place left to go. The colors of the map convey a compelling message. It's a brilliant example of the power of color in information design.

Yet it hurts me more than I can tell you to look at this map. I happen to have relatives living in Baghdad....

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

By popular demand, I've published a list of the most instructive books about color in my bookcase. You can find it on the right side of the homepage under the header 'Books'.
Enjoy!