« Brightness, saturation and hue | Main | color games »

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.

TrackBack

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

Listed below are links to weblogs that reference Brightness vs. Whiteness:

» The Müller Formula (or: Predictable Color Preferences) from Livelygrey
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 color... [Read More]

» 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]

» google chrome from google chrome
Great read! Your views are very similar to my own! [Read More]

Comments (4)

pfraser:

hello,
the term bright is often a synonym for intensity or chroma. it seems like your discussing the concept of inherent value, but using the word "bright". isn't saturation/brightness the measurment of a hue's purity (to its spectral form) and therefore brightness/saturation?
can you elaborate on this?
thanks!

Igor:

Hi pfraser,
I can't lay claim to the 'correct' definition of the term brightness. English isn't even my native language. But as your wording "often a synomym" implies, the term is ambiguous.
I can only hope that people reading my blog will understand what I myself mean when using the term. The first posts of this blog have deliberately been about definitions...
The term 'brightness' is covered in the previous post.

Bridget:

Hello,
This isn't a comment or critique on anything you have written, it is only a note of appreciation from someone who has recently discovered a great interest in the science behind color. It is great to find someone with as much experience as yourself break down color theory into the basics so that the novice can start to understand more. I was just wondering if there are any other resources you would recommend for someone such as myself. Thanks again for taking the time to create this blog. I love it!

Bridget,
Thanks for your comment. For further reading stay tuned to this blog and see the 'books' section on the homepage.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

 Subscribe to feed

AddThis Social Bookmark Button

Subscribe by Email

About

This weblog is an attempt to transmit some of 20+ years of professional color experience.
More…

Info

This page contains a single entry from the blog posted on August 18, 2007 10:53 PM.

The previous post in this blog was Brightness, saturation and hue.

The next post in this blog is color games.

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.