You are on page 1of 15

Overview

Color theory and design


Edward Wegman∗ and Yasmin Said

In this article, we discuss color theory and design with emphasis on use in
statistical, scientific, and data visualization. Color theory is inextricably linked
to the physiology of the human visual system, and color design is similarly
inextricably linked to human perception. We discuss color perception in the
human visual system. We then quantify color perception in terms of the Munsell
System and the International Commission on Illumination (CIE) color space. We
continue to discuss color design with a perspective on individuals with defective
color perception and finally conclude with a discussion of color design for the use
of color in presentations.  2011 John Wiley & Sons, Inc. WIREs Comp Stat 2011 3 104–118 DOI:
10.1002/wics.146

HUMAN VISUAL SYSTEM There are three types of cones. A somewhat


simplistic interpretation is that red cones are sensitive
T he perception of color has at least two major
components. On the one hand, color can
be discussed simply as a phenomenon of certain
to red light, green cones are sensitive to green light, and
blue cones are sensitive to blue light. More precisely,
the cones are sensitive to long, medium, and short
wavelengths of electromagnetic radiation. On the
wavelengths of light. The peak response of the cones
other hand, most electromagnetic radiation cannot be
do not actually occur precisely in the red, green,
perceived by human beings. It is the very narrow band
and blue color bands, but the perception of color
of electromagnetic radiation that can be perceived
depends on contrast among the stimulation levels of
by humans that we call light and which leads to an
the different cell types.
incredible sensory experience that we call vision. It is
With the simplification of red, green, and blue
this marvelous confluence of, in some sense, absolute
cones in mind, when red light hits the eye, the cones
wavelengths of electromagnetic radiation and psycho-
sensitive to red are excited, causing a particular
physical decoding of these wavelengths in the human
sensation in the brain. That is what we call ‘red.’
visual system that gives rise to the perception of color.
This is what physically happens when we observe, say
Human vision relies on light sensitive cells in the
a tomato in neutral daylight: the sunlight, composed
retina of the eye. There are two basic kinds of sensors.
These are rods and cones. Rods are cells which can of electromagnetic waves with wavelengths from 380
work at very low light intensity (scotopic), but cannot to 780 nm, shines on the tomato. The tomato absorbs
resolve sharp images or color. The rods contain a the light from 380 to 580 nm and reflects the light
pigment, rhodopsin, also called visual purple, which from 580 to 780 nm. This light reaches the eyes,
saturates at higher levels of light. Cones are cells where it excites the cones that have their sensitivity
that can resolve sharp images and color, but require centered on 570 nm. The signals from these cones are
much higher light levels to work. Figure 1 illustrates finally processed by our brain. We are taught that this
the major components of the human eye. Both the particular sensation is called ‘red.’
rod cells and the cone cells are located on the retina. The relationship between wavelength and actual
The central part of the retina is called the fovea, hue is roughly:
which is where cells responsible for vision are most
densely located. There are about 107 foveal cones. • 620–730 nm: red
The combined information from these sensors is sent
to the brain and enables human vision. • 590–610 nm: orange
• 550–580 nm: yellow
∗ Correspondence to: ewegman@gmail.com • 490–540 nm: green
Center for Computational Data Sciences, George Mason University,
Fairfax, VA, USA • 450–480 nm: blue
DOI: 10.1002/wics.146 • 380–440 nm: violet.

104  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

Pupil
Iris Cornea
Posterior chamber Anterior chamber
(aqueous humour)
Zonular
fibres
Lens Ciliary muscle
Suspensory
ligament
Retina

Choroid Vitreous
humour
Sclera

Hyaloid
canal

Optic disc

Optic nerve Fovea

Retinal
blood vessels
FIGURE 1 | Schematic diagram of the human eye. This image is used under the Creative Commons Attribution-Share Alike 3.0 License. Details are
at http://creativecommons.org/licenses/by-sa/3.0/legalcode.

The colors we see are affected by the intensity composed of red, green, and blue light. Because the
of light and by its spectral content. At low levels of intensity information for each of the three colors is
illumination, objects are less colorful because rods preserved, the image color is preserved as well. The
are dominant. In bright daylight, we see more color, spectral distribution of the image will probably be
contrast, and saturation because cones dominate. wrong, but if the degree of intensity for each of the
Figures 2 and 3 illustrate these effects. primary colors is correct, the image will appear to be
the right color. Red, green, and blue are the additive
primary colors because they correspond to the red,
COLOR THEORY green, and blue cones in the eye.
Subtractive color processes work by blocking out
Based on the notion that all color perception in parts of the spectrum. The idea of subtractive color
humans can be reconstructed using the three so-called is to reduce the amount of undesired color reaching
primary colors, red, green, and blue, a theory of color the eye. If, for example, one had a yellow image, one
perception can be developed. It should be noted that would want to have a dye that would let red and
other animals may have more or less color perception green reach the eye, and block out blue. The additive
or no color perception at all. Indeed, the pigments in secondaries become the subtractive primaries, because
the eyes can vary from one animal group to another each of the additive secondaries will reflect two of the
and can be used to tell the evolutionary distance additive primaries, and absorb one of the additive
between animal groups.1 Thus color theory based on primaries (Figures 4 and 5). See also Table 1.
red, green, and blue applies to human color perception With this information, in a subtractive color
and not necessarily to any other animal groups. system, such as printed documents that reflect light,
Additive color processes, such as television, if we wanted red, we would mix magenta and yel-
work by having the capability to generate an image low. Magenta would absorb green, and yellow would

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 105


