Colorimetry and the Cartography of Color
An introduction to these topics in relation to user interface design and design systems.
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.
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
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.
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.
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).
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.
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 space
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
How does this affect design?
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.
