Lesson 2: Perceptual Aspects of Color

• Overview

• I. Color and Visual Perception

A good starting point for understanding perceptual aspects of color is to look at color dimensions which are really psychological dimensions to color perception. The Color Dimensions  include Hue, Value and Chroma.

• II. The Color Dimensions

Hue is the term given to the various colors we perceive e.g., red, blue, green, red-purple, etc.  as shown in the diagram (click on small image). Each spectral hue (rainbow color) has its own unique wavelength (see Electromagnetic Spectrum, Lesson 1, or in Robinson, et. al, 1995. pg. 343, fig. 19.2).
We can create millions of hues by combining various percentages of the primary hues, and altering their Value and Chroma.

B. Value

Value is the lightness or darkness of a hue, or of an achromatic (gray only) or chromatic color (see also Chroma). Value is higher (lighter) when there is more lightness. Value is lower (darker) when the hue appears darker. Value can be understood by looking at a gray scale which shows the proportion of black ink ranging from zero percent black to 100 percent black in steps of 10 percent. Note that the human eye can not easily distinguish more than 5-7 gray tones, and the differentiation is more difficult at the very light and very dark ends of a scale, and value differences of only 10% are not sufficient for easy value, or gray tone differentiation. Value steps should be at 15 to 25% difference in order for the human eye to easily differentiate between successive value steps. Value is also affected by background as shown in this diagram , where the value looks lighter when surrounded by darker shades of gray and darker when surrounded by lighter tints of gray (see below for shade and tint). Value is controlled with pigments by adding white to increase value, or lighten the hue, or by adding black to decrease value and darken the hue.

The following apply to hues of differing value:
Tint: add White to a hue, e.g., Pink is a Tint of Red
Shade: add Black to a hue, e.g., Dark Red is a Shade of Red
Tone: add equal amounts of a Hue, White and Black

C. Chroma

Chroma, also known as the intensity, saturation, richness, or purity of a color, refers to the comparison of a color to a neutral gray whereby the neutral gray is achromatic and a full color is fully saturated or pure and brilliant. For any given hue, Chroma ranges from 0 percent (neutral gray) to 100% (maximum saturation or Chroma). At the maximum level, the color appears pure and contains no gray. Chroma levels vary with different hues, for example, the most intense yellow appears brighter than the most intense blue-green.
In Lesson 3 the color dimensions will be used for creating color in color specification systems, and Lesson 4 applies the color dimensions to the use of color as a map symbol. At this point it is important to note that millions of colors can be created by varying the combination of hue, value and chroma.

While the human eye can differentiate millions of different hues when placed in succession, it is often difficult to do so when the hues are very similar, or when a hue that is surrounded by other hues on a map must be matched with the same hue in the map legend. For this reason, it is important to study the perceptual aspects of color before attempting to select, create, and apply color to maps.

• III. Perceptual Aspects of Color

There are several principles that can be discussed in relation to the perceptual aspects of color, including Visual Acuity, color in relation to the size of a map area (polygon), and color in relation to the light source in which the map is being read.

1. Visual Acuity - This is the ability of the human eye to differentiate fine detail. It includes differentiation of gray tones , hues, and value/chroma levels of a hue, as well as differentiation of linework, type, and symbol and area sizes.

2. Color and Size of Area - Lighter colors require larger map areas (polygons) in order to be visible and identifiable relative to darker colors. In larger areas, darker colors appear much more dominant than do lighter colors within the same size of area. Thus, a light yellow needs a relatively larger map area in order to be seen and recognized relative to a dark red; likewise the dark red will appear very dominant if placed in a large map area, while the light yellow placed in the same large area will not appear to be so dominant. This is illustrated in the maps linked here(above).

3. Color and Light Source - The type of light source affects the appearance of colors. Many maps are read under low level filtered or colored lighting, e.g., reading navigation maps on aircraft or at sea. Field maps are read under direct sunlight, while maps in offices or other indoor areas are viewed under tungsten or flourescent lighting. Map colors will look different depending on the light source. Red lines and areas, for example, will look red under white light, brownish under blue light, brownish under green light (also orange looks brownish and yellow and light blue look greenish) and red under red light (while orange and yellow look reddish and light blue looks greenish). And the same red may look more bright under artificial light and more washed out under direct bright sunlight. It is important, therefore, that illumination conditions and sight limitations be considered when selecting colors for mapping.

