To Skip Navigation Press Enter.Link to the Color Usage Site Home Page
Use the category links below to navigate this web site. All site pages can also be accessed with the site map.
Design Process Color Graphics Topics Color Guidelines Aerospace
Color Science Utilities Site Map
Link back to the CURL Home Page


This page illustrates use of color coding to establish a visual association between related elements in a complicated graphic. This visual grouping is especially valuable when data elements of several kinds are intermixed, as in the static maps below, and in dynamic mappings where the positions of members of a class vary from moment to moment, as in the air traffic display below.

This is one of the most powerful uses of color coding, but trying to produce too many spatially overlapping groups can reduce the strength of the visual associations.

Section of a map of Death Valley, showing use of color to visually group roads, watercourses, and tour information
Larger Image New Window.
Full Death Valley Map PDF
New Window.
Download Acrobat Reader
Click to download Adobe Acrobat Reader

In this park map color coding has been used to group related elements, with major roads in red, watercourses in blue, sea level boundaries in gold and tour information in black.
This aviation map illustrates the very high density of information in urban areas. Hue (magenta and blue) and type of line are used to associate the correct text information with the corresponding area boundaries. The overlapping structures are very hard to separate without the hue coding. Section of an aviation chart, showing use of color to visually group text labels with their associated lines and symbols
                            Larger Image New Window.

Section of an air traffic control display, showing use of color to visually group text, graphics, and numbers that refer to the same route replanning actions
Larger Image New Window.

Color is used for perceptual grouping of several kinds of information in air traffic control displays under development at NASA. Here we see five sections cut from a larger traffic display. All of the data elements relating to a particular flight become highlighted in orange when the controller places the cursor over any one of the elements in the set. The orange items here are the data elements for flight LARC11. They include, starting at the upper left and moving clockwise, the flight data block at LARC11's current position, the predicted position of the aircraft using a "look-ahead" tool, LARC11's entry in a list of predicted conflicts among aircraft, LARC11's entry in a list of conflicts that would be created by a flight plan amendment the controller is preparing with a planning tool, and LARC11's position on a timeline showing arrivals into Dallas/Fort Worth International Airport at the northwest cornerpost. The perceptual grouping provided by the color coding is valuable due to the large number of elements in the overall display.

Red is used to indicate all of the data elements relating to a conflict between aircraft trajectories (paths that pass closer than regulations consider safe). In the case illustrated here the conflict is one that would be created if the controller were to issue the planned flight plan amendment in its current form. When the controller finds a conflict-free version of the amendment the color will return to orange. The visual grouping helps the controller find at a glance any of the several graphic and textual representations of the conflict.

Overuse of Color for Grouping

Trying to produce too many spatially overlapping groups by means of color coding can reduce the strength of all of the visual associations. While color provides one of the most powerful visual grouping effects, other graphic dimensions are also frequently used for grouping. Symbol types, font styles, and sizes are all extensively used to group spatially scattered data elements. Color should probably be reserved for the most important groupings as it provides the additional advantage of perceptual popout.

More on Color and Popout.

Related Topics:
go to this page Attention Management
go to this page Labeling with Color
go to this page Color and Popout

About This Site

| Design Process | Color Graphics Topics | Color Tool | Guidelines | Aerospace | Color Science | Utilities

  Site Curator: Richard Mogford | Responsible NASA Official: Richard Mogford | Privacy Statement

NASA Logo     Ames Research Center Logo     Human Systems Integration Division Logo