Overview www.wiley.com/wires/compstats

FIGURE 2 | Image at low level of illumination so that it is less colorful. Rods would dominate. Photo by Yasmin Said.

FIGURE 3 | Image at high level of illumination in open air market. Cones would dominate. Photo by Edward Wegman.

absorb blue, leaving only red to be reflected back some light from other parts of the spectrum still is
to the eye. For black, a combination of all three reflected.
would be used, which should, in principle, block A useful observation in an additive color system
out all light. In practice, printers use black as well, is that because magenta is made of red and blue in
because the dyes used in printing are not perfect, and equal intensities, that mixing magenta and green is,

106  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

TABLE 1 Additive Secondaries/Subtractive Primaries Absorption


Chart

Color Reflects Absorbs


Yellow Red and green Blue
Magenta Red and blue Green
Cyan Green and blue Red

FIGURE 6 | Professor Sam Wilks illustrating additive


complementary colors. This photo is used with permission of the Army
Conference on Applied Statistics. Professor Wilks proposed the Army
FIGURE 4 | Additive secondaries are derived by combining primary Design of Experiments Conference. The first such conference was held
colors. in October 1955 and was chaired by Professor Wilks.

with anaglyph stereoscopic displays, it is useful to


make one eye peer through a red filter and the other
through a cyan filter. Thus the overall impression
is a white background. Often, the anaglyph glasses
are red and green giving a background color of
yellow, or red and blue, giving a background color of
magenta.
Color can be defined by three properties: hue,
saturation, and lightness or brightness. When we
call an object ‘red,’ we are referring to its hue.
Hue is determined by the dominant wavelength. The
saturation of a color ranges from neutral to brilliant.
FIGURE 5 | Subtractive primaries mixing chart. Colors are desaturated by mixing in white or gray or
black. Lightness or brightness refers to the amount of
light the color reflects or transmits.
in effect mixing red, blue, and green, which should
give us pure white. Thus in an additive color system,
magenta and green are complementary colors. In the The Munsell System
same way, red and cyan are complementary colors and Color ordering systems, such as the Munsell System,
yellow and blue are complementary colors. Figure 6, use the three properties of color to identify unique
which is a somewhat doctored black and white colors. Notice that colors are distributed in three
photograph of the late Professor Sam Wilks illustrates dimensions: hue, chroma (saturation), and value
the complementary nature of these color pairs. One (lightness). We commonly see colors arrayed in
can take advantage of these complementary pairs in two dimensions. This is a useful, but incomplete
data visualization as well as anaglyph stereo. In the representation. Value is the third dimension that
data visualization context, if one has two clusters, it is not shown in two-dimensional color wheels, but
is useful to brush one with, say, red and the other is often used in image editing software. Professor
with, say, cyan. These colors together make white, so Albert Munsell’s (1885–1918) description of the
where the clusters overlap, the mixing of colors will color system was published in Refs 2,3. Munsell’s
yield white. Plotted against a black background, it system was based on rigorous experimental research
becomes evident where the clusters overlap. Similarly with careful measurements of human visual responses

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 107


Overview www.wiley.com/wires/compstats

FIGURE 7 | Illustration of the Munsell color system. The vertical direction represents value or lightness. The radial direction represents Chroma or
Saturation. The angular direction represents Hue. This image is used under the Creative Commons Attribution-Share Alike 3.0 License. Details are at
http://creativecommons.org/licenses/by-sa/3.0/legalcode.

to color (Figure 7). It persisted for many decades, 2.0


x (l)
eventually being superseded by systems such as y (l)
the CIE (in French, Commission Internationale de 1.5 z (l)
l’Eclairage).
1.0

