Main | September 2007 »

August 2007 Archives

August 28, 2007

The Müller Formula (or: Predictable Color Preferences)

More than half a century ago, Aemelius Müller, professor at the academy of Winterthur, Switzerland, came up with a formula that could predict the appreciation of a color-combination. In other words: Müller was able to predict which combination of colors most people would probably like.

muller1.jpgMüller's formula predicts that these color-combinations will be considered as ugly by most people. muller2.jpg



While these will be liked. How is this possible? hueslr.jpg






First we need to consider the 'natural' brightness of the colors of the color circle, as discussed in this post. You will notice that yellow, for instance, is a lot brighter than blue.brightness_lr.jpg








On a scale from 1 to 100, bright yellow has a brightness value of 90, while bright blue has a value as low as 35. Likewise, every hue in the color circle has its own 'natural' brightness.







mullerbl3.jpgNow take this combination. All three colors have the exact same hue of blue. The only difference between the colors is their brightness.





Now we pair the last combination with the 'ugly' combination on the left and the 'nice' combination on the right. mullerbl.jpg








See what happened? Towards the 'ugly' (left) side the dark blue shifted to a greener hue, while the bright blue shifted to a more purple hue. This is contrary to the 'natural' brightness of the colors. After all, if you check the color circles you will see that green is much brighter than purple. Towards the 'nice' (right) side the dark color shifted to purple while the bright color shifted to green. This shift is in accordance with the 'natural' brightness of the colors.
The same goes for the red combinations. Towards the 'ugly' side the colors shift contrary to the 'natural' brightness while on the 'nice' side they shift in accordance with the natural brightness.
mullerbr.jpg







So here's the simple formula: If a combination follows the natural brightness of colors, most people will like it, if a combination contradicts the natural brightness of colors, most people won't like it.

There is some dispute in academia whether or not to interpret the 'nice' color combinations as good taste. The obvious implication being that the 'ugly' combinations are of bad taste. I myself tested the formula on many occasions when lecturing a group of people. It never fails and it's always fun to confront people with the predictability of their taste. But I also noticed that people in creative professions, such as artists or designers, often tend to like the 'ugly' combinations. Because people in this group often lay claim to 'good' taste, in my opinion the 'taste' hypothesis doesn't hold. As far as I'm concerned no one can lay claim to good taste. People like it or they don't. Good or bad taste is a non issue.
However, while Müller's formula may not determine the difference between good or bad taste, it sure does predict common taste. And that makes the formula quite useful for any designer.

August 23, 2007

Backlight

My cellular phone suffers from the same serious color design flaw that you'll find on many modern devices. Here's the keypad of my telephone in standby mode:
nobacklight.jpg
This is a good simple, no-frills design in shades of gray. For so long the iPhone is not available in Europe, I'm perfectly happy with it. That is: until I bring it out of standby mode to type a phone number. Here's what happens:
backlight.jpg
The back lights of the keys turn on. The numbers and symbols that previously appeared dark grey suddenly become much brighter. Result: the numbers can hardly be read. The numbers become invisible only when I need to see them. It boggles the mind...

How did this design become standard practice? Please, Nokia, Siemens, Motorola, Sony, etc., could you please avoid this design stupidity. It isn't terribly complicated. Just keep an eye on the contrasts involved..

August 22, 2007

color games

As promised, some color games to improve your color skills. Click here to go to the menu. Have fun!

August 18, 2007

Brightness vs. Whiteness

This post digs into the difference between brightness and whiteness. This may sound as a silly little issue, which it probably is for anyone not very interested in color. But if you aim at boosting your color designing skills, you better bear with me.

Take a banana and a tomato and place them next to each other. You will notice that the banana is brighter than the tomato. The reason being that saturated yellow is brighter than saturated red. Each hue has its own 'natural' brightness.

hueslr.jpg
The top half of this color circle is a lot brighter than the bottom. Yellow is located at the top, which is generally much brighter than the purple at the bottom.

brightness_lr.jpg
If the colors in the color circle get converted to corresponding greys, the difference in brightness becomes quite apparent. The top of the circle reflects 90% of the light while the bottom only reflects 22%.