B. Color Interaction

Colors seldom appear on a map in isolation. They are most often surrounded or juxtaposed by other colors. The interaction with adjacent or surrounding colors can change the apparent look of a given color. This section discusses some of these interactions and the results on color perception and possible map interpretation.

1. Color Contrast

 Color contrast is concerned with the ways in which 2 or more colors interact and influence the appearance of one another. There are several types of color contrast of importance in Cartography. These include Simultaneous Contrast, Successive Contrast, Color  Constancy, and Color Contrast Combinations for Figure Ground. Each is discussed briefly below and includes at least one graphic example.

a. Simultaneous Contrast
Hues are typically placed on color wheels that relate hue (color) to wavelength where each color has a complimentary color on the opposite side of the color wheel (180 degrees), e.g., Magenta is the compliment to green; Yellow is the compliment to blue, etc. as shown on this color wheel of Additive color "Dyads" or complimentary colors. Additive Color "Triads" are colors located 120 degrees from one another on the color wheel. Additive Triads, when mixed together in equal proportions, form the color white.
Simultaneous contrast happens when a color that is surrounded by another color begins to appear tinged by the complimentary color of the surrounding color.

Given the above grey square inside a larger green square, for example, after gazing at the grey within it's surrounding color for about 20 seconds, look over to the empty square and see what color you perceive. You should see a light magenta which is the complement to green.

In cartography, simultaneous contrast causes adjacent colors to be lighter in the direction of the darker adjacent colors, and darker in the direction of the lighter colors. In other words - a color will look lighter when surrounded by a darker color and darker when surrounded by a lighter color. The example here shows how a light green oval is lighter or darker, depending on the shade of pink that surrounds it. Compare also the appearance of a thin medium gray strip when placed within a black vs a white box, a dull blue-green vs a bright purple box, and a dull vs a bright green box. In each case, the gray strip looks stronger and brighter against the brighter background, i.e., white, bright purple and bright green.

Simultaneous contrast can cause problems in map design when several different values/chromas of the same hue are juxtaposed on the map or in the legend. The effect can be reduced by separating color areas by white space or with black outlines.

b. Successive Contrast
Successive contrast happens when a given color is viewed in one environment (one color background) and then in another in quick succession. The color will be modified relative to these new surroundings as illustrated in the linked figure above.

A color may appear darker or lighter or more or less brilliant compared to each new background environment. e.g., a gray will look darker against a lighter background and lighter against a darker background. Take a look at the words "Color Illusions" as written in different colors and projected onto the following color backgrounds: black, yellow-orange, blue, bright green, magenta and bright purple. When written in red-brown, the letters appear strongest against the yellow-orange and bright green backgrounds, and dullest against black, blue and purple. Cyan letters look brightest against black and purple and almost invisible against the bright green. Yellow letters are bright and strong on black and purple, very weak on yellow-orange, and dull against blue, green and magenta.

Successive contrast is also illustrated well by what is termed the "Bezold Effect" whereby a given color will appear darker and brighter when surrounded by black, and softer and less bright when surrounded by white. Take a look at the Bezold Effect for Cyan, Magenta, Yellow, Red and Purple. You will find that black and white have similar effects on each hue. As explained above, the effect can be reduced by separating color areas by white space or with black outlines.

You can also experiment with the Bezold Effect using an interactive slider module designed to enable the comparison of the apparent look of a given color when surrounded by black or by white. The module requires a Macromedia Authorware Web Player Plug-In for the appropriate platform (PC or Macintosh) on which the viewer is using the module. If you do not currently have the plug-in, select the link for your specific platform, download and install the module as per Macromedia instructions. If the plug-in is already installed, you may link directly to the module for your platform.

Links:
 

In terms of mapping, successive contrast can cause confusion in interpretation of color on a map or in matching a map color to its appropriate legend color as illustrated in this figure.

While successive contrast causes potential color interpretation problems, it can be applied to creative figure-ground applications as described next.