CIE Models
0.5
If the Munsell system established the three-
dimensional nature of color perception, the CIE
models attempt to establish numerical values.4,5 To 0.0
400 500 600 700
measure and predict the appearance of a particular l/nm
color, we need a way to link perception to numbers
and formulas. Scientific color values were established FIGURE 8 | XYZ Color matching functions as described in the text.4
earlier this century by the CIE group. CIE models This image is used under the Creative Commons Attribution-Share Alike
for defining color space all rely on the same basic 3.0 License. Details are at http://creativecommons.org/licenses/by-sa/
numbers. There are basically two variants of the CIE 3.0/legalcode.
color space known respectively as CIE XYZ and CIE
xyY. As mentioned earlier, the cones within a human
eye have stimulus response to different wavelengths, tristimulus value to the eye, which would therefore be
long, medium, and short wavelengths. These, we recorded as the same color even though the combined
mentioned, are frequently designated as Red, Green, spectrums are distinctly different. This effect is called
and Blue although the peak sensitivity of each type metamerism.
of cell does not correspond exactly to these colors. Because of the distribution of cone cells on the
These are designated in the CIE system as CIE XYZ retina, color perception depends on the field of view
(Figure 8). The ability of the human eye to respond with each individual having different distribution and
to three different wavelengths is called tristimulus. It different field of view. The CIE sought to eliminate
is, of course, possible for two sources of light with this variability be defining a standard colorimetric
distinctly different spectral distributions to combine to observer. With the belief that most cones are located
present a tristimulus value to the eye and be recorded within 2◦ of the fovea, the chromatic response of
as a certain color. It is possible for another two the standard colorimetric observer was taken to
sources of light with different spectral distributions be the response of the average human within 2◦ .
from the first two to combine and present the same Based on extensive experimentation,6,7 the standard

108  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

colorimetric observer is characterized by three color The CIE xyY color space is a derived color
matching functions. The color matching functions are space. The Y value was designed to reflect the overall
a numerical description of the chromatic response luminance (brightness, lightness). The remaining two
of the standard colorimetric observer, which is, of dimensions are characterized by the x and y and are
course, the average chromatic response of a number of used to specify colors. Here the normalized values are
humans. The CIE defines the color matching functions given by
as x(λ), y(λ), and z(λ) where λ is the wavelength in
X
nanometers. x=
The tristimulus values X, Y, and Z for a color X+Y+Z
with spectral power distribution f (λ) are given in terms Y
y=
of the standard colormetric observer as X+Y+Z
 ∞ Z
X= f (λ)x(λ)dλ z= .
X+Y+Z
0
 ∞ The values x and y specify the chromaticity
Y= f (λ)y(λ)dλ diagram, independent of luminance. This diagram is
0
 ∞
illustrated in Figure 9.
Z= f (λ)z(λ)dλ. In the CIE XYZ color space, the saturation
0 (chroma in Munsell, purity in CIE) is the Euclidean

0.9
520

0.8
540

0.7

560

0.6

500
580
0.5
y

0.4 600

620
0.3
490 700

0.2

480
0.1

470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8
x

FIGURE 9 | CIE xyY Chromaticity Diagram as a function of x and y. The range 380 to 700 nm represents the range of perception of visible light
for humans. Saturation as well as chroma are represented in this diagram. This image is used under the Creative Commons Attribution-Share Alike
3.0 License. Details are at http://creativecommons.org/licenses/by-sa/3.0/legalcode.

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 109


Overview www.wiley.com/wires/compstats

distance between the position of one color (x, y) and 1


the illuminant’s reference white (xw , yw ), i.e. that set of
three chromaticity values that determines the reference 0.9
white in the xy plane divided by the same distance for
0.8
a pure (monochromatic) color with the same hue γ
(xc , yc ) = ρmax (x − xw , y − yw ) + (xw , yw ) where ρmax 0.7
correction
1/2.2
is the maximum in the chromaticity diagram. Then
purity is defined as 0.6

 0.5 0.5 0.5


(x − xw )2 + (y − yw )2
p=  .
(x − xc )2 + (y − yc )2 0.4 CRT
γ 2.2
In an RGB space, saturation can be thought of 0.3
as the standard deviation, σ , of the color coordinates 0.218 0.218
0.2
R (red), G (green), and B (blue). Letting µ be the
luminance, then 0.1

