Josh On Design

Color is important. We see in color. Different colors make us feel different ways, or remember different things. Most companies take their colors very seriously. Coca-Cola red is trademarked color. Pantone has copyrighted their color sets. The Brits feel it necessary to add an extra letter to their colours. Color is powerful but also dangerous. One false step and your carefully crafted website could look like this.

Okay, so maybe it won't be that bad, but your choice of color has a huge effect on your designs. Still, color doesn't have to be scary. In this article I'm going to cover the basics of color, how colors works from a physics and technical perspective, and some quick tips on choosing great colors. In a future article I'll come back and cover the emotional aspects of color, and how to integrate color with other elements of design. This article will definitely

not

be exhaustive. Many PhDs have been earned exploring the expansive topic of color. Fortunately we just need to know the basics to begin using well balanced colors.

The Eye

The first thing to remember is that color doesn't really exist. Color is simply the sensation in the brain caused by our eyes responding to different frequencies of light. You may have taken a physics class in high school where your teacher talked about the visible spectrum of light, which is the set of frequencies the human eye can see. You probably saw diagrams like this:

the rainbow represents the visible spectrum of light

Human eye response to light.

Our human eyeballs contain three kinds of color receptors that each respond to different ranges of light. These three ranges roughly correspond to red, green, and blue frequencies of light, (though only roughly). It's this correspondence that makes the Red/Green/Blue (RGB) color model so convenient for electronic displays. By combining red, green and blue a monitor can simulate most colors in the visible spectrum. Note that this is only a rough correspondence. There are colors our eyes can see which monitors cannot reproduce, as well as colors screens can show that our eyes can't really see. However, it's close enough to work pretty well in practice. (see

this Wikipedia article

for more on color vision).

Subtractive and Additive Color Models

In order to represent color on a computer screen we need to have a model for color. There are roughly two kinds of color models:

subtractive

and

additive

. With subtractive the colors combine to equal black. Additive means the primary colors combine to equal white. Subtractive color is how objects in the real world reflect light (it is often called

reflective

color for this reason). If you shine a white light on a red ball you will see only the red because the ball's paint absorbs all of the frequencies of light other than red. The other colors have been

subtracted

from the white, leaving only red. Additive color is used whenever something

generates

light rather than reflecting it, such as the phosphors in a traditional CRT, or the LCD segments in a modern flatscreen display. Red, green and blue are added in various amounts to create different colors, ultimately

adding

up to white. In subtractive color the primaries are red, blue, and yellow, which you may remember from art class as a child. That's because paint is subtractive, (and why mixing all of the colors together resulted in a dark brown mush). In additive color the primary colors are red green and blue. This is the last I will discuss subtractive color, at least until we come back to printing technologies (which reflect light and are therefore subtractive). Additive color is used in virtually all interactive computer displays (the reflective electronic paper display made by eInk for Amazon's Kindle is a notable exception). Since at least 99% of my likely audience is working additive color displays, that's all I'll cover here.

Basic Additive Color Models

So that's it for theory of light. Now let's talk about how computers actually put colors on screen. If you've worked with computer graphics at all you are probably familiar with the RGB color model. In this model a color is described by equal parts red green and blue. Virtually all computer systems use this model internally because it fits the hardware well and can be easily represented with a 32bit integer, using 8 bits for each color plus another for transparency (called the

alpha

channel for historical reasons). You can think of RGB as a cube with the value of each axis coming from one of the three colors. RGB is the most efficient format for the modern computer to use but it may not be the best for you, the programmer, to use. There is another common color model which you are likely to run across.

The RGB Color Cube

HSV / HSB Color Model

Hue, Saturation and Value (HSV) is the color model you are most likely to run into. It is sometimes called HSB, where the B stands for

brightness

instead of

value

. This model works hand in hand with the RGB color model, giving you a new way to specify colors which can then be converted into RGB for display. Think of HSV as a cylinder where the

hue

is an angle (0 to 360) representing the pure color (red, magenta, yellow, etc). The distance to the center is the

saturation

going from the pure color (1.0 == fully saturated) to white (0.0 == no saturation). The height within the cylinder represents the

value

or brightness of the color, going from completely bright (1.0) to no brightness (black, 0.0).

The HSV Color Cylinder

There is also a related color model HSL/HSI where the third component is

lightness

or

intensity

. HSL is similar to HSV except that saturation and brightness are arranged differently, represented as a double cone with the pure colors at the center. In practice all of the various computer color models convert into RGB for display, so which one you use is largely a matter of convenience for the particular task you are doing. That's enough theory for today. Here are a few quick tips that will help you pick and use color in your software designs.

Steal Someone Else's Colors

The easiest way to pick colors is to let someone else do it. Go to one of these sites and search for something which matches your needs. For example, if I'm working on a design that feels like harvest or fall colors I could search for 'autumn'.

ColourLovers.com search for 'autumn'

Kuler.adobe.com search for 'autumn'

Steal Some*thing* Else's Colors

Pick colors from some existing source, such as a photo or object that you think is pretty. For example, Ken Orr and Kathryn Huxtable started building a very nice Swing theme based on a photo of sea glass. If something looks pretty then it probably already has a good balanced color scheme; so steal it!

Sea Glass look and feel

DeGraeve.com has a

simple webapp

which will turn a photo into a color palette. I used it to on the photo below to create a nice tropical sea palette.

Color palette produced by DeGraeve.com

Pick a Color and Change One Thing

Monochromatic designs are easy to do and usually look good. Take one color and change one thing, such as its brightness or saturation. This is especially good for creating gradients. That's all for this week. Please let me know if there are any particular topics you'd like me to cover.

Links

• "Creating Consistently Colorful User Experiences" at UXBooth.com. Parts 1, 2, and 3.
• Color Theory, Wikipedia
• RGB Color Model, RGB
• HSL and HSV Color Models, HSV

All diagrams above are from Wikipedia.