Introduction
Color is an extremely important part of most visualizations. Choosing good colors for your
visualizations involves understanding their properties and the perceptual characteristics of
human vision. It is also important to understand how computer software assigns colors and
various hardware devices interpret those assignments. This exercise should help develop
your knowledge of color models and your ability to apply this knowledge to your projects.
The Spectral Basis for Color
Visible light, ultraviolet light, x-rays, TV and radio waves, etc are all forms
of electromagnetic energy which travels in waves. The wavelength of these waves is
measured in a tiny unit called the Angstrom, equal to 1 ten billionth of a meter. Another unit
sometimes used to measure wavelength of light waves is nanometers (nm) which are equal to
1 billionth of a meter.
Figure 1 - The electromagnetic spectrum
There is a narrow range of this electromagnetic energy from the sun and other light sources
which creates energy of wavelengths visible to humans. Each of these wavelengths, from
approximately 4000 Angstroms to 7000 Angstroms, is associated with a particular color
response. For example, the wavelengths near 4000 Angstroms (400 nm) are violet in color
while those near 7000 (700 nm) are red.
Figure 2 - The colors of the wavelengths of visible light
The CIE Color Model
Although some colors can be created by a single, pure wavelength, most colors are the result
of a mixture of wavelengths. A French organization, the Commission International de
L'Eclairage (CIE), worked in the first half of the 20th century developing a method for
systematically measuring color in relation to the wavelengths they contain. This system
became known as the CIE color model (or system). The model was originally developed
based on the tristimulus theory of color perception. The theory is based on the fact that our
eyes contain three different types of color receptors called cones. These three receptors
respond differently to different wavelengths of visible light. This differential response of the
three cones is measured in three variables X, Y, and Z in the CIE color model. This gives a
three dimensional model which is then projected onto one plane to give a 2 dimensional
graphic (See figure 3a). XYand Z are mapped to X and Y coordinates. This variation of the
CIE model is seen below in Figure 3b.
Figure 3a - In the CIE model - Z coordinates are projected onto the XY
plane
Figure 3b - The CIE color model mapped to X and Y coordinates
Notice in Figure 3b that the perimeter edge marks the wavelengths of visible light. Along this
edge will be the 'pure' spectral light colors. Other colors are developed by mixing varying
amounts of different wavelengths. Notice the purples at the bottom do not have a wavelength
associated with them. These purples are non-spectral colors, that is they can only be seen by
mixing wavelengths from the two ends of the spectrum. White light is perceived when all
three cones are stimulated, like purple it is only seen when light from many different
wavelengths is mixed.
One use for the CIE model is to specify ranges of colors that can be produced by a particular
light source. This range is referred to as a gamut. For example, a typical computer monitor
has a color gamut much smaller than all the possible colors. A color computer monitor
produces color by mixing specific red, green, and blue phosphors. As seen in the following
illustration, all the possible colors the monitor can produce fall within a triangle defined by
these red, green, and blue starting colors.
Figure 4 - RGB Computer Monitor Gamut shown in the CIE color model
Though there is a solid scientific basis behind the CIE system and it provides a very precise
way of specifying color, it is not terribly easy to use in practice. An alternative is start with
the three primary colors computer monitors use: red, green, and blue.
Primary and Secondary Color Hues
Figure 5 shows the three primary colors that computer monitors use to create all the possible
colors displayed. They are called the light primaries because they are created colors by
mixing light sources of these colors; in this case, glowing phosphors built into the computer
monitor screen.
Figure 5 - The three light primaries: Red, Green, and Blue
The three different colored phosphors are placed in groups very close to each other in groups
of three; a triad(see Figure 5). Each triad of primary colored phosphors constitutes a single
pixel on the computer monitor. The viewer does not see each phosphor, but the mix of the
group of three: the pixel. In fact, it is very difficult to see even a single pixel. The viewer is
likely to perceive the color of groups of pixels. By varying the intensity which these
phosphors glow, the computer monitor can vary the perceived color at each pixel. As
mentioned above, this manipulation of the phosphor intensity creates the gamut of colors
which can be created on the computer monitor.
Figure 6 - Each pixel on the computer monitor is made up of a triad of red, green, and
blue phosphors.
This mixing process can be represented by laying out all of the possible color mixtures around
in a circle. As you move in a circle from one primary to the next, you add more of the primary
you approach and less of the one you are moving away from. When you are 180 degrees away
from a primary, you have none of it mixed in. This color is the complement of the primary.
Figure 7 shows the three complementary colors added to the wheel. Each of these
complements has an equal amount of the primaries on either side of it and none of the primary
opposite it:
Primary Complement
Red
Cyan
Green
Magenta
Blue
Yellow
Figure 7 - Light primary colors and their complements
These complementary colors are also called either the secondary colors or the print primary
colors. The term print (or pigment) primaries refers to the fact that these complements to the
light primaries are the colored inks used to mix all possible print ink pigments.
This process can continue filling in colors around the wheel. The next level colors, the tertiary
colors, are those colors between the secondary and primary colors (Figure 8):
Figure 8 - The tertiary colors added to the primary and secondary colors
The Hue, Saturation, Value (HSV) Color Model
This process could continue, creating a solid ring of colors spanning all of the space between
the primaries. This definition of color really describes just one dimension of color: hue. Hue
is described with the words we normally think of as describing color: red, purple, blue, etc.
Hue is more specifically described by the dominant wavelength in models such as the CIE
system. Hue is also a term which describes a dimension of color we readily experience when
we look at color. It will be the first of three dimensions we use to describe color.
Figure 9 - The Hue, Saturation, Value (HSV) color model
You also perceive color changing along two other dimensions. One of the dimensions is
lightness-darkness. How light or dark a color is is referred to either as a colors lightness
or value. In terms of a spectral definition of color, value describes the overall intensity or
strength of the light. If hue can be thought of as a dimension going around a wheel, then value
is a linear axis like an axis running through the middle of the wheel (Figure 9).
The last dimension of color that describes our response to color is saturation. Saturation
refers to the dominance of hue in the color. On the outer edge of the hue wheel are the 'pure'
hues. As you move into the center of the wheel, the hue we are using to describe the color
dominates less and less. When you reach the center of the wheel, no hue dominates. These
colors directly on the central axis are considered desaturated. These desaturated colors
constitute the grayscale; running from white to black with all of the intermediate grays in
between. Saturation, therefore, is the dimension running from the outer edge of the hue wheel
(fully saturated) to the center (fully desaturated), perpendicular to the value axis (Figure 9). In
terms of a spectral definition of color, saturation is the ratio of the dominant wavelength to
other wavelengths in the color. White light is white because it contains an even balance of all
wavelengths.
These three dimensions of color: hue, saturation, and value constitutes a color model that
describes how humans naturally respond to and describe color: the HSV model. Because the
HSV model has three dimensions, it describes a solid volume. A horizontal slice of the model
shown in Figure 9 creates a disk of the hues running around the perimeter. The farther down
the value axis, the more restricted the saturation range (the radius of the disk) is and,
therefore, the smaller the disk. You can think of the overall shape of the HSV model as being
an upside-down cone, even though in reality the shape of the cone is somewhat distorted.
Another way you can slice the HSV model solid is vertically. If you took a slice along the
saturation axis at a red hue, it might look something like Figure 10:
Figure 10 - A saturation/value slice of a specific hue in the HSV model
This wedge shows all of the saturation and value variations on this particular red. At the top
of the wedge, the lightest red runs from high saturation on the right to white on the left. As
you move down the wedge, the reds get darker and the saturation range from right to left gets
narrower. We can take this theoretical wedge and actually try and see how many saturation
and value variations on this red you can make. It might look something like Figure 11:
Figure 11 - Example saturation and value variations on a single red hue
Color Mixing Interfaces used by Graphics Software
A color model where colors are defined by the dimensions of Hue, Saturation, and Value
becomes a useful method specifying colors to use when creating graphics. Different programs
have implemented this model -- and variations on it -- in a number of different ways. One way
is to slice the HSV model horizontally:
Figure 12 - HSV color selection interface using a hue/saturation disk and value slider
With the interface shown in Figure 12, the user adjusts the darkness with a slider (seen below
the disk) and then picks a hue/saturation combination within the disk. A larger swatch of the
color is then shown in the New box. If you want to specify the color numerically, Hue is
given as an angle while Saturation and Value are expressed as percentages.
An alternative interface is to create a Value/Saturation slice of a particular Hue:
Figure 13 - HSV color selection interface using a value/saturation rectangle and a hue
slider
With the interface shown in Figure 13, the user adjusts the hue with the vertical slider and
then picks a value/saturation combination in the rectangle. Notice that the left hand edge of
the rectangle shows the grayscale while the top edge shows the saturation range of a lightest
version of this red hue. Finally, notice that the lower right quadrant (dark and high saturation)
does not contain very many useful colors. If this corner is trimmed, you end up with the
value/saturation wedge seen in Figure 11. As in the previous HSV model interface, Hue is
specified as an angle while Saturation and Value (referred to here as B(lack)) are percentages.
There are, of course, many other ways of specifying color. One way is to specify color with
amounts of Red, Green, and Blue (the light primaries). Another is to specify amounts of
Cyan, Magenta and Yellow (the print primaries):
Figure 14- CMYK color model selection interface
Notice that in addition to Cyan, Magenta, and Yellow, Black (referred to by the letter K) is
also mixed in. Even though black can theoretically be made by mixing the three print
primaries, for practical reasons, pure black ink is added to expand the range of colors.