0
(R − µ)2 + (G − µ)2 + (B − µ)2 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
σ = .
3
FIGURE 10 | A typical γ curve for a CRT. In order to correct for the
nonlinearity in the display device, a complementary γ correction curve
While Figure 9 represents the experimentally must be introduced. Note that near one and near zero the γ curve is
derived range of colors that a human being can close to the idea linear response. This means respectively whites are
see, mechanical reproduction of these colors typically white and blacks are black. This image is used under the Creative
occupy a much smaller range of available colors. Commons Attribution-Share Alike 3.0 License. Details are at
This range of colors that are reproducible by a http://creativecommons.org/licenses/by-sa/3.0/legalcode.
given technology is called the gamut. Measuring color
allows us to compare the color gamut, or range of To summarize the color concepts:
colors produced by different methods (Ref 8, Section
18.7). Color transparency film produces a wide range • Hue: color with no black, white or gray added
of colors including some a monitor cannot display. • Tint: hue + white
Color printers and printing presses have different
color gamuts. Roughly speaking in the order of • Shade: hue + black
decreasing gamut range the technologies are: color • Tone: hue + gray or hue + varying degrees of its
transparency film, color monitors and HDTV systems, complementary color
NTSC systems, color printers, and printing presses. • Value or Lightness or Brightness or Luminosity:
These systems can never capture all the colors that the how light or dark a color appears
eye can see, but they can simulate the appearance very • Intensity or Purity: how bright or dull a
successfully if color reproduction is understood and color appears, also called saturation and/or
controlled. chromaticity. Basically, how much of the hue
Another important characteristic of each is identifiable. Grays are achromatic, meaning
component in the color production system is its no hue/color.
gamma (γ ). It is a number that indicates the
relationship between the signal values at input and
output of a particular device. A γ of 1 indicates a Digital Colors
linear behavior. This means that the device’s output is Although the CIE and Munsell color systems assume a
directly proportional to its input. A color display may continuous range of colors, in fact, when reproduced
have a nonlinear color behavior. If the video signal digitally, there are only a finite number of distinct
at the input contains a value of 60% of full-scale colors available. Many of us from childhood would
red, the image on the screen may be only 30% of be familiar with the idea of a finite number of colors.
full-scale red (thus dark-red). This is why a scanned Crayola crayons for beginners came in a box with 8
image normally looks darker when it is shown on a colors (23 ). More advanced color choices could be had
display. This behavior can be graphically displayed in in boxes of 16 colors (24 ), or 32 colors (25 ), or even 64
a γ curve (Figures 10 and 11). colors (26 ). The Crayola website9 gives an interesting

110  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

(a) (b) (c)

FIGURE 11 | Illustration of the effect of γ adjustments. Notice that the whites remain white (T-shirt) and the blacks remain black (shadow). The
middle image was what came from the digital camera. The left image is with γ adjusted down, the right with γ adjusted up. This illustration is
courtesy of Edward Wegman.

chronology of the development of the Crayola colors, eye is generally thought to be unable to distinguish
including some interesting name changes reflecting 224 distinct colors, so that for purposes of rendering
political correctness. For example, Prussian blue was images for human perception, 24 bit color is more
changed to midnight blue, flesh was changed to peach, than adequate. For scientific purposes, however, a
and Indian red was renamed chestnut. There are higher color resolution is desirable. The HDF file
currently 120 Crayola colors available close to the format is used for the earth observing system (EOS),
next power of 2, 27 = 128. which has the capability of 264 , or 64 bit color. Most
Typically, digital colors are represented at the computer-based color schemes use a 24 bit color scale,
hinted-at powers of 2. Depending on the application, 8 bits in each of red, green, and blue, or equivalently
the color resolution can range from 28 to 264 . The 256 levels for each of the colors. Thus (0,0,0) would
GIF image file format uses 28 , i.e. 8 bit color or represent black, (255,255,255) would represent white,
256 distinct colors. This is far from the range of (255,0,0) would represent pure red, etc. Color in a
colors the human eye can distinguish, so it is poor webpage can be specified by specifying the intensity of
at representation of continuous tone images. The each of the RGB components. This is typically done in
GIF file format compresses images in color space hexadecimal notation, where 0 , . . . , 9 represent those
so that all colors are mapped into only one of the numbers and A, B, C, D, E, F represent the numbers
256 colors available. The usual recommendation is 10, 11, 12, 13, 14, 15, respectively. Thus the code FF
to use GIF file format only if the image has a small in hexadecimal is 255 in decimal notation. Thus the
range of colors, e.g., in line drawings. The JPG (or code for pure white in HTML would be %FFFFFF.
JPEG) file format has a 24 bit color space, i.e.,
224 = 16,777,216. This amounts to 8 bits for each
of red, green, and blue. JPG files are compressed
COLOR DEFICIENCIES IN HUMAN
spatially rather than in color space. Thus neighboring VISION
pixels may be somewhat averaged. However, because Deficiencies in human color vision can result from
JPG is normally used for continuous tone images a number of causes. Perhaps the most frequent
such as photographs, this spatial compression is not deficiency is caused by changes due to aging of
usually noticed. It is however detectable when JPG the individual. Other deficiencies can result from
compression is used for line drawings. TIFF format defective performance of certain types of cones even if
files also employ 24 bit color and need not have any all three are present, missing types of cones, from
compression. Thus, if space is not of consideration, altogether missing cones, or from trauma to the
TIFF files are preferred. More recently, another image brain. Most of color theory is based on the notion
file format has emerged, the PNG format. This was of tristimulus meaning that there are three types of
created when the developers, Unisys, of the GIF format cones in the human eye, which have photopigment
decided to enforce the patent on LZW compression receptors that are sensitive to light in different
on which the GIF file format is based. PNG format wavelength ranges. Individuals with all three cone
also is capable of millions of colors. The human type are called trichromats. There is some indication

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 111


Overview www.wiley.com/wires/compstats

