Color

Today’s reading is about choosing colors for a user interface.

Color is a property of the human visual system and how it responds to visible light of different wavelengths. (Other animals see different ranges of wavelengths).

So color is a subjective sensation. Nonetheless, the human visual system has been extensively studied, so colors can be objectively measured and accurate numerical predictions made about color mixtures and color contrast.

We’ll discuss some of the properties of human vision that affect this decision, particularly the limitations of color vision. We’ll go over some models for representing colors, not just the familiar RGB model. And we’ll discuss some guidelines for choosing colors. The most important guidelines will be applications of rules we already discussed in graphic design: simplicity as much as possible, contrast where important.

Good references about color:

• Mark D. Fairchild, Color Appearance Models, 3rd Edition, Wiley, 2013 (going beyond colorimetry to appearance in context)
• Phil Green (editor), Color Management: Understanding and Using ICC profiles, Wiley, 2010 (in-depth on color management systems and color profiles)
• Colin Ware, Information Visualization: Perception for Design, Morgan Kaufmann, 2000 (for a design-oriented approach)
• Günther Wyszecki, W.S. Styles Color Science: Concepts and Methods, Quantitative Data and Formulae, Wiley Classics, 2000 (for a rigorous mathematical apprach rooted in experimental data)

Color Models

Red-Green-Blue (RGB)

Now let’s look at how colors are represented in GUI software. At the lowest level, the RGB model rules. The RGB model is a unit cube, with (0,0,0) corresponding to black, (1, 1, 1) corresponding to white, and the three dimensions measuring levels of the red, green, and blue primaries. The RGB model is used directly by CRT and LCD screens for display, since each pixel in a screen has separate red, green, and blue components. Often, the values are given on a 0 to 255 (or 0x00 to 0xFF) scale, eight bits representing the full range for each color component, because the frame buffer in a graphics card is usually 8 bits deep.

By itself, RGB does not fully specify a color because there is no information on exactly what color the red, green and blue primaries are. sRGB aims to fix that by standardizing a common RGB color space. Colors on the Web are defined to be in sRGB. There are other RGB color spaces, such as AdobeRGB and ProPhoto (used in photography), and DCI P3 (used in digital cinema and 4k television).

Cyan-Magenta-Yellow-Black (CMYK)

The CMYK (cyan, magenta, yellow, and black) is similar to the RGB model, but used for print colors. Instead of generating light like a screen, printed materials reflect the ambient light. Inks or pigments absorb some wavelengths more than others, producing colors. By the way, the K in CMYK stands for key; the black layer is printed last, and helps cover up small misalignments in the other colors.

Getting the right color in CMYK is quite tricky. It depends on the precise inks used, the paper, and the properties of the printing press. People either use swatch books of printed colors, or digital color management software (or trial and error, but that can get expensive!) to get consistent results. The details of color management, especially for print, is outside the scope of this course.

Hue-Saturation-Value (HSV)

HSV (hue, saturation value) is another hue-wheel system, like LCH, and more useful for choosing colors in user interface design. HSV is a cone. We’ve already encountered hue and value in our discussion of visual variables. Saturation is the degree of color, as opposed to grayness. Colors with zero saturation are shades of gray. Colors with 100% saturation are pure color.

HSV is an approximation to the CIE LCH hue wheel system, but is calculated directly from RGB without taking into account colorimetry.

HLS (hue, lightness, saturation) is a close relative of the HSV model. HLS basically pulls up the center of the HSV cone to make a double-ended cone, which is symmetrical and more elegant. Note though, that in HLS and HSV two colors like pure yellow and pure blue have the same lightness or value, even though visually they are very different.

The lightness axis is the amount of black mixed with a color. A common design for color pickers is a disk with white at the center and the hue axis wrapped around the outside, with separate linear control for the amount of darkness versus lightness.  The HSV space is very similar, where V stands for grayscale value and is linearly related to L.

Many applications have a color picker that lets you pick HSV values as an alternative to RGB.

OKLCH (Lightness, Chroma, Hue)

The 2024 CSS color standard adds a new color system, oklch(). You should probably just use this.

L: perceived lightness (0%–100%)
C: chroma: gray (0) to most saturated (technically infinity, but in practice usually below 0.4)
H: hue angle (0 to 360)

