Entries tagged with “hue” from Livelygrey

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.

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.

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.

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

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.

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?

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.

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.

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.

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.