Color Schemes for
Online Information Systems
 

Web-Safe
Colors

  
Color specifications for elements of the display controlled by HTML (text, link, visited link, and background) are expressed as a six digit code in hexadecimal: two digits for the amount of red light, two for the green, and two for the blue. In theory, the code can represent 2563 colors. The most common hardware configurations can display only a much smaller set -- a total of 256 colors. Any color beyond that set is converted to some color in the set. The color the user sees is a function of three components of the technology: the hardware, operating system, and browser. In other words, people using Netscape with MacOS will not see the same color as people using Netscape with Windows or Windows95.
Because these differences can affect the readability and utility of online texts, you should choose colors from among the 216 web-safe colors shown in the color array on the right. These colors will in the same way with a variety of platforms, operating systems, and browsers. (Unix systems are a notable exception.)
return to return to Color
Graphic elements created for online display with a web browser present a somewhat different set of problems. Instead of substituting colors from the palette of 216 shared colors, browsers attempt to match the colors the images contain by dithering. Dithering can create significant distortions in the illustrations. These problems can be avoided if web-safe colors are used when the graphics are prepared. In the representation of these colors on the right, the red, green and blue hexidecimal values for each color are displayed along the three axes of the exploded cube.
 

Triadic
or Balanced
Color Schemes

  
Triadic colors are especially useful when color is used to differentiate between elements belonging to one category and elements belonging to another. Because their hues are evenly spaced around the color wheel, they provide provide fairly uniform degrees of contrast with each other. The fewer the colors employed, the greater the degree of contrast.
In these two illustrations, eight colors differentiate sections of the information architecture. Each node applies the color for its group to a number of its features so that the color system is always visible to the user, even when scrolling through the information in a long node. Although the first illustration uses relatively high chroma colors and the second one uses more muted shades and tints, the colors occupy the same positions on the color wheel. The persistence of color elements throughout each node helps users learn that colors used in these positions
provide information about each node's location within the information space. In applying colors to provide information about the structure of the information space, it is important to use colors that are not likely to be confused with each other when the user does not have a complete set of such colors in view. In practical terms, this means that a color code probably should not be used if more than 8-10 groups need to be identified by colors.
  The groups of colors displayed on the right show some useful sets drawn from the 216 web-safe colors.
Although differentiated by hue, each group is harmonized by level of hue saturation and degrees of brightness. Each row in the illustration below shows a single basic color scheme with each hue represented by two different values of brightness and saturation. If the color system uses the darker shades to affiliate elements into groups, the lighter shades can be used to provide visual order and visual punctuation within nodes.
return to return to Color
return to return to Orientation
 

Analogous
Colors

  
These colors adjoin each other on the color wheel. Analogous color schemes are used to create gradations of color within a visual field.
They are not very useful for signifying differences among the divisions of an information space since adjoining hues are often difficult to distinguish from each other when both are not visible at the same time. These color schemes are good choices for visual punction. They can produce enough differentiation to separate parts of the information hierarchy within a single node, for example.
return to return to Color
 

Monochromatic
Schemes

  
Monochromatic colors produce harmonious combinations. They can be useful for creating navigation elements when no strong color code needs to be associated with the information structure. They also work well within an overall color code, providing some contrast with the dominant color of a particular domain while retaining a strong affiliation.
The chart at the right shows the some of the web-safe colors arranged by hue and by levels of brightness and saturation. In a document belonging to a group marked by the color blue, shades and tints of the hue can be used to provide visual definition for subheadings or other logical elements users might need to locate quickly and easily. When reductions to grayscale will be necessary or desirable, the colors chosen must represent sufficiently different values (levels of brightness). The hues (or their relative positions on the color wheel) matter less.

In the system of 216 web-safe colors, there are 5 values for shades plus black and white, or a total of 7 reliable choices. The illustration on the right shows how the 5 values in shades of cyan translate into the five levels of gray the web supports.
return to return to Color Tints (colors with low levels of hue saturation) are generally too close to each other in value to be used if translation to grayscale needs to preserve some part of the information they may convey, but in some cases they can substitute for shades at the bright end of the scale.
 
Web Design Guide