See https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl for a good background and motivation and https://oklch.com/ for a color picker and https://huetone.ardov.me/ for color palettes.

Despite the popularity of the HSL space, it is only pseudoperceptual: it does not truly reflect how we perceive color. In particular, the lightness L is wildly different from how we perceive luminance. This figure shows six different hues, arranged in order of their luminance. The corresponding computed L values are all identical. The true luminance is a somewhat better match with our perceptual experience: there is some variation between the boxes. However, our perception of luminance does not match what an instrument would measure: the amount of luminance that humans perceive depends on the wavelength.  

[Stone 08] Maureen Stone. “Color in Information Display.” IEEE Visualization Course Notes, 2008. Slides

Design Guidelines

In general, avoid strongly saturated colors - i.e., the colors around the outside edge of the HSV cone. Saturated colors can cause visual fatigue because the eye must keep refocusing on different wavelengths. They also tend to saturate the viewer’s receptors (hence the name). One study found that air traffic controllers who viewed strongly saturated green text on their ATC interfaces for many hours had trouble seeing pink or red (the other end of the red/green color channel) for up to 15 minutes after their shift was over.

Use less saturated, “pastel” colors instead, which mix gray or white into the pure color.

The examples on top use colors with high saturation; on the bottom, low saturation. Shades of gray have minimum saturation.

Saturating one color in your vision can have a temporary effect on your perception of other colors. Think of when you take off colored sunglasses, for instance. You can use this to change perception in cool ways - for instance, making grass look greener - but it can also be detrimental.

To see what this feels like, look at a full screen of bright red for a little bit. Then look at a full screen of green. The green that you see will be more green than you can normally perceive, because your red-perceiving cones won’t be firing at all. This green is an imaginary color. It’s visible light, but it’s greener than the range of normal human vision.

In general, colors should be used sparingly. An interface with many colors appears more complex, more cluttered, and more distracting. Use only a small number of different hues.

The toolbar on top uses too many colors (many of them highly saturated), so none of the buttons stand out, and the toolbar feels hard to scan. In contrast, the toolbar at the bottom uses only a handful of colors. It’s more restful to look at, and the buttons that actually use color (like the Open File button) really pop out.

A simple and very effective color scheme uses just one hue (like blue or green, weakly saturated and in various values), combined with black, white, and shades of gray. On top of a scheme like that, a bit of red in an icon will pop out wonderfully.

Background colors should establish a good contrast with the foreground. White is a good choice, since it provides the most contrast, but it also produces bright displays, since our computer displays emit light rather than reflecting it. Pale (desaturated) yellow and very light gray are also good background colors. Dark backgrounds are tricky. It’s too easy to mess up the contrast and make text less legible, as shown in this example.

Finally, match expectations. One of the problems with the Adaptec dialogs at the beginning of this reading was the use of red for OK. Red generally means stop, warning, error, or hot. Green conventionally means go, or OK. Yellow means caution, or slow.

(But note that these conventional meanings for colors are culturally dependent, and what works in Western cultures may not work for all users.)

Given all these rules about what colors not to choose, what colors should you choose? There are no hard-and-fast rules here, but there are a few heuristics. The first heuristic is an old standby - use color schemes that seem to work well for other interfaces on the desktop or the web. There are several tools you can use to probe your web browser (Firebug for Firefox) or desktop screen (EclipsePalette for Windows, Digital Color Meter for Mac) to determine what color is being used by a particular display element.

Another effective heuristic is to find a photograph of a natural scene that looks appealing to you, and extract colors from it (using the same tools, or using the eyedropper tool in a paint program). The intuitive basis for this heuristic is that our visual systems evolved to easily perceive and appreciate the natural world.

Keep your choices simple. You can’t go far wrong by choosing one weakly saturated color and a few shades of gray. As soon as you choose two colors, however, you run the risks of an aesthetic clash between them. It’s good to get some other opinions on your choice, particularly if you might be somewhat colorblind yourself.

There are also some sites out there that help you choose colors. ColourLovers is a large collection of user-contributed color schemes, with ratings and votes. The NASA Color Tool helps select a palette of colors using HLS and view them side-by-side on sample data. The Contrast Ration site by Lea Verou lets you check for adequate, accessible levels of contrast (even if transparency is used, which other checkers fail to take into account).

Summary