Now 'whiteness' comes into play. The whiteness of a color is the amount of white that a color contains. Imagine, for instance, a pot of yellow, a pot of red and a pot of white paint. For this to work both the red and the yellow paint should have similar saturation. If you add the same amount of white paint to the red and yellow, both colors will still have a difference in brightness. BUT, (this a very important but!) they will somehow be acquainted. They will both become a bit milky and a bit brighter but will retain a certain familiarity. The same goes for black. If you add the same amount of black to several colors of the same saturation, they will somehow belong together, notwithstanding their difference in brightness.


whiteness_lr.jpg
In this color circle, all the colors contain the same amount of white. Notice how the circle has become milky and tranquil.

acc_range.png
ncs_range.png

Here's another example of the effect of classifying colors according to whiteness. I picked the top row of colors so that they all have a similar saturation. You can see that they vary wildly and will be hard to combine.
The bottom row was picked with similar saturation AND similar whiteness. As you can see, suddenly they seem to have something in common and won't be hard to combine into one design. As said, the same goes for black. Adding black will make the colors darker, but they will still retain their familiarity. Adding both black AND white will make the colors more grey, that is: less saturated.

For a designer there's great value in classifying colors according to whiteness/blackness rather than brightness. You will find that producing appealing color combinations becomes a piece of cake. Moreover, it is actually possible to predict which color combinations will appeal and which will not appeal to most of people. Stay tuned for further explanation in future posts.

NCS
As far as I'm aware (please anyone, correct me if I'm wrong...) there's only one color system in the world that classifies colors according to whiteness. I'm talking about the Natural Colour System (NCS) from Sweden. NCS is published by the Swedish Colour Institute (SCI) and serves as a major color standard in the European color industry. I would strongly advice any designer to purchase at least a simple NCS color fan deck. If you're located in Europe you might try to get a fan deck for free from one of the paint manufacturers who utilize NCS. That always worked for me. ;-). NCS is also available as palette for Photoshop and other major design applications.

August 14, 2007

Brightness, saturation and hue

Before we proceed into the depths of color, let's first cover some of the basics.
Effective color communication depends on the proper use of language. All colors can be described in terms of brightness, saturation and hue. What exactly do we mean by that?
kegel.jpg
For the sake of convenience all possible colors can be fitted into the shape of a cone. The greys will be found on the axis. Upwards the colors become brighter, downwards they become darker. Towards the outside the colors become more saturated, in other words: less grey. All colors of the rainbow can be found in a circle around the axis. This model helps us to understand the meaning of the terms brightness, saturation and hue.
hue.jpg
In the cone we can mark out a triangle. All the colors located on one triangle have the same hue. An orange has the same hue as fire, which has the same hue as a pineapple. Allthough pineapples generally are much darker than oranges. A leaf has the same hue as grass, which has the same hue as jade. The sky has the same hue as the IBM logo, which has the same hue as the mediterranean sea and a pair of jeans. Likewise, a banana has the same hue as a custard dessert and a lemon. Get the picture? All of the colours in the row below the cone are located on one triangle and have the same hue, even though some are more greyish, and some are darker than others. The row of colors below the previous cone all have a similar hue.
saturation.jpg
We can also mark out a belt with colors that all have the same distance to the axis. All the colors on the belt have the same saturation. Imagine having a pot of grey and a pot of red paint. The more red you add to the grey paint, the more saturated it becomes. Some people would say: it becomes more lively. The pot of red paint has a maximum saturation, the pot of grey paint has a minimum saturation. Replacing the red paint by a can of yellow, green or blue doesn't alter the saturation, it only changes the hue. All colors in the row below the cone have a similar saturation, even though they don't share the same hue or brightness.
brightness.jpg
In the cone a circular surface is marked out where all the colours have the same brightness. Brightness is related to the amount of light that is reflected by a color. Bright colors high up in the cone reflect a lot of light while colors down at the bottom reflect very little light and are therefor less bright. The row of colors below the cone all have a similar brightness.
In a next post I will offer some fun interactive exercises that will help you learn how to classify colors.

August 13, 2007

The color of white

Oh my...
There we go again. I came across this page at dwell.com where Fred A. Bernstein says:

