Colorimetry and the cartography of color

An introduction to these topics in relation to user interface design and design systems

Map with pin and strings emanating from the pin
Map with pin and strings emanating from the pin

Color is an important aspect of design. The process of choosing a scale of colors has a very close relationship with color science. Color scales are a common method of creating color systems for user interfaces. Color scales help to create a standard color palette with flexibility for use in a variety of ways.

Image for post
Image for post
Example of color scale for dark and light values of blue

In this article, I hope to shine some light on a basic topic of color science and how it relates to creating color scales.

Colorimetry is the science of measuring and quantifying color and human perception (thanks, Wikipedia). In other words, it’s how we try to make sense of color and how we perceive it. I’ll take a high level look at this topic, however if you’re interested in a more scientific dive, check out this article from Chandler Abraham.

What we know about color is that it’s a result of the human eye responding to different wavelengths of light. And the visible color spectrum is only a fraction of those wavelengths.

Linear diagram of light waves by amount of energy from left to right. Visible spectrum expanded for detail view.
Linear diagram of light waves by amount of energy from left to right. Visible spectrum expanded for detail view.

How we see color has more to do with the physiology of the human eye than it does of the properties of light. The human eye is comprised of cones and rods — each detect different wavelengths. Most people have three different types of cones, each with their own wavelength sensitivity; red, green, and blue. For some people, certain cones are missing or the wavelength sensitivity is anomalous and skewed. These are called color vision deficiencies; a great place to learn more about this is at color-blindness.com.

Image for post
Image for post
Recreated image with example of cone sensitivities in normal vision plus deuteranomaly

The trichromatic color theory is the theory that color can be measured and quantified based on the three primary colors, and that all colors in the visible spectrum can be made by mixing these three colors; red, green, and blue. The three colors correspond with the three wavelength sensitivities in normal vision.

The opponent-process theory suggests that each photoreceptor is linked together to form opposing pairs: red-green, blue-yellow, and black-white. Activation of one of the colors in a pair inhibits the opposing color. This theory is similar to the way color is defined in CIELab color space. Each channel is defined by opposing pairs: black-white (L), red-green (a), and yellow-blue (b).

Cartesian diagram expressing the general mapping of LAB color space.
Cartesian diagram expressing the general mapping of LAB color space.

Interestingly, this theory can be experienced in action by the afterimage illusion. If you’re unfamiliar with this illusion, it goes like this: Stare at one spot of the inverted Mona Lisa for 30 to 60 seconds. As soon as that time has lapsed, look at the white square to the right and blink. For an instant you will see the correctly colored image.

Mona lisa with colors inverted next to blank white space of equal size.
Mona lisa with colors inverted next to blank white space of equal size.
Stare at the Mona Lisa for 30–60 seconds, then look at the white space to the right and blink

This is caused by the fatigue of the stimulated photoreceptors in your eyes, and is an interesting way to experience the opponent process theory in action.

Colorimetry applies to design in that the tools we use for selecting and modifying color are bound to these systems of measurement. They are actualized in a variety of mathematical models called color spaces.

Color spaces are different numeric models that humans have created for measuring and quantifying color. When evaluating a color in a different color space, numbers and relationships are different. When looking at a single color this has little effect, since the color’s appearance remains the same.

Seven color swatches with exact same appearance but unique values for each, per color space
Seven color swatches with exact same appearance but unique values for each, per color space
Same color represented in a variety of different color spaces

These color spaces have a much bigger impact when you modify, blend, or transition a color through color space (such as darkening or desaturating the color). When you begin modifying colors in different color spaces, the outcomes can vary quite a bit. A common way of transitioning through color spaces in available color libraries (such as Chroma.js and D3-color) is that of linear interpolation.

Interpolation is a method of estimating and creating a varying range of new data points between two known data points. In the case of linear interpolation, it is essentially drawing a straight line between known colors to estimate the values in between.

Dark blue square and light orange square separated by wide dotted line
Dark blue square and light orange square separated by wide dotted line

This is another way of modifying or transitioning color using two known colors. For example, let’s say we want to blend a deep blue to light orange. Traditionally, a designer would build this gradient in a design tool by selecting individual points and modifying their placement on the gradient. It’s a tedious process where one of the goals of the designer is typically to create a uniform and natural-looking transition between the two colors. If we look at a linear interpolation, we can accomplish a basic transition with just the start and end colors. Linear interpolations between different color spaces will each yield dramatically different results in the color scale.

Five gradients from dark blue to orange with unique appearances
Five gradients from dark blue to orange with unique appearances
Five different color space interpolations between the same blue and orange

Certain color spaces are less related to human perception and more related to a medium-specific color application. For instance, in printing the primaries CMYK (cyan, magenta, yellow, and black) correspond with the set of ink pigments used to create every available color. In painting, the primaries of red, blue, and yellow are often used, and for digital interfaces, we use RGB (red, green, and blue).

RGB is a color space that works in an additive color process; adding colors increases intensity and becomes closer to white.

Image for post
Image for post
RGB cube, HSL and HSV cylinders: source

RGB is a cubic color space, but has cylindrical models HSL (hue, saturation, lightness) and HSV (hue, saturation, value) for more easily reasoning about the color space. RGB is bound more to the properties of the light (as it’s used to create color on screen) than it is to human perception. So while HSL or HSV may be easier to reason about, they are not perceptually uniform, and working in these spaces can sometimes be problematic.

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.

Image for post
Image for post
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.

Map of globe from above north pole; straight line drawn from LA to Moscow
Map of globe from above north pole; straight line drawn from LA to Moscow
Source: Quara

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

13 blue squares from dark to light values. Below is an HSV color area diagram with each color plotted by a white dot.
13 blue squares from dark to light values. Below is an HSV color area diagram with each color plotted by a white dot.
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.

Image for post
Image for post
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.

Image for post
Image for post
Yellow value scale with non-uniform curves in RGB and HSV compared to CIECAM02 color space

Bringing back the earlier example of interpolating between dark blue and orange, we can see in this graph that LCH interpolation creates a very nice balanced curve in CIECAM02 color space. Depending on our goals, this may be a very appropriate result; such as for use in a sequential scale for data visualization.

Curve with dark blue to orange coloration
Curve with dark blue to orange coloration
LCH interpolation shown in CIECAM02 color space

As designers, it’s helpful to explore various color spaces to see the path the color scale takes through space. By finding the right color space to use, we can find patterns such as curves or linear paths that naturally occur in our color selection. This allows us to make informed modifications to the colors while trying to create a uniform path in color space.

Linear interpolations with color libraries can help to eliminate much of the tedium in creating a color scale. They can also be enhanced to automatically distribute colors by various properties, which can help in creating a uniform scale. However, manual creation of gradients still provides designers with fine control over color selection that these tools do not. Combining these processes and auditing color choices in various color spaces at the time of authoring will allow you to create perceptually balanced scales, using a little bit of color science to help.

Written by

Designer on Spectrum, @Adobe’s design system. Intensity curious about color, visual perception, and the systemization of design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store