• Review
• About this Document
• Audience
• Objectives

Color: How it is Used in Design

Module D05c

Tools for Discussing and Choosing Color

We need words for talking about everything. We also need to choose colors effectively using software. Here are the words we need to talking about colors, and information about choosing colors in Photoshop.

Color: This is a very general, "lay person's" term for a combination of visual values related to the spectral mix and amplitude of light waves as we perceive them by eye. When we design graphics, we need to understand three aspects of color: Hue, Saturation, and Value.

Hue: The position of a color in the visible spectrum:

We use familiar terms like "red", "green", and "purple" to denote hue. But hue is only one aspect of color: saturation and value are important too.

Saturation: the amount of hue in a color. Colors with lots of saturation are often described as "intense" or "strong". Low-saturation colors are called "muted" or "soft".

Colors progressing from highly saturated (left) to unsaturated (right):

Value: the lightness or darkness of a color. We use the terms "light" and "dark" to describe value. A hue that is mixed with black produces a dark color value. Light colors result when a hue is mixed with white.

Value, neutral to dark:

Value, neutral to light:

Choosing Color in Photoshop:

The "Color Picker" in Photoshop requires two steps in choosing a color:

1. Pick the hue on the vertical spectrum bar;
2. Decide if you want to see only Web-safe colors;
3. Pick the saturation and value in the square;Click OK when done.
4. If you like, consult the information on the right-hand side of the picker to get numerical values.

Value and saturation are represented in the square color picker area in this way:

Harmony in Color

Just as in music, some notes go together in a pleasing way, so also there are hues that go together harmoniously. We need to understand how hues are organized so we can tell how to combine them effectively.

Color Wheels

A color wheel is a representation of the visible spectrum curved around on itself into a circle. Color wheels are particularly useful because they allow us to visualize relationship between hues, and picture different kinds of color groupings.

There are two ways of arranging color wheels. Here are examples with explanations:

Notice how the physical color wheel gives more space to greens and blues, while the perceptual wheel emphasizes oranges and yellow. We will use the perceptual color wheel in discussing design, because it is closer to the way people view colors.

For design purposes, the perceptual color wheel is divided into 12 colors. The most harmonious colors can be found in selections of 3 colors equidistant around the wheel.

Primary, Secondary, and Tertiary Colors

Primary	Secondary	Tertiary
In the perceptual color wheel, the primary colors are Red, Yellow, and Blue.	The secondary colors of the perceptual system are Orange, Green, and Purple.	Colors that are neither primary nor secondary are known as tertiary colors. (Their names are not as widely agreed upon as the names of the primary and secondary colors.)

Complementary Colors

By spinning a "pointer" around the perceptual color wheel, we can find colors that are perceived as opposites. (This is because of the mechanisms by which the human eye detects colors.) Designers often use complementary colors to produce accents or highlights. A variation on complementary colors is split complementary, also known as contrasting or color triads, in which one color is used with the two colors adjacent to its direct complement.

Caution: separate bright complementary colors from one another. When large areas of intense complementary colors touch, a sensation of tension and discord is produced. This can be avoided by separating them with a thin line of neutral color, such as white, black or gray.

Analogous Colors

Analogous colors are colors which are neighbors on the color wheel. From the twelve colors on the perceptual wheel, any three or four that are adjacent are said to be analogous.

Here are three examples of analogous color selections:

Planning Color Themes

Color Themes are the main combinations of colors that we use in a graphic, picture, brochure, or Web page. In order to be effective, we need to plan for both readability and harmony.

Readability and Contrast

Readability is largely a function of contrast. In other words, the letters must be different enough from their backgrounds to make them easy to see.

Contrast can be achieved in each of the three aspect of color difference: hue, value, and saturation. But to get good contrast, at least two areas should be varied.

Here are nine simple illustrations in which the foreground (text) and background are varied systematically to illustrate the effectiveness of varying more than one aspect of color.

	Full Hue Text	Lower Saturation Text	Brighter Value Text
Full Hue Background
Lower Saturation Background
Brighter Value Background

Color as Messenger

Colors express many emotional, often subliminal messages - that is, we are often unaware of the message that color conveys. In many respects, its subconscious nature makes color a more powerful messenger than words. Let's look at some of the ways color can be used to convey messages.

Primary, Secondary, and Tertiary

The three color groupings shown above can be used directly as color themes.

• Primary colors are seen as bold and direct, especially in high levels of saturation. They are often used for children and young people.
• Secondary colors can also be viewed as bold in high levels of saturation, but they have a somewhat less direct appeal.
• Tertiary colors are seen as more complex and provide greater subtlety, especially when used in lower levels of saturation.

Color Temperature

Colors give varying feelings of warmth and coolness.

	Warm colors are those on the upper and right-hand half of the perceptual color wheel. As a group, they convey energy and action, and are perceived as being closer to the viewer.
	Cool colors are on the lower and left half. For the most part they are seen as peaceful and thoughtful, and add to a feeling a depth when used in the background with warm colors in the foreground.

Photoshop's color picker represents color hues in "degrees" of warmth or coolness. These aren't actual temparature measurements of course, but the higher the number, the warmer the color.

There is interaction between the temperature of a color's hue, saturation, and value.

The greater the saturation, the more extreme (hot or cold) the temperature of the color.
Brighter values tend to feel somewhat warmer.

Color Meanings

Research has shown that most people are affected in similar ways by colors. For example, red causes a rise in blood pressure; blue lowers it. In addition to physical effects, colors have psychological effects and can carry meanings. Many variations of saturation and value have strong associations as well.

Though some characteristics of color are physiological, others are culture-specific. If you are designing graphics for cultures other than your own, you should check to make sure the colors you use have the associations you want! The descriptions below are based primarily on North American and European reactions to colors.

Example Color Groupings

Color Theme	Hues Represented	Sample
Monochromatic
Primary
Secondary
Tertiary
Analogous
Complementary
Split Complementary
Warm
Cool

Audience

Objectives 

When you successfully complete this lesson, you will be able to... 

1. Define hue, saturation, and value;
2. Choose colors by hue, saturation, and value in Photoshop;
3. Name the primary and secondary colors;
4. Explain the concept of tertiary colors;
5. Define and distinguish monochrome and analogous color schemes;
6. Define complementary and split complementary color schemes;
7. Explain the contribution of color to readability and the role of contrasting color values;
8. Discuss technical limitations of color combinations;
9. Discuss how relationships between colors can be used to enhance design;
10. Discuss how color can be used to draw viewer attention to priority items;
11. Distinguish between physical and perceptual color wheels.

About this Document 

Module D05c: Color: How it is Used in Design

This document is part of a modular instruction series in Computer Information Systems. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes: 

Author:

Laurence J. Krieg

Institution:

Internet Professional Department, Washtenaw Community College

History:

Original: June, 2002

This version posted Tuesday, 17-Feb-2004 12:39:38 EST

Copyright:

Copyright © 2002, Laurence J. Krieg, Washtenaw Community College.

Instructors: You may point to this file in your Web-based materials.  
Students: you may make a copy for your personal use.  
All other uses: contact the author, Laurence J. Krieg for permission.

---