that some individuals may have a fourth type of TABLE 2 Types and Percentages of Anomalous Trichromats.
photopigment so that they, indeed, might have four (Reprinted with permission from Ref 12. Copyright 2004)
different types of cones and hence have an even richer Type Cone % Male % Female
color experience.10
Protoanomalous Red 1.0 .02
Deuteranomalous Green 4.9 .38
The Elderly Tritananomalous Blue ∼0 ∼0
Because the general population is aging, the majority
of difficulties with color perception is among the
elderly. One of us defines elderly as elderly = max(65, TABLE 3 Types and Percentages of Dichromats. (Reprinted with
age of EJW+10). The 2000 census indicated that permission from Ref 12. Copyright 2004)
12.4% of the US population was over 65 years old, Type Cone %Male %Female
and estimates by Hayutin11 from the Stanford Center
Protanope Red 1.0 0.02
on Longevity indicate that by 2030 some 22% of
the US population will be over 65. Indeed more than Deuteranope Green 1.1 0.01
20% of residents of most developed economies will Tritanope Blue 0.002 0.002
be older than 65. Deficiency of vision in the elderly
is a result of yellowing and darkening of the lens and
the shrinking of pupil size. Yellowing of the lens has While anomalous trichromats have color vision,
the result of blocking short wavelength (blue) light so and so are not technically color blind, there is a
that the intensity of bluish colors is diminished. Of definite impairment of color vision. Truly color blind
course, colors that have a blue component will shift in individuals have either one, two or three deficient
the perception of the elderly so that cyan, blue-gray, photopigments, i.e. they have only two types of cones,
light blue, magenta will be affected and more difficult dichromats, one or no type of cones, monochromats.
to distinguish. Because of the shrinking of the pupil The encoding of the protein necessary for color
size, less light will reach the photoreceptors in the eye recognition resides on the X chromosome. Because
so that colors generally appear darker that they would males have only one X chromosome, whereas females
for younger individuals with similar illumination. have two X chromosomes, color blindness is much
For example, yellows may appear brown and blues more likely to occur in males. The effect is masked in
may appear black. Of course, when considering color females even if there is a defect in one X chromosome,
design for the elderly, these effects must be considered. the other will compensate. Table 2 reflects this effect
More saturated primary colors are thus recommended. because of the reduced production of one of the
photopigments.
For dichromats, there are some hues which they
Color Blindness simply cannot perceive. Colors that would appear
There are three basic types of color impaired vision, completely different for trichromats, would appear to
what might be called color blindness. People with be the same color (metamers) for the dichromat. As
normal color vision, as mentioned before, are called with the anomalous trichromats, the dichromats fall
trichromats. One less severe form of color impaired into one of three classes depending on which color
vision occurs when there is an overabundance or photopigment they are missing. Table 3 outlines the
marked deficiency in cone cells with one of the three types and percentages of dichromats.
photopigments or when one of the photopigments Again, because of absence of the protein
responds to an unusual wavelength. The individuals necessary to produce photopigments, the prevalence
are called anomalous trichromats. Basically, anoma- of color blindness in males is substantially higher
lous trichromats can match color in the complete than in females as reflected in Table 3. Protonopes
range of hues, but require extra stimulation of cer- and deuteranopes are red-green color blind and
tain primaries. They are not technically color blind, generally see only blues and yellows. Analogously,
but, in general, have difficulty in distinguishing cer- tritanopes are blue-yellow color blind and see only
tain colors that a normal trichromat would easily reds and greens. When the stimulus to the two
distinguish. Depending on which primary requires types of photoreceptors is equal, the dichromat will
extra stimulus, anomalous trichromats fall into one of perceive the color as gray. This is the so-called
three categories: protoanomalous, deuteranomalous, neutral point. For protonopes and deuteranopes, the
or tritananomalous. The proportions of the anoma- neutral point are almost the same. For the protonope
lous trichromats are outlined in Table 2. the neutral point is approximately 495 nm and for

112  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

