Subtleties of Color: Addendum

by Robert Simmon 6 months ago Filed Under: Design

About a year ago, we published a blog post framed as a letter to NASA, asking them to stop using rainbow color scales. The post was written out of a general frustration with rainbow color scales, but especially out of seeing field experts and leaders, like NASA, using a perceptually incorrect color scale. We weren’t alone. Robert Simmon from NASA’s Earth Observatory has been crusading for the same changes. He’s made great progress, and as a continuation of that, he’s responding to our “letter” with a brilliant series of blog posts on proper use of colors and color scales.

Drew Skau and I have received a few comments on Subtleties of Color that deserve to be included. (By the way, don’t be shy. You can leave a comment here or at any of the Subtleties of Color series.)

Naomi B. Robbins demonstrated that the standard land cover classification palette fails for color-deficient viewers. She also pointed out that “color-deficient” is the correct term to use, not “color-blind”. (Robbins is an expert in graphical data presentation who leads her own consulting firm, NBR, tweets from @nbrgraphs, and has blogged for Forbes.)

Color-deficient viewers would likely confuse red urban areas with green forests, not to mention tan scrub, in this land cover classification map of the Portland area.

Robbins is absolutely right, and I don’t think there’s an easy answer—even the Geological Survey, with its rich history of cartography, has problems displaying more than a handful of categories on a single map.

On an encouraging note, Mike Bostock sent examples (via Twitter @mbostock) of CIE L*C*h color palettes dynamically generated by D3.js in a web browser. (D3.js is a library that enables dynamic, interactive display of everything from time series to networks to maps. For those of us who began our careers 3 days before Netscape Navigator came out of beta, this is astonishing. Bostock created it.)

Comparison of color ramps generated with D3.js in hue, saturation, lightness (HSL, non-perceptual); hue, chroma, lightness (HCL, perceptual); L*a*b, (Lab, perceptual); and red, green, blue (RGB, non-perceptual). D3.js allows both the selection of start and end points and interpolation in perceptual color spaces.

Here’s an example of a palette applied to a grayscale image of topography by d3.js:

A divergent color map from D3.js (reminiscent of Color Brewer’s Spectral palette) used to display global topographic data. I do not usually recommend using a divergent palette to show sequential data, but this map cleverly uses the breakpoint (light yellow) to show median elevation. It’s still a bit bright & saturated for my taste, though.

We’ll post more comments if and when we get them.

Subtleties of Color
Part 1: Introduction
Part 2: The “Perfect” Palette
Part 3: Different Data, Different Colors
Part 4: Connecting Color to Meaning
Part 5: Tools & Techniques
Part 6: References and Resources for Visualization Professionals

Robert Simmon is a data visualizer and designer for NASA’s Earth Observatory. With 19 years of experience at NASA, he is an expert at creating clear and compelling imagery from satellite data. Robert focuses on producing visualizations that are elegant and easily understandable, while accurately presenting the underlying data. His imagery appears regularly in newspapers, web sites, and advertisements, and was featured on the login screen of the first Apple iPhone.

Robert blogs about design and visualization on Elegant Figures and tries to keep track of the zeitgeist (and share the occasional dog photo) via his Twitter account, @rsimmon.