Colorimetry and the Cartography of Color
By: Nate Baldwin
Tags: Colors, Design Best Practices, UI Design, Design, Design Systems

Color and cartography

A good comparison for interpolation and color spaces is that of cartography and illustrating flight paths. Here we can think of color spaces as being different maps. Interpolations and color steps are essentially the plotting a flight path from one location to another.

Depending on the type of map (color space) you’re looking at, the path may look very different — so much, in fact, that you may see artificial patterns or misinterpret these patterns when compared to human perception of color.

Flight paths from LA to Moscow, an New York to Moscow on a Mercator Projection map. Source: Quara

For example, this map shows the flight path from Los Angeles and New York to Moscow. On this map it looks like the flight from LA to Moscow takes an irrationally large detour around Greenland. But, when we look at the same flight path in a different map, it’s clear that the flight takes a straight path and travels a much shorter distance than we thought.

The reason for this is because the first map is an improper projection of a three dimensional surface into two dimensional space. There’s a whole lot to read on this specific subject, as it is a very difficult problem.

As we can see with this example, using an improper map to review a path can result in the misinterpretation of the path itself.

Same sort of thinking applies to color. This is why it’s helpful to interpolate within different color spaces and why each yield different results.

Like cartographers, color scientists are continuing to evolve their models for color with color appearance models. These models are adaptations to XYZ color space in order to correct irregularities and create a more accurate model of color based on the perceptual properties of color.

The color appearance model CIECAM02 was used to create the Viridis color scale, which is an industry standard for sequential color in data visualization. The scale in CIECAM02 forms a balanced curve through space, which reflects the balanced appearance and smooth transition of the color scale itself.

Viridis scale (extrapolated to white & black) shown in 3d CIECAM02 color space

Each color space has its own strengths and weaknesses, depending on what you are trying to create. Comparing color space interpolation and color space visualization is an important aspect of auditing and creating a balanced color scale.

Going back to our blue-orange example above, if we take a look at a few of the interpolations in 3d space, we can begin to see why, where, and how the color scale is moving in order to create the different color outputs.

Blue/orange interpolations in CIECAM02, LCH, and HSL; shown in 3d CIECAM02 color space

Let’s take a look at specifically creating a single-hue value scale for UI. Many designers have observed that when creating a perceptually balanced transition between colors in HSV, they tend to adhere to a curve.

Single-hue value scale plotted in HSV appears to follow curve

In this process, we are essentially trying to navigate color space. Our goals are not as simple as finding the quickest route, because the nicest route to a destination is not always a straight line. While the curve we created has a nice form, it is not entirely uniform, and may not be straightforward in how to implement the scale.

Let’s take a look at how the same value scale above maps in a variety of other color spaces. If we interpolate additional colors for this scale in HSV, we can see a fuller picture. This color scale takes differently shaped curves when viewed in different color spaces.

Scale with HSV interpolation shown in RGB, HSV, and CIECAM02 color space

In RGB color space, the scale follows a smooth downward curve with an exponential appearance. In HSV color space, we see the same arc shape that we observed earlier, which has a sharper angle to the curve and some irregularities in the darker colors. When looking at the same color scale in CIECAM02, it appears to have a nice, fairly even convex curve.

So in order to create the same desired color scale, it may be easier to draw a uniform, balanced curve in either RGB or CIECAM02. If we are to look at different colors, we can see that uniformity of curves is not possible in HSV due to the way in which colors are numerically defined in that space. For example, a scale of yellow has uniformity in CIECAM02, but the shapes in RGB and HSV are very different from the blue scale.