the deuteranope, the neutral point is approximately with albinism frequently have difficulty with vision,
500 nm. These would appear to be a slightly bluish although it is not a given that they will be color blind.
green to a trichromat individual. At wavelengths lower Both albinism and color blindness have to do with the
than the neutral point, these dichromats would see a failure to synthesize pigment proteins, but they can
rapidly saturated blue and wavelengths higher than and often are independent conditions.
the neutral point they would see a rapidly saturated
yellow. Thus they can easily distinguish these colors.
Of course, while protonopes and deuteronopes are COLOR DESIGN
deficient in the range of hues, they are not deficient The use of color as a design element entails both
in the range of lightness and saturation. Unless a a physiological response from the viewer as well
color is pure or saturated, dichromats will still have as a response based in a cultural context. For
some perception of the deficient color. For example, example, while many Western brides wear white
a protonope will have no red receptors. However, the dresses as a symbol of purity, Chinese brides usually
green photopigment is still slightly responsive a long wear red, a color that is a symbol of good luck.
wavelengths and the rods also will also be receptive, The use of color symbolism varies tremendously
so some perception of the red color can be made, from culture to culture. However, there are still
although the protonope may not recognize it as ‘red’ certain physiological responses that are products of
(see Figure 8). Similarly, for the deuteranope. The the human visual system combined with experience
neutral point for the tritanope is about 570 nm, which common to all humans. For example, distant objects
would appear yellow to a normal trichromat. Higher often appear as bluish and somewhat indistinct as,
wavelengths would appear red and lower ones green. for example, viewing mountains or forests from a
distance. This is a consequence the greater refractive
‘The description of dichromatic color perception index for shorter wavelength of light. This bluish
comes from both theory and from studies of a hazing effect is known as aerial perspective and is an
few people who were dichromatic only in one eye. experience common to all cultures. This is why the
However, it’s not absolutely conclusive. First, there sky appears blue. Similarly, this same refractive index
is no guarantee that the normal eye of a unilateral effect is why the moon appears reddish when low in
dichromatic is really normal. Second, studies often
the sky.
find that dichromatic color vision is much better
than that predicted by theory. The best guess is that
From the perspective of data visualization, it
rods activate the red component red-green opponent is fruitful to understand the distinction between a
process to give dichromats a weak three-dimensional cultural understanding of color and a physiological
color space.’ (Ref 12) response to color. From a physiological perspective,
color perception is a nearly automated function of
Monochromats are a most interesting case. They the brain. Color perception has evolved with human
may have only one photopigment for their cones or beings over several hundred million years. As Green12
as is often the case they have no cones, only rods. points out
Monochromats are truly color blind. Those with rods
only generally have poor vision. They can match any ‘. . .color perception is fast, accurate, automatic, and
color only in the sense of gray scale and so sat- effortless. On the other hand, thinking is a relatively
recent evolutionary advance, and we are not yet very
uration and brightness are difficult to distinguish.
good at it. Thinking means reading text, attaching
Green12 reports that monochromats are exceedingly
meaning to an icon, searching memory, etc. These
rare occurring in 1 case in 10,000,000. Finally, brain activities are relatively slow, error-prone, require
damage can create a very rare condition called achro- mental resources and effort and take learning.’
matopsia, individual who are also monochromats.
One interesting situation is the case of albinism, It is unlikely, even if an individual is a dichromat,
lack of the pigment melanin. This is a genetic disorder that he would confuse orange with blue, but even
called oculocutaneous albinism. In order to exhibit an individual with completely normal vision can
albinism, one must inherit a mutant allele from both easily misread a word in a paragraph. This is why
the mother and the father, thus males and females are proofreading is a difficult task. The brain interprets
affected equally for autosomal disorders. The disease what it expects to see and the thinking process
is characterized either by the failure to synthesize required for careful reading is relatively slow and
pigment proteins or the failure of integratory proteins error prone. There are certain physiological reactions
to implement them into tissue. The pigment may be that are in essence hard-wired, such as grouping,
missing from skin, hair, and eyes. People affected linking, and depth perception. There are also color

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 113


Overview www.wiley.com/wires/compstats

Use of hue for grouping and linking is natural for


certain data visualization tasks. We have already seen
VISUALIZATION VI SU AL I ZATION the effect for clustering. Hue is also good for showing
categorical (nominal scale) variable. People naturally
FIGURE 12 | The word, VISUALIZATION, when rendered all in green break the hues into categories, which they quickly
is much easier to read compared with the same word in multiple colors. and easily judge as being the same or different. This
The all green word is naturally grouped because of the common color, makes color an ideal way to indicate that objects have
whereas that effect is not found in the multi-colored word. similar or different meaning, function, or importance.
One can easily distinguish 12 or so colors: red, green,
design principles that are common and are interpreted blue, yellow, orange, magenta, pink, brown, cyan,
as harmonious or garish color combinations. These black, gray, white. On the other hand, hue is poor
principles are frequently used by artists and graphic for showing quantitative (continuous) variables, i.e.
designers. Finally there are elements in the use of more/less, bigger/smaller, because there is no natural
color, which are interpreted in the context of culture. ordering. Some advocate use of the ‘rainbow scale,’
red–orange–yellow–green–blue–violet, as a natural
ordered representation with blue as less and red as
Hard-Wired Perception more. People may have learned this order to an extent,
Several features of color perception are hardwired but it is not a very powerful innate perception. If it
into the human brain. As mentioned in the previous works at all, it is probably because it approximates
paragraph, one of these is grouping and linking. If a brightness scale: blue is dark, green is middle
groups are rendered in distinct colors, then color brightness, and yellow is high brightness.
associates groups together even if they are physically Figure 15 illustrates another effect of color
separated in space. Figure 12 illustrates the effect contrast. The left panel of the figure has a dark
of color grouping by associating letters that have
foreground and a yellow background. On the
the same color. This effect can be used in data
right-hand panel the background color is yellow
visualization by brushing clusters in a data display
and the foreground color is the dark blue–green.
with distinct colors to associate elements of the cluster.
These panels illustrate a perceptual the impact
A second related illustration is found in
Figure 13. In this figure, we illustrate the use of color of foreground–background contrast. Most printed
for spatial association. The point of Figure 13 is that materials use black or colored ink on white paper,
not only does the color provide a visual linking, but which makes the darker color appear to pop out
also that this linking is enhanced with very distinctive of the background. Indeed, astronomers historically
hues. In our CrystalVision software,13 we provide the have printed black and white sky photos as negatives
three primary additive colors and the three secondary in order to see fine detail. On the other hand, the
additive colors as the default brushing colors, i.e., light against a dark background, such as illustrated in
red, green, blue, cyan, magenta, and yellow. These six Figure 14, allows a much more detailed comparison
colors provide, in some sense, the maximal separation of hues. Both cyan and yellow tend to be considerably
of hues. Figure 14 is a screen shot of CrystalVision less prominent against a white background which is
illustrating these grouping and linking effects. why we typically prefer to use a black background. In

