Color Theory for Digital Displays: A Quick Reference: Part I

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.

Primary Colors of Additive Color Synthesis

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.

red

(#FF0000)

green

(#00FF00)

blue

(#0000FF)

Champion Advertisement

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 and Intermediate Colors

Secondary colors—cyan, yellow, and magenta—consist of equal proportions of two primary colors, as follows:

green	+	blue	=	cyan	(#00FFFF)
red	+	green	=	yellow	(#FFFF00)
red	+	blue	=	magenta	(#FF00FF)

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:

green	+	yellow	=	light chartreuse		(#99FF00)
red	+	yellow	=	orange		(#FF9900)
red	+	magenta	=	hot pink		(#FF0099)
blue	+	magenta	=		bright violet	(#9900FF)
blue	+	cyan	=	azure blue		(#0099FF)
green	+	cyan	=	chrysoprase green		(#00FF99)

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.

Color Wheel

In Figure 2, the color wheel shows the primary, secondary, and intermediate colors.

Color Temperature

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.

Example of simultaneous-contrast effect — 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, Achromatic, and Other Synthesized 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:

1 light chartreuse	+	2 bright violet	=	lavender	#9966FF
3 orange	+	1 azure blue	=	peach	#FF9966
3 hot pink	+	2 chrysoprase green	=	light orchid	#FF99FF

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.

red	+	green	+	blue	=	white	#FFFFFF
red	–	green	–	blue	=	black	#000000

Synthesized colors usually consist of unequal proportions of two or three of the primary colors—for example:

2 red	+		5 green		=	bright chartreuse	#66FF00
5 red	+		2 green		=	tangerine	#FF6600
2 red	+		5 blue		=	bright blue-violet	#6600FF
2 red	+	3 green	+	3 blue	=	aqua	#66FFFF
4 red	+	1 green	+	1 blue	=	coral	#FF6666

Hexadecimal Color Values

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
Decimal	Hexadecimal	Percentage
0	00	0%
51	33	20%
102	66	40%
153	99	60%
204	CC	80%
255	FF	100%

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.

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.

Hue

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.

Hues on a color wheel — 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).

Web-safe hues of violet — Figure 5—Hues of violet (#9933FF)

Value

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):

carnation pink	(#FF99CC)	Tint
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).

Intrinsic values of colors on the color wheel — Figure 7—Colors have different intrinsic values

Relative values of colors on the color wheel — 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

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.

Range of chroma levels — Figure 9—A range of chroma levels

Color Harmony

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 Color Harmony

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.

Split-Complementary Color Harmony

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.

Triadic 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.

Combining equal proportions of three triadic complementary colors produces white (#FFFFFF).

Tetradic Color Harmony

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.

Tetradic Split-Complementary 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.

Analogous 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.

Analogous colors — Figure 16—Analogous color harmony

Monochromatic 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:

bright violet	(#9900FF)	Hue
orchid	(#CC66FF)	Tint
lavender	(#9966FF)	Tone
deep violet	(#6600CC)	Shade
white	(#FFFFFF)	Neutral
charcoal gray	(#333333)	Neutral

Tonal Color Harmony

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
pale lilac	(#FFCCFF)	Tint
pale coral	(#FFCCCC)	Tint
north-light blue	(#CCCCFF)	Tint
ice blue	(#CCFFFF)	Tint

A high-contrast tonal color scheme might include only tones, as shown in the following example:

phthalo green	(#00FF66)	Tone
light azurite blue	(#0066FF)	Tone
blue-violet	(#6633FF)	Tone
coral pink	(#FF6699)	Tone

Another high-contrast tonal color scheme might include only shades, as shown in the following example:

aubergine purple	(#663399)	Shade
teal	(#006666)	Shade
ruby red	(#993366)	Shade
Monet blue	(#333399)	Shade

Chromatic Color Harmony

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
yellow-green	(#99CC33)	Medium chroma hue

Color Contrast

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.

Example of hue contrast — Figure 17—Color contrast through changing *only* hue

Example of value contrast — Figure 18—Color contrast through changing *only* value

Example of chroma contrast — Figure 20—Color contrast through changing *only* chroma

Examples of color contrast — 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.”

Bibliography

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.

In Graphic Design | Information Design | Principles | Visual Interface Design

16 Comments

Erin Frances Dineen

April 19, 2006 1:34 PM

im studying interior design in perth (AUST). One of my classes is applied colour, this site is great thanks from erin dineen

G. Tom Tsao

July 12, 2006 8:22 PM

Oh, wow! This is the most informative site on non-pigment color ever!

I appreciate the education on RGB as primaries as opposed to the RYB standard.

Excellent discussion on complementary and harmonizing colors—invaluable tool for learning what “looks good” together!

Thanks very much,

Tom

Ben

September 29, 2006 9:43 AM

This is one of the most extensive colour theory references for Web I’ve seen in a long time. Kudos for your efforts!

Russell Wilson

February 3, 2007 4:59 PM

Pabini—This set of articles is awesome! Great reference for color. Thanks for posting this!—Russ

akinola kayz

February 22, 2007 6:13 PM

The colours are okay, but I need analogous colours for both primary and secondary colours and their names.

Pabini

February 27, 2007 12:45 PM

Thanks, everyone for your kind remarks.

Akinola—Figure 16 shows an example of analogous colors—the analogous colors for orange. Each color has a similar range of analogous colors. To create an analogous color scheme, you can use any color within its range of analogous colors. Here are more examples of analogous colors:

primary colors—Analogous colors for each primary color include its adjacent intermediate colors.

red—Analogous colors include orange and hot pink.

blue—Analogous colors include bright violet and azure blue.

green—Analogous colors include chrysoprase green and light chartreuse.

secondary colors—Analogous colors for each secondary color include its adjacent intermediate colors.

cyan—Analogous colors include azure blue and chrysoprase green.

yellow—Analogous colors include light chartreuse and orange.

magenta—Analogous colors include hot pink and bright violet.

intermediate colors—Analogous colors for each intermediate color include its adjacent primary and secondary colors.

light chartreuse—Analogous colors include green and yellow.

orange—Analogous colors include yellow and red.

hot pink—Analogous colors include red and magenta.

bright violet—Analogous colors include magenta and blue.

azure blue—Analogous colors include blue and cyan.

chrysoprase green—Analogous colors include cyan and green.

Please bear in mind that, beyond the primary and secondary colors, these color names are merely descriptive.

Ben Wallis

May 10, 2007 3:24 PM

Genius! :)

I’ve always tried to create harmonic colour schemes, but I do it via trial and error, and it takes far too long.

Is there some kind of mathematical algorithm or equation that can be used to generate a harmonic palette from a single colour?

Pabini

May 13, 2007 7:58 AM

Ben—I’m not the right person to be asking about a mathematical algorithm or equation :-), but perhaps one of our readers can help you with that.

There are some tools on the Web that generate color schemes though—for example:

SitePro Central’s Color Scheme Tool

Wellstyled’s Color Scheme Generator 2 and Color Scheme

ColorJack’s Color Generator

Adobe Lab’s Kuler

The Man in Blue’s Technicolor

Degraeve’s Color Palette Generator

Interactive Learning Unit’s Color Calculator

ColorBlender

Limitless Innovations’ collection of Colour Exploration Tools

Infohound’s Color Schemer

Kolur

Slayeroffice’s Color Palette Tool

There are also good books that illustrate color schemes such as:

Pantone Guide to Communicating with Color

Color Harmony: A Guide to Creative Color Combinations

Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media

Gandhali

August 8, 2007 8:49 AM

I’m making a Web site as part of my school project, and, well, this Web site has really cool information that helps during research!! Analogous colours always look good, I think! I’m going to be using purples—red purple and blue purples on my Web site. Verdana always rocks!! :)

I was just wondering whether mustard comes under neutral colours? Or not?

Thanks! :)

Pabini Gabriel-Petit

August 13, 2007 5:39 AM

Gandhali—I’m glad you’ve found this information helpful. I agree with you about analogous colors.

Mustard is not a neutral color. While it’s akin to brown, its chroma is too high for a true neutral. It’s still very definitely a yellow. You can create neutrals by combining black and white to create grays; combining either two complementary colors or all three primary colors to create browns; or combining black or white with brown to create very dark browns, ivory, or beige.

abiodun fagbohun

September 2, 2007 6:13 PM

I want more of these color combinations.

bob chaphalkar

March 31, 2008 2:13 PM

Question: What type of harmony do you call it if I have an image with yellow and black in it—like a road sign? Thank you.

Pabini Gabriel-Petit

April 3, 2008 10:30 AM

That’s a monochromatic color scheme, but the emphasis is on value contrast rather than harmony.

Mark

April 14, 2008 2:26 PM

Note that what you’re calling violet is not spectral violet, but a not-strictly-accurate synonym for purple. RGB monitors cannot display any wavelengths shorter than the blue primary. Some people perceive purple and violet as the same color, but others, myself included, do not. Monitors cannot reproduce true shorter-than-blue violet.

kumaravel

November 30, 2012 6:45 AM

Good information….thanks!

Tonya

June 30, 2013 7:06 AM

This info will be useful for a Web analysis I have to do for school. However, where does brown fall into all this?

Join the Discussion

Full name

Email address

Remember me (Optional)

Comment

Pabini Gabriel-Petit

Principal Consultant at Strategic UX

Founder, Publisher, and Editor in Chief of UXmatters

Silicon Valley, California, USA

With more than 20 years working in User Experience at companies such as Google, Cisco, WebEx, Apple, and many startups, Pabini now provides UX strategy and design consulting services through her Silicon Valley company, Strategic UX. Her past UX leadership roles include Head of UX for Sales & Marketing IT at Intel, Senior Director of UX and Design at Apttus, Principal UX Architect at BMC Software, VP of User Experience at scanR, and Manager of User Experience at WebEx. Pabini has led UX strategy, design, and user research for Web, mobile, and desktop applications for consumers, small businesses, and enterprises, in diverse product domains. Working collaboratively with business executives, multidisciplinary product teams, and UX teams, she has envisioned and realized holistic UX design solutions for innovative, award-winning products that delighted users, achieved success in the marketplace, and delivered business value. As a UX leader, she has facilitated conceptual modeling and ideation sessions; written user stories; prioritized product and usability requirements; established corporate design frameworks, standards, and guidelines; and integrated lean UX activities into agile development processes. Pabini is a strategic thinker, and the diversity of her experience enables her to synthesize innovative solutions for challenging strategy and design problems. She is passionate about creating great user experiences that meet users’ needs and get business results. A thought leader in the UX community, Pabini was a Founding Director of the Interaction Design Association (IxDA). Read More

Color Theory for Digital Displays: A Quick Reference: Part I

Primary Colors of Additive Color Synthesis

Secondary and Intermediate Colors

Color Wheel

Color Temperature

Tertiary, Achromatic, and Other Synthesized Colors

Hexadecimal Color Values

Color Properties

Hue

Value

Chroma

Color Harmony

Complementary Color Harmony

Split-Complementary Color Harmony

Triadic Color Harmony

Tetradic Color Harmony

Tetradic Split-Complementary Color Harmony

Analogous Color Harmony

Monochromatic Color Harmony

Tonal Color Harmony

Chromatic Color Harmony

Color Contrast

Read more:

Bibliography

16 Comments

Join the Discussion

Pabini Gabriel-Petit

Other Columns by Pabini Gabriel-Petit

Other Articles by Pabini Gabriel-Petit

Other Articles on Principles

New on UXmatters