Color Theory for Digital Displays: A Quick Reference: Part I
Published: January 23, 2006
This article is Part I of a quick reference on color theory for digital displays. It is the first in a series of articles about the use of color in application program user interfaces and on Web sites.
Computer monitors display information using the RGB (Red-Green-Blue) color model. An RGB monitor synthesizes colors additively by selectively illuminating each of its pixel’s red, green, and blue phosphor dots at varying levels of intensity. The light from a pixel’s three phosphor dots blends together to synthesize a single color. In additive color synthesis, all hues of the visible spectrum of light are mixtures of various proportions of one, two, or three of the primary colors of light:
Figure 1 shows how the primary colors combine to create the secondary colors.
Figure 1—Primary and secondary colors of additive synthesis
The complementary color for a primary color is the secondary color of which it does not comprise a part.
For more information about complementary colors, see Color Harmony.
Secondary colors—cyan, yellow, and magenta—consist of equal proportions of two primary colors, as follows:
The complementary color for a secondary color is the primary color that does not comprise part of the mixture that forms the secondary color.
For more information about complementary colors, see Color Harmony.
Intermediate colors—light chartreuse, orange, hot pink, bright violet, azure blue, and chrysoprase green—consist of equal proportions of adjacent primary and secondary colors, as follows:
Note—Throughout this article, I’ve used colors from the Web-safe palette in the examples. While it’s no longer necessary to restrict one’s use of color on the Web, doing so in these examples simplifies their scope. Because the Web palette comprises only 216 colors, the hexadecimal values of intermediate colors result from only approximately equal proportions of the primary colors.
In Figure 2, the color wheel shows the primary, secondary, and intermediate colors.
Figure 2—Color wheel
Color temperature is the relative warmth or coolness of a color. The long-wavelength, warm colors range from red (#FF0000), with a wavelength of 700 millimicrons, through light chartreuse, with a wavelength of 535 millimicrons. The short-wavelength, cool colors range from green (#00FF00), with a wavelength of 500 millimicrons, through violet (#9933FF), with a wavelength of 400 millimicrons. On the color wheel, magenta (#FF00FF) and the colors on the left are warm colors; green (#00FF00) and the colors on the right, cool colors. In any given visual composition, a color’s temperature is relative to that of its surrounding colors.
Contrasting colors that are adjacent to a color can also influence its temperature through a simultaneous-contrast effect, as shown in Figure 3.
Figure 3—Simultaneous-contrast effect
For more information about the simultaneous-contrast effect, see Color-Contrast Effects.
Contrasts in color temperature also create spatial illusions. Warm colors like red (#FF0000) appear to advance, while cool colors like blue (#0000FF) appear to recede. Areas in warm colors also appear larger than areas in cool colors.
Tertiary colors are mixtures of complementary colors—which appear directly opposite one another on a color wheel. Because they contain some proportion of all three primary colors, they are relatively neutral. Also, they tend to harmonize with most other colors, because of their interrelationship with them. The following are some examples of tertiary colors:
|3 orange||+||1 azure
|3 hot pink||+||2 chrysoprase
Note—Throughout this article, I’ve used colors from the Web-safe palette in the examples. While it’s no longer necessary to restrict one’s use of color on the Web, doing so in these examples simplifies their scope. Because the Web palette comprises only 216 colors, the proportional values shown for tertiary and synthesized colors are approximate.
Achromatic or neutral colors include white, shades of gray, and black. White (#FFFFFF) consists of equal proportions of all three primary colors at their full intensities. Black (#000000) is the absence of color. The Web-safe grays—silver (#CCCCCC), medium gray (#999999), dark gray (#666666), and charcoal gray (#333333)—also consist of equal proportions of all three primary colors, but at increasingly lower intensities.
Synthesized colors usually consist of unequal proportions of two or three of the primary colors—for example:
|2 red||+||5 green||=||bright
|5 red||+||2 green||=||tangerine||#FF6600|
|2 red||+||5 blue||=||bright
|2 red||+||3 green||+||3 blue||=||aqua||#66FFFF|
|4 red||+||1 green||+||1 blue||=||coral||#FF6666|
Throughout this series of articles, I've used hexadecimal values to specify the RGB (Red-Green-Blue) values of colors, as is typical when specifying colors on Web pages. For example, in the hexadecimal value for orchid, #CC66FF, CC represents the amount of red, which is 80%; 66, the amount of green, 40%; and FF, the amount of blue, 100%.
Table 1 shows the six equivalent decimal and hexadecimal values that specify red, green, and blue values for all Web-safe colors, with their corresponding percentages. Colors other than Web-safe colors can comprise any values of red, green, and blue.
Table 1—RGB values in Web-safe colors and their percentages
RGB values indicate the intensity of each of the primary colors of light—ranging from 0%, the darkest value, which indicates the absence of a color, to 100%, the lightest value, which indicates that a color is at its full intensity. Variations in the intensity of the primary colors of light result in different hues with different levels of value and chroma.
For information about the color properties—hue, value, and chroma—see Color Properties.
Chromatic colors—that is, all colors except white, shades of gray, and black—have three dimensions, or properties:
- hue—A perceptible color that corresponds to a unique, dominant wavelength of light.
- value—The relative lightness or darkness of a color.
- chroma, or saturation—The relative purity and intensity of a chromatic color.
A perceptible color, or hue, corresponds to a unique, dominant wavelength of light in the spectrum—for example, the colors that appear on the color wheel shown in Figure 4.
Figure 4—Hues on the color wheel
All spectral hues result from mixing different combinations and proportions of the three primary colors—red, green, and blue. For example, Figure 5 shows various hues of violet (#9933FF).
Figure 5—Hues of violet (#9933FF)
Value describes the relative lightness or darkness of a color. This property applies to both chromatic colors and achromatic colors—which have no hue or chroma. Figure 6 shows a gray scale comprising achromatic colors.
Figure 6—Achromatic colors—a Web-safe gray scale
By combining spectral hues with white or black, different values are achieved. A tint combines a hue with white; a tone, with a mixture of white and black—that is, a shade of gray; and a shade, with black. Dark hues, or shades, have low values; light hues, or tints, high values. For example, the following hues are values of red (#FF0000):
|Empire ruby red||(#CC3333)||Tone|
|deep burnt sienna||(#660000)||Shade|
The intrinsic values of different high-chroma colors vary, as shown in Figures 7 and 8. At the extremes of the value scale, the brightest yellow (#FFFF00) is much lighter than the brightest blue (#0000FF).
Figure 7—Colors have different intrinsic values
Figure 8—Intrinsic values of colors
The human eye cannot easily distinguish differences in value below 15%, especially at the light and dark extremes of a scale. Optimally, minimal differences in value should range between 15 to 25%.
Chroma, or saturation, describes the relative purity and intensity of a chromatic color. Chroma levels range from the brilliance of vivid, highly saturated colors to completely neutral grays.
Highly saturated, high-chroma colors comprise a narrow band of wavelengths and, thus, contain very little or no gray and no white. Medium-chroma colors comprise more different wavelengths and, thus, contain more gray. Desaturated, low-chroma colors comprise many different wavelengths and contain a lot of gray, white, or black. Achromatic colors—gray, white, and black—have chroma levels as low as zero. Figure 9 shows a range of chroma levels, while Figure 10 shows various hues that have similar chroma levels.
Figure 9—A range of chroma levels, including pure cyan (#00FFFF), Caribbean blue (#33CCCC), Mediterranean blue (#339999), deep blue-green (#336666), and charcoal gray (#333333)
Figure 10—Hues with medium chroma, including yellow green (#99CC33), cobalt violet (#CC3399), violet (#9933FF), Seurat blue (#3399CC), and cadmium orange (#FF9933)
A harmonious color scheme depends upon the balance between all three properties of color—hue, value, and chroma. You can achieve color harmony by using complementary, analogous, or monochromatic colors. It is also important to balance the value and chroma of the hues in a color scheme. You can use the five methods of color harmony involving complementary colors either alone or in combination with the analogous, monochromatic, tonal, or chromatic methods.
The nine principal methods of achieving color harmony include
- five types of color harmony achieved using complementary colors, as follows:
- complementary color harmony—using two colors that are directly opposite another color on a color wheel
- split-complementary color harmony—using a color and the two colors that are immediately adjacent to its complementary color
- triadic color harmony—using three colors that are equidistant from one another on a color wheel
- tetradic color harmony—using four colors that are equidistant from one another on a color wheel
- tetradic split-complementary color harmony—using two pairs of split-complements, which appear immediately adjacent to complementary colors on a color wheel
- analogous color harmony—using a range of colors that appear adjacent to one another on a color wheel
- monochromatic color harmony—using hues of the same color that have different levels of value and/or chroma
- tonal color harmony—using colors with similar values
- chromatic color harmony—using colors with similar levels of chroma, or saturation
Complementary colors appear directly opposite one another on a color wheel—for example, green (#00FF00) and magenta (#FF00FF), as shown in Figure 11. Each pair of complementary colors comprises a warm color and a cool color. While complementary colors contain relatively balanced proportions of their primary colors, their values and chroma levels may vary.
Figure 11—Complementary color harmony
Combining equal proportions of two complementary colors produces white (#FFFFFF).
A color’s two split-complementary colors appear immediately adjacent to its complementary color on a color wheel. Figure 12 shows an example of split-complementary color harmony.
Figure 12—Split-complementary color harmony
Triadic complementary colors comprise three colors that are equidistant from one another on a color wheel. Figure 13 shows an example of triadic color harmony.
Figure 13—Triadic color harmony
Combining equal proportions of three triadic complementary colors produces white (#FFFFFF).
Tetradic complementary colors comprise four colors that are equidistant from one another on a color wheel. Figure 14 shows an example of tetradic color harmony.
Figure 14—Tetradic color harmony
Tetradic split-complementary colors comprise two pairs of split-complements that appear immediately adjacent to complementary colors on a color wheel. Figure 15 provides an example, showing two pairs of split-complements.
Figure 15—Tetradic split-complementary color harmony
Analogous color harmony combines closely related hues that are often rather muted and contain either only two primary colors or, if they contain all three primary colors, two in relatively weak proportions. Analogous colors are a range of colors that appear immediately adjacent to one another on a color wheel—as in the example shown in Figure 16.
Figure 16—Analogous color harmony
Monochromatic color harmony combines hues of a single color that have varying levels of value and chroma. Optionally, a monochromatic color scheme can also include white, black, or shades of gray. The following example shows a monochromatic color scheme that includes neutral colors:
Tonal color harmony combines hues that have similar values. For example, a low-contrast tonal color scheme might include only tints, as the following example shows:
|pale jade green||(#CCFFCC)||Tint|
A high-contrast tonal color scheme might include only tones, as shown in the following example:
|light azurite blue||(#0066FF)||Tone|
Another high-contrast tonal color scheme might include only shades, as shown in the following example:
Chromatic color harmony combines hues that have similar chroma levels. For example, a high-contrast color scheme might include only medium-chroma hues, as in the following example:
|cobalt violet||(#CC3399)||Medium chroma hue|
|violet||(#9933FF)||Medium chroma hue|
|Seurat blue||(#CCCCFF)||Medium chroma hue|
Medium chroma hue
A harmonious color scheme also depends upon choosing colors that contrast sufficiently with one another along the three dimensions of color—hue, value, and chroma.
You can create color contrast through varying
- hue while value and chroma remain relatively constant—See an example in Figure 17.
- value while hue and chroma remain relatively constant—For examples, see Figures 18 and 19.
- chroma while hue and value remain relatively constant—See Figure 20.
- hue, value, and/or chroma—You can vary any two or all three of these color properties, as Figure 21 shows.
Figure 17—Color contrast through changing only hue—for example, the hues fuchsia (#CC33CC), olive green (#CCCC33), and Caribbean blue (#33CCCC)
Figure 18—Color contrast through changing only value—for example, the shades bright fuchsia (#CC00CC), lilac (#CC66CC), and rose (#CC99CC)
Figure 19—Another example of achieving color contrast through changing only value—using cyan (#00FFFF), bright turquoise (#00CCCC), and peacock blue (#009999)
Figure 20—Color contrast through changing only chroma—for example, using bright violet (#9900FF), aubergine purple (#663399), and charcoal gray (#333333)
Figure 21—Color contrast through changing hue, value, and chroma
For information about the simultaneous contrast effect and other color-contrast effects, see Color-Contrast Effects.
For information about contrast effects, color dominance, and color balance, see “Color Theory for Digital Displays: A Quick Reference: Part II.”
- Color Theory for Digital Displays: A Quick Reference: Part II
- Applying Color Theory to Digital Displays
- Ensuring Accessibility for People With Color-Deficient Vision
Albers, Josef. Interaction of Color. Revised ed. New Haven, CT: Yale University Press, 1975.
Brewer, Cynthia A. “Color Use Guidelines for Data Representation.” Department of Geography, Pennsylvania State University. Retrieved July 3, 2003.
Encyclopædia Britannica CD 99—Multimedia Edition. Chicago: Encyclopædia Britannica, July 7, 1998.
Galitz, Wilbert O. User-Interface Screen Design. Boston: QED Publishing Group, 1993.
Garo, Laurie A. B. “Color Theory.” Virtual Geography Department. Updated June 21, 1999; retrieved July 3, 2003.
GretagMacbeth. “Munsell: The Universal Language of Color.” Retrieved July 10, 2003.
Grumbacher. Color Compass. New York: M. Grumbacher, 1972.
Itten, Johannes. The Art of Color: The Subjective Experience and Objective Rationale of Color. Revised ed. New York: John Wiley & Sons, Inc., 1974.
Kentie, Peter. Web Graphics Tools and Techniques. Berkeley, CA: Peachpit Press, 1997.
Niederst, Jennifer. Web Design in a Nutshell. Second ed. Sebastopol, CA: O’Reilly, 2001.
Webster, Timothy. Web Designer’s Guide to Graphics: PNG, GIF, & JPEG. Indianapolis: Hayden Books, 1997.