I’ve always been vaguely embarrassed by color, associating pastels with kitsch and primaries with kindergarten. I’m not even sure I agree with Meier, who claimed, in his Pritzker Prize acceptance speech, that he likes white “because within it you can see all the colors of the rainbow.” I like white because within it I can’t see all the colors of the rainbow.

stadthaus.jpg
For your education, Fred, here’s a picture of a Richard Meier building. I measured some of the colors I found on the building in the picture and put them at the bottom. Incidentally: I didn’t spot any white. This is a picture with ‘normal’ lighting. Things can get really drastic when the lighting gets more dramatic. Below you’ll find an example, which I grabbed from Richard Meier’s website.
richard_meier.png
Here’s a question for you, Fred: Why does Richard Meier publish only color images of his work?
To choose a white or grey surface for a building is as much a color choice as any other. Look at the work of Le Corbusier. He used brightly painted surfaces alongside bare concrete. I somehow don’t think that was because he ran out of paint...

August 12, 2007

The pink White House

White_House_lr.jpg
The White House in Washington is a Georgian style building. Georgian architects employed a decorative style derived from ancient Greece and Rome. Which explains the white painted surface, because it was generally assumed that the ancient Greek and Roman buildings were white. After all, when looking at pictures of the archetypical example of classical architecture, the Parthenon in Athens, it always looks white.
parthenon.jpg
Only recently I visited the Parthenon for the first time. And probably similar to most architects in this world, I had always assumed that it is white.
Well....
It isn't.
The color of the Parthenon is more like ochre, which is not white by a long shot. I suppose most of the pictures of the Parthenon are shot so that they more or less represent our cliche image of it, instead of representing the actual situation. But as the saying goes: every picture is a lie. If indeed the design of the White House was derived from classical architecture, its color is simply plain wrong. But there's more to it.....
In fact the Parthenon, and all other major classical buildings, were originally painted in bright colors. I will delve deeper into this subject in future posts, but just trust me on this for the time being. This also means that the colors of neo-classical buildings such as the White House are based on a misconception. In fact it would probably be more historically accurate, not to mention more fun, to repaint the White House in pink. ;-)
newcolors.jpg


August 9, 2007

What is color?

Any publication about color should start with a definition of color. There are nearly as many ideas about what color is as there are people on this earth. So in order clarify what is meant with the term ‘color’ on these pages, here’s a definition:

‘Color is an event that occurs among three participants: a lightsource, an object and an observer.’

I first came across this definition in the book ‘Real World Color Management’ by Bruce Fraser, Chris Murphy and Fred Bunting. It is by far the most usefull definition I ever read because it nicely touches all the things important about color.
Color is an event because it involves an occurrence, something that happens at a certain time in a certain place. The light is involved because it is the ‘carrier’ of color. Without light there’s no color. Light may exist without color, but in that case it’s invisable. Just look up on a starry night and you will notice that the space between the stars is pitchblack. Yet we can be sure all that all visible stars fill that space with light. But because the light doesn’t bounce off on anything, doesn’t meet any surface, it remains invisable to us and without meaning.
The second participant in the color event is surface. The surface is what most people actually associate with the term color. The surface may be for instance a layer of paint, paper or skin.
Lastly the observer. The observer is often neglected but is nevertheless very important. The observer very much determines the color event. Eyes may differ in sensitivity from one person to the next. But much more influential is what goes on in the observer’s brain: color constancy, perceptual order etc. In the brain of the observer, white may be seen as black, black may be seen as white, red may be seen as green. It is the brain of the observer that keeps insisting on ‘seeing’ paper white, even though the color may not be white at all due to lighting, when entering the eye. You don’t believe white may be black? Here’s a picture by Edward Adelson that may convince you:
checkershadow_double_full.jpg
I actually once asked Fred Bunting about the origin of the afore mentioned definition. Not willing to take full credit, he traced it back to various philosophers as well as his own work at Pixar studios. Nevertheless, he probably was the first to put it in this exact phrasing.

About August 2007

This page contains all entries posted to Livelygrey in August 2007. They are listed from oldest to newest.

September 2007 is the next archive.

Many more can be found on the main index page or by looking through the archives.

Creative Commons License
This weblog is licensed under a Creative Commons License.