Building Effective Color Scales

Color scales have always been a tricky topic. They need to look good, and still represent data. And our eyes have some strange quirks that make colors difficult to get right. Yellow is extra bright for us, and color blindness plagues a significant portion of the male population. We know rainbow color scales do not work well, but how do we design color scales that are good? First, we should break down what color actually is.

The way we biologically interpret color is different from our common mental models. Our eyes have two kinds of light receivers in them. Rods and Cones. Rods are great in low light and for capturing motion, but they don’t see much color. Cones are in the center of our retinas, three kinds that capture red, green and blue wavelengths, respectively. This is why the primary colors of light for us are red, green and blue. If we had receptor cells for other parts of the spectrum, primary colors for us would be made up of those wavelengths instead.

(Source)   Red, green and blue signals are what gets input into our brains, but that isn’t how we conceptualize colors best. The Hue-Saturation-Luminance model is much closer to how we think about colors. The model is based on breaking colors into three variables (hue, saturation, and luminance) that can be controlled independently to pinpoint a color.   To be sure, there are models that match human perception more closely. However, HSL is easy to conceptualize and a good space to use for designing color scales. In the HSL space, there are three ways to show difference between two colors:

• Hue provides differences in what we typically think of as “color.”
• Saturation lets us distinguish how intense a color is.
• Luminance provides the greatest possible contrast.

Absolute white is as bright as a color can get, absolute black is as dark as it can get, and the distance between them is the farthest possible distance in the HSL color space. A black-white color scale will provide the greatest range of contrast. Unfortunately, without any hues, a black-white scale is a very dull color scale. So if black-white is ideal for the data, but not the design, we need to add some color. A color-to-white or color-to-black color scale can be extremely effective, and will fit in with many designs.   Even these color scales may not have enough color, though. Sometimes you need two colors. This is where hue contrast also becomes fairly important. Two colors that have very close hues will be difficult to differentiate, and will not show variation in the data well. Hue is measured in degrees since it wraps around. A 180º difference in hues produces complimentary colors, and their hues will be as far apart as possible. Unfortunately, complimentary colors aren’t always a good color scheme. As a rule of thumb, hues that have at least a 60º difference should produce good results.   Fading to gray from a saturated hue will be less effective than either of these methods because it will have almost no hue contrast, and low brightness contrast. In the example below, the bottom bar is the grayscale version of the top bar.   Sometimes the data has a critical threshold in it. For example, net income is great as long as it is positive. As soon as it becomes negative, that is a critical point. Other times there is still a threshold, but it is not a hard line that is critical. Temperature starts to become hot at around 75ºF, but before that it’s fairly cool.   Interpolation between colors is an important factor as well. Interpolation across hue in HSL produces rainbow color scales, and is not a good idea. Interpolating in YUV, RGB, and CMYK color spaces can all be effective, depending on the colors you are using. There are a few other issues to keep in mind when designing color scales: Color blindness is major problem, and color scales with red and green components should be avoided so that there is no confusion for color blind individuals. If something will be printed on a black and white printer (rare in today’s world), make sure there is contrast in the brightness of the scale. Look out for artificial edges in the color scale that might make a value in the data look more significant than it is. Often, yellow is the culprit for artificial edges. Designing good color scales can be a difficult task, but watching out for the confounding issues and starting with a good set of colors can go a long way. It is far from impossible to get a color scale that both looks good and displays data effectively.   Drew Skau is Visualization Architect at Visual.ly and a PhD Computer Science Visualization student at UNCC with an undergraduate degree in Architecture. You can follow him on twitter @SeeingStructure