FIGURE 13 | The figure on the left is composed of all blue tones, whereas the same pattern on the right has bright (primary) contrasting colors. It
is considerably easier to distinguish the two groups on the right-hand side because of the color contrast.

114  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

FIGURE 14 | Screen shot of CrystalVision parallel coordinate display illustrating the grouping and linking effects. The color bars on the upper
left-hand side are the six default brushing colors. Notice that the axes are colored red while the axes labels are cyan. These are complementary colors
which are in some sense maximally different, and which add to white.

notion of tristimulus and the experimental results that


the normal human eye has three photopigments in its
cones, which roughly correspond to red, green, and
blue. These three hues are taken to be the primary
colors. Historically, the artistic view was that red,
yellow, and blue were the primaries. This has led
to the fact that some color wheels begin with these
as primaries and mixing these yield secondary and
tertiary hues which are usually characterized as RYB
color wheels. A color wheel which is based on RGB
TEXT TEXT as the primaries is usually known as HSV (hue,
saturation, and value) color wheel. A simplification
showing only fully saturated hues can be used in for
purposes of color design.
Figure 16 illustrates the RYB color wheel. The
FIGURE 15 | Foreground–background separation. RYB color wheel was originally described by Isaac
Newton in his 1704 treatise on Opticks.14 The 18th
century understanding of color vision was predicated
general, achromatic background are preferred in order
on the idea that red, yellow, and blue were the primary
to have maximal use of color in data visualization.
colors. The use of the RYB color wheel as a model for
complementary colors and as a basic tool for art and
Color Design Based on the Color Wheel printing became well established. Two documents,
As we have indicated in the Color Theory Section, Goethe15 and Chevreul,16 became the handbooks for
the modern view of color perception depends on the color theory. Even today the RYB color wheel is

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 115


Overview www.wiley.com/wires/compstats

(a) (b)
Red
Red- Red-
violet orange
Violet Orange

Blue- Yellow-
violet orange

Blue Yellow

Blue- Yellow-
green green
Green

FIGURE 16 | The RYB color wheel. These images are used under GNU Free Documentation License.

(a) (b) H
Red
Rose Orange

Magenta
Yellow

Chartreuse
Violet green

Blue Green

Azure Spring
Cyan green

FIGURE 17 | HSV color wheel based on RGB primaries. The left image shows primary, secondary and tertiary hues. The right image show a more
continuous version of the hues. These images are used under GNU Free Documentation License.

used to describe complementary colors in art and a complementary color scheme. Here complementary
photography.17 colors on the color wheel are used. An example using
In general, color design principles suggest a the RYB color wheel would be blue and orange
number of different strategies for using color. The or the Christmas colors of red and green. Another
simplest strategy would be to choose a monotone color scheme is the split complementary color scheme.
achromatic scheme. Such a scheme would not employ Instead of choosing the exact complementary color,
any color at all, but use black, white, and shades of choose colors that are adjacent to the complementary
gray. This kind of color scheme is sometimes used
color. So that opposite to orange would be blue, but a
by interior designers, but while it can be dramatic,
split complementary scheme might choose blue–green
it also risks being boring. A related scheme is a
monotone chromatic scheme. Here, a single hue is and blue–violet. Usually one would want the split
chosen, which is varied in lightness and saturation. complementary hues to be also different in brightness
Again, this type of scheme can be boring. Another and somewhat desaturated. A final strategy is a triad
scheme is an analogous hues scheme. In such a use of color scheme. Here one can choose three colors equally
color, two or three hues close together in color space spaced around the color wheel. As with the split
are used. For example, shades of green or blue greens complementary scheme, two of the hues should be
can be used effectively. A more daring use of color is desaturated.

116  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011


WIREs Computational Statistics Color theory and design

