You are currently browsing the monthly archive for July 2007.

How colors relate to each other

Our eyes are perfected to see color in context. The picture below shows a stone head decorated with a flower in a Balinese garden. In a scene like this, colors are described relative to each other. The three basic characteristics to describe colors as we see them are lightness, color and saturation. The illustration at the right shows natural variations of the color of the stone head.

basic contrast il1

Left : Image by Arjen Benders
Center : Simplified image filled with average color from the regions
Right : The stone heads color with natural variations

 

Lightness
Possibly the most important difference between colors, is their lightness. A scene rendered only using lightness differences is still very understandable. However the emotive message changes in a black and white picture. Some information is lost. The difference you see between the green leaves and the stone head in the original is almost invisible in the black and white version. The right illustration shows lightness variations of the color of the stone head, such variations are called tints and shades.

basic contrast il2
Left : Black and White image, showing only the lightness of each color
Center : Simplified image filled with average grey from the regions
Right : The stone heads color with lightness variations

Color
Color is how every day language refers to what is also known as ‘hue’. Hue defines how red, green, blue or yellow a color is. If we could only see lightness and color as hues at their maximum levels the Balinese garden would look strangely surreal. Although our world is full of color, it is rarely highly saturated colors. The right illustration shows color variations of the color of the stone head, all three stripes have equal saturation and lightness levels.

bc_3.jpg
Left : Image with maximum visibility of the accurate hues
Center : Simplified image filled with average color from the regions
Right : The stone heads color with hue variations


Saturation
Describes how much of a specific hue is in a color. The way it is used here is officially called chroma or chromaticness. A mono colored world often looks quiet composed, especially when lightness variation is included. Notice how sensitive your eye is to the green in all variat

bc_4.jpg
Left : Image rendered using only a single hues in all saturations and lightness levels
Center : Simplified image filled with average color from the regions
Right : The stone heads color with chroma variations

If you like to read the scientific definitions of all color terms visit http://tigger.uic.edu/~hilbert/Glossary.html written by Alex Byren and David Hilbert

A step by step guide to make a color scheme with an accent.

Neutrals make great backgrounds for information and images. If you have a nice set of neutrals any color accent will look good with it, a bit like vanilla ice cream with a cherry, a pistachio or a piece of chocolate – they are all delicious. What you can make could look like this:

ne-1.jpg

Process overview:
1. pick a neutral light color to start with
2. create close variations of that color
3. add an accent color
4. add a shadow color for text

ne-2.jpg

Process Details:
1. Pick a light neutral color to start with.
That sounds easier than it is. Neutrals are difficult to judge and the differences between them are often only visible when you put them next to each other. Also here you are interested in almost whites and almost perfect grey colors. To make your life easier pick a neutral color from an image. Google helps with a ton of ice cream photos – avoid the brightly colored ice creams though. Alternatively the sandy beach and the tide image below provide a wide range of warm and cold neutrals.

ne-6.jpg
Photos by Arjen Benders 2005

 
2. Create close variations of your light neutral color.

There are several possibilities to create a group of very close variations. Select colors which differ in color, saturation and lightness. You can pick several colors from the same area of an image or use a color picker to alter color values. Photoshop’s ‘variations’ offer a range of automated variations. Alternatively use genopal online www.genopal.com  which gives you control over the suggested variations.

 

3. Add an accent color.

This bit actually is easier than it sounds, almost any color will do. Choose a color with a medium saturation level. If you need some inspiration, pick one of the neutrals and see what happens when the saturation value is increased.


ne-4.jpg

 

4. Add a shadow color.

The shadow color becomes your ‘black’.  The shadow is mainly used as a text color. Pick any of your previous colors, neutral or accent and alter the L slider, so that you get a very rich dark color which makes everything else look good.

ne-3.jpg

The majority of ‘kuler’s’ most popular color schemes are not harmonious

A look at the 100 most popular color schemes on Adobes ‘kuler’ color tool and color community site reveals that a large majority of color schemes fall outside the rules of color theory. That makes us wonder if peoples practice is ugly and unharmonious, or there is a flaw in the theory.

th12.jpg

Some color schemes published at http://kuler.adobe.com/#

 

This result is even more surprising as ‘kuler’ has the rules readily available as built in schemes and also allows improvement of shades or hues. But even with the liberty of interpretation, only 40 color schemes resembled the rules to some extent. If the rules were to be taken as Johannes Itten intended them, he would have found only 8 color schemes to match his theory. To learn more about color theory visit www.color-wheel-pro.com/color-wheel-types.html

More than half of all color schemes fall into the category ‘custom’ and are designed with total freedom. If you add compound schemes, interesting colors from multiple hues, and shades which are described as subtle variations of the base color’s hue, one arrives at a stunning two third of the most popular schemes ignoring what is thought to be the accepted rule in designing with color.

From the 6 rules of color harmony only two enjoy some appreciation: analogue color schemes, characterized by the adjacent hue of the colors and complementary schemes, combining colors from opposite sites of the color wheel. The order of the original color wheel is based on the three primaries; red, blue and yellow. This leads to, for example, the complementary pair of magenta and yellow. At ‘kuler’ magenta opposes a green, as it would happen if the wheel would be build up by two opposing axis red-green and blue-yellow. This is called the opponent theory and led to color spaces, which are by most physiologist believed to accurately describe the color order as perceived by humans.

Suspiciously the creative community seams to ignore not only knowledge created and accepted in other disciplines but also manages to ignore their own practice. Once the reality that color theory fails to explain color preferences gets accepted, one can again start to wonder: what is the secret of a great color sense?

 

This is about to become a place for color. Color basics, how to color things and make color schemes, some thoughts about color and some color research will be posted here. This way I will learn if my ways with color have some value to you and the world. Hello world!