c. Contrast and Figure Ground
Color contrasts can be utilized to create figure-ground on a map, whereby the figure (the map area, or certain symbols on the map) appears to stand out and the background or less important objects appear subdued in the background. In general, warm colors (reds, oranges, yellows) make good "figure" hues while the cooler colors (blues and greens, also gray) make better "ground" hues. In terms of chroma, high chroma hues are better for the figure and low chroma hues are better for the ground. Also, complimentary colors make good figure-ground combinations while colors that are too close on the color wheel (e.g., blue and green) do not provide good contrast for figure-ground.

Compare, for example, several variations on figure ground for a proportional symbol map on 1990 Population for SouthEastern U.S. Cities with populations of 150,000 or more. In this map several levels of figure ground can be created, including the proportional circles against a background of states, the map itself against the page background, and the marginal details against the page background. Look first at the map with no figure ground. Next, compare some good and poor solutions to the figure-ground problem for this map. Notice that there are many options. In the good solutions, the circles stand out as the primary point of interest with high chroma hues and pleasing, lower chroma, complimentary hues that accentuate the circles are used for the various levels of "ground". In the poor solutions, the circles do not stand out, and the colors are dull or too similar for there to be contrast.

Good Solutions: 1 23
Computer Screen Solution
Poor Solutions: 1 23

You can  experiment with Figure-Ground, creating your own figure-ground combinations, using an interactive double-slider module designed to enable the creation of figure and ground colors using the Red-Green-Blue (RGB)  method of color creation. The module requires a Macromedia Authorware Web Player Plug-In for the appropriate platform (PC or Macintosh) on which the viewer is using the module. If you do not currently have the plug-in, select the link for your specific platform, download and install the module as per Macromedia instructions. If the plug-in is already installed, you may link directly to the module for your platform.

Links:
 

Macromedia Authorware Web Plug-In	PC	Macintosh
Direct Link to Figure Ground Module	PC	Macintosh

d. Color Constancy
The human eye judges colors based on presumed illumination, thus if part of an object is in a shadow, we see the entire object as the color it appears under normal white light even though its actual appearance is altered by the shadow. Thus, when reading maps under varying light conditions (e.g., in the field under sunlight), colors may remain constant in appearance as we perceive them to be. This makes the design of color on maps somewhat easier as we don’t have to worry about light shadows on maps.
 

C. Subjective Reactions to Color

These influence the colors we chose and the other ways we use color on maps -- keeping in mind that we want to improve user understanding of the map and through user perception of color we can achieve better communication, etc.

The above information on color constants and contrasts refers to physiological responses of the eye to color and most humans are fairly consistent in these areas, thus generalizations can easily be made. With user preferences, the variability is great therefore it is much more difficult to come up with general principles. Much of the rest of this section deals with psychological reactions to color which are affected by individual preferences, behavioral moods, means of color, etc.

1. Color Preferences/User Preferred Hues

Color research in psychology and advertising has focused to some extent on user preferences of color, that is the colors that people find more pleasing to look at. The spectral colors can be separated into warm and cool whereby the warm colors are those of longer wavelengths (reds, oranges, yellows) and cooler colors have shorter wavelengths (greens, blues, violets). Studies suggest that people prefer the spectral hues over hue combinations, for example green and yellow individually are preferred over greenish yellow. Bright colors are preferred over dull unattractive colors. Dent (1996, pg. 298) indicates that young children prefer the warm colors while older children and adults prefer cooler colors. Children cannot differentiate fine differences in hue, thus also prefer the pure spectral hues. Near fully saturated hues are preferred over hues with low chroma or achromatic hues. Such findings can be applied to cartography in that a map will be more visually pleasing if preferred hues are selected. Color conventions (see 5. below), however, should take precedence over color preferences in map symbolization.

2. Color Combinations/Object-Background

While some color combinations can adversely affect map interpretation, there are other combinations that create nice effects, that are complimentary and pleasing to look at, or that accentuate the object (figure) and subdue the background (ground) so as to make the map area, or important map symbols stand out (see also 1c above, under Contrast and Figure-Ground). Dent (1996, pg. 298-299) suggests several general guidelines regarding color combinations for effective Object Background as follows (Note: these were results of non-cartographic research but can be applied in general to map design):