Examples of these schemes are found in US • black: death, rebellion, strength, evil
postage stamps. These stamps are often design with • white: purity, cleanliness, lightness, emptiness
the color principles in mind. The 2010 Katherine Hep-
burn stamp is an example of the monotone achromatic • yellow: warmth, cowardice, brightness
scheme. The 2010 Holiday Evergreens Forever stamp • green: nature, health, cheerfulness, environment,
is a good example of the monotone chromatic scheme. money, vegetation.
The 2010 Love stamp is a good example of an analo-
gous hues scheme. The 2008 Winter Holidays stamp
has four different designs which illustrate the com- These, of course, are based primarily on impres-
plementary color scheme. The 2010 Lunar New Year sions from a Western culture. We do not discuss this
stamp is a good example of the triad color scheme. dimension of color at any length except to note that
While we cannot reproduce these stamps here, their there can be an emotional response to color so that the
images are easily found on the web. use of color in data and scientific visualization should
Figure 17 illustrates the HSV color wheel with be approached with these possible responses in mind.
only the fully saturated colors indicated. The use of
this color wheel for color design has also been used,
although we do not pursue that idea for this article.
CONCLUSIONS
Color as a Cultural Expression We have all experienced color to some extent, even
Color, of course, also evokes emotion, which, to a those who have limited color vision. In this article, we
large extent, is culturally based. Green12 makes sug- have tried to systematically lay out principle of color
gestions of these responses: theory and design with the goal of making sense in the
development of scientific and data visualization soft-
• red: urgency, passion, heat, love, blood ware. By understanding color theory, the functioning
• purple: wealth, royalty, sophistication, intelli- of the human visual system, and basic color design
gence principles, we hope that the reader will appreciate
• blue: truth, dignity, power, coolness, melancholy, good usage of color when he or she sees it and will
heaviness employ these principles when designing displays.

ACKNOWLEDGEMENTS
This article is based on lectures given by one of us (E.J.W.) in graduate courses in Statistical Data Mining and
in Scientific and Statistical Visualization. Much of the discussion in the Section on Color Deficiencies in Human
Vision and the Subsection on Hard-Wired Perception is based on material in Green (2004). The inspiration of
Marc Green is hereby gratefully acknowledged.

REFERENCES
1. Goldsmith TH. Optimization, constraint, and history in 6. Wright WD. A re-determination of the trichromatic
the evolution of eyes. Q Rev Biol 1990, 65:281–322. coefficients of the spectral colours. Trans Opt Soc 1928,
30: 141–164. doi:10.1088/1475-4878/30/4/301
2. Munsell AH. A Color Notation. Boston, MA: G. H.
7. Guild J. The colorimetric properties of the spectrum.
Ellis Co; 1905.
Philos Trans R Soc Lond (Ser A) 1931, A230: 149–187.
3. Munsell AH. A pigment color system and notation. Am 8. Lee H-C. Introduction to Color Imaging Science. Cam-
J Psychol 1912, 23:236–244. doi:10.2307/1412843 bridge: Cambridge University Press; 2005.
4. CIE. Commission Internationale de l’Eclairage Proceed- 9. Crayola Website. http://www.crayola.com/colorcensus/
history/chronology.cfm. (Accessed November 30,
ings, 1931. Cambridge: Cambridge University Press;
2010).
1932.
10. Jameson KA, Highnote SM, Wasserman LM. Richer
5. Smith T, Guild J. The C.I.E. colorimetric standards color experience in observers with multiple photopig-
and their use. Trans Opt Soc 1931–1932, 33: 73–134. ment opsin genes. Psychonom Bull Rev 2001, 8:
doi:10.1088/1475-4878/33/3/301 244–261.

Vo lu me 3, March/April 2011  2011 Jo h n Wiley & So n s, In c. 117


Overview www.wiley.com/wires/compstats

11. Hayutin A. How Population Aging Differs Across 14. Newton I. Opticks. London: The Royal Society; 1704.
Countries: A Briefing on Global Demographics. Stan- 15. Goethe JWv. Zur Farbenlehre. Dortmund: Harenberg
ford, CA: Stanford Center on Longevity; 2007. Kommunikation; 1810 (Republished 1979).
12. Green M. 2004. http://www.visualexpert.com/. (Ac- 16. Chevreul M-E. De la Loi du Contraste Simultané des
cessed November 30, 2010). Couleurs et de l’assortiment des Objets Colorés, 1839.
13. Luo Q, Wegman E, Fu X. CrystalVision, a Visual Data 17. Mante H. Color Design in Photography. New York:
Mining package for Windows, 2000. Van Nostrand Reinhold; 1972.

FURTHER READING
Eddy WF. An introduction to color systems, Stat Comput Stat Graph Newslett 1990, 1:7–10.
Editors of Time-Life Books. Color. New York: Time Life Books; 1970.
Mante H. Photo Design: Picture Composition for Black and White Photography. New York: Van Nostrand Reinhold; 1971.

118  2011 Jo h n Wiley & So n s, In c. Vo lu me 3, March/April 2011

You might also like