Continue in 2 seconds

Uses and Misuses of Color

  • November 01 2005, 1:00am EST

Humans experience the world largely through vision. Seventy percent of our bodies' sense receptors reside in our eyes. As a result, there is an intimate connection between seeing and thinking. It is no accident that when we understand something we say, "I see" - not, "I hear," "I smell," "I taste" or "I feel." Our tastebuds can only make five distinctions - sweet, bitter, salty, sour and a lesser-known savory characteristic called umami - but we can distinguish a seemingly endless number of subtle differences in color. Our rich ability to perceive colors can be applied to data visualization in powerful and useful ways, but it is often misapplied simply because most folks don't understand it and the limitations of its use.

In this column, I'd like to focus on three recommended practices for using color in graphs:

  • Use soft colors, except when you wish to highlight specific data.
  • Use the same color, except when color differences are needed to indicate differences in the data.
  • Use a single, neutral background color.

Before explaining these practices, however, a little background about color perception is useful.

An Introduction to Color Perception

We see light. What we experience as light is that portion of the electromagnetic spectrum to which our eyes are sensitive, ranging from wavelengths of 400 to 700 nanometers. We perceive light of different wavelengths as different colors. We do so by means of sensory receptors called cones, located on our retinas. Other receptors, called rods, are also located on the retina, but they specialize in sensing low levels of light (for instance, at night) and don't differentiate between colors, seeing only in shades of gray. Cones, on the other hand, consist of three types, each sensing a different range of wavelengths corresponding to what we perceive as red, green and blue. Every color that we discern is some combination of these three inputs from the cones.

Many systems for describing and manipulating color have been developed over the years, and most do so using three characteristics of light, but they don't all use the same three. Perhaps the most common system used on computers is the one called HSV (sometimes called HSB or HSL), which describes color in terms of hue, saturation and value. Hue is what we normally think of as color, consisting of values such as yellow, orange, black, brown, pink and so on. Saturation refers to the purity of the color, ranging from pale versions with lots of white pixels mixed in to fully saturated versions that contain no white pixels at all. Value refers to the range extending from black to white. Using the HSV system, you can start with any hue and then create a paler or softer version of it by adjusting the saturation scale to a lower setting. When using color to encode data in graphs, the distinction between saturation and value are not terribly important; you can think of them as a single variable called intensity, ranging from low intensity (light and dull) to high intensity (dark and bright) colors.

We do not perceive colors in an absolute sense, but rather we perceive differences in color relative to one another. The same exact hue, determined by its precise wavelength, can appear quite differently to us, depending on the one or more colors that surround it. The small gray squares that appear at different positions within the background gradient of color in Figure 1 are all precisely the same, but they look quite different to us because of contrasts in the colors that directly surround them. Although our eyes sense in an absolute way, our brains perceive what we see in a way that is adjusted according to context. As you'll soon see, this is an important fact to keep in mind.

Figure 1: The four gray squares, though they don't appear so, are all exactly the same color.

Use Soft Colors, Except When Highlighting Data

The graphs that people create frequently overuse intense colors. Bright dancing colors might be a useful way to entertain infants, but these colors can adversely affect adults. Nature uses intense colors to attract attention; we should do the same. When we rely primarily on paler and more soothing colors to encode data in graphs (such as the colors of bars, lines and points), they can be studied comfortably, with less distraction. By using intense colors only when needed to make things stand out as important, we can leverage the built-in attention-getting power of intense colors, which doesn't work if everything is intense (see Figure 2). If your software allows you to do so, take the time to create your own custom color palette for graphs that includes a set of relatively soft but distinct colors for general use and another set with dark and bright colors for making things stand out.

Figure 2: The East region clearly stands out in the graph on the right but not in the one on the left, despite the fact that it is the same color on both.

Use the Same Color, Except When Associated with Differences in Meaning

Visual perception is keenly attuned to differences, as are all our senses. A difference invites our brains to ask, "What is the meaning of this difference?" When we vary colors in a graph, if those differences don't mean anything, they engage the viewer's brain in wasted processing and distract from the message. Despite this, many software products make it easy to produce senseless variety in graphs - for instance, by providing a simple means to automatically vary the colors of the bars. Look at the two graphs in Figure 3 and determine for yourself which one makes it easier to compare the expenses of the six departments.

Figure 3: Differences in color should only be used to encode differences in meaning.

Use a Single, Neutral Background Color

The background of a graph, especially in the plot area, should consist of a single color. Using multiple background colors or a color gradient ranging from light to dark will make some objects or some portions of objects look different than others, even when they should look exactly the same. Notice how the factories in the upper half of the graph in Figure 4 stand out more than those in the lower half, even though nothing about their performance warrants this distinction.

Figure 4: Color differences in a graph's background can affect perception of the data.

If you've made the effort to understand your data, don't let your discoveries lose meaning by presenting them poorly. When presented graphically, even the colors you choose will make a difference. Express your colorful personality in other ways.

Register or login for access to this item and much more

All Information Management content is archived after seven days.

Community members receive:
  • All recent and archived articles
  • Conference offers and updates
  • A full menu of enewsletter options
  • Web seminars, white papers, ebooks

Don't have an account? Register for Free Unlimited Access