1. The most pleasant combinations result from large differences in lightness. Lightness (or value) contrast is necessary in pleasant object-background combinations.
2. A good background color must be either light or dark; being intermediate in lightness makes it poor.
3. Consistently pleasant object colors are hues in the green to blue range or other hues containing little gray.
4. Consistently unpleasant object colors are in the yellow to yellowish-green range, or other hues containing
    considerable gray.
5. To be pleasant, an object color must stand out from its background color by being definitely lighter or darker.
6. Vivid colors combined with grayish colors tend to be judged as pleasant.
7. Good and poor combinations are found for all sizes of hue differences (that is, distances apart on the color wheel).

You can  experiment with Color Combinations, creating your own combinations, using an interactive double-slider module designed to enable the creation of object and background colors using the Red-Green-Blue (RGB)  method of color creation. The module requires a Macromedia Authorware Web Player Plug-In for the appropriate platform (PC or Macintosh) on which the viewer is using the module. If you do not currently have the plug-in, select the link for your specific platform, download and install the module as per Macromedia instructions. If the plug-in is already installed, you may link directly to the module for your platform.

Links:
 

3. Connotative Meaning/Mood Hues

Connotative meaning is a perceptual concept whereby we associate certain moods or meanings with particular colors. People react differently to different spectral energies. Some colors fall under the warm/cool principle mentioned above under color preferences. Other general color associations can be made with objects, concepts, feelings or moods. Each person, however, will interpret the same color differently based on individual preferences and experiences. This presents a challenge in selecting color for associative reasons.
The concept is studied in greater depth in psychology and advertising, but can be applied to cartographic design as well.  Many of the color conventions, for example, were developed for the associations of color and objects, e.g., blue for water, brown for contours, green for vegetation, etc. Warm colors are often used to represent warm temperatures while cooler temperatures are represented by cooler colors. Bright reds and oranges may be used to attract attention while greens may be used for serene landscapes, or to represent economic topics (e.g., green for money). These are just a few of the many ways in which connotative meaning can be applied to map design.

You can  test your skills at Connotative Meanings, or Mood Hue associations  using an interactive answer-judging module which is set up as a matching game. Play the game by matching colors with associated moods or meanings. The module requires a Macromedia Authorware Web Player Plug-In for the appropriate platform (PC or Macintosh) on which the viewer is using the module. If you do not currently have the plug-in, select the link for your specific platform, download and install the module as per Macromedia instructions. If the plug-in is already installed, you may link directly to the module for your platform.

Links:
 

Macromedia Authorware Web Plug-In	PC	Macintosh
Direct Link to Mood Hues Game	PC	Macintosh

4. Advance/Retreat Colors

The human visual system perceives certain colors as advancing and others as retreating. The longer wavelengths, especially reds, appear closer to the viewer when seen along with a color of a shorter wavelength (e.g., blue). The physiological explanation is that the lens of the eye bulges when it refracts red rays, the same as when we view objects close up. Therefore reds take closer proximity. Some generalizations can be made with reference to the color dimensions as follows:

• Hue - longer wavelengths advance, while shorter wavelengths retreat;
• Value - high value (lighter) advances, low value (darker) retreats;
• Chroma - deep or highly saturated colors advance, while less saturated colors retreat.

5. Color Conventions
As noted under connotative meaning, certain color associations have been used to derive color conventions in mapping. Most noted are colors used in topographic maps, including blue for water and water related symbols (swamps, etc), green for vegetation, and brown for contours (hills). Hypsometric tints for elevation are somewhat associative, for example white or very light blue for glaciers, reds and browns for high elevations with little vegetation, greens for vegetated elevations, yellows for dryer areas, and blues for marshes and swamps as well as for water. There are conventions that are not associative, such as red for roads. This was established to make roads stand out on a road map. Whenever possible, color conventions should be used to help improve map interpretation. Do not use pink for water, for example, as it will confuse the map user who will most likely be expecting water to be blue, and will thus need to refer to the legend to interpret the pink color.

References

Go to Introduction to the Overview above

Return to: Module Overview OR Go Back to: Table of Contents

Created 2/20/98 by Laurie A. B. Garo. Last updated 10/13/99 by lg.
The URL for this page is http://www.uncc.edu/lagaro/cwg/color/color_percept.html