Color #

~8 min read

Color is all about perception
The HSV color model is most useful for design
From HSV, value is best used for quantitative encoding
We can use the color wheel to help us represent meaning in our color choices.

For many people new to design, working with color can seem overwhelming. A modern computer screen can display over 16 million colors and it can be daunting to have to choose from such an array of options. However, this needn’t be the case. It is surprisingly easy to make good color choices, though it helps to understand how designers approach color before understanding how they choose colors. To this end, we will introduce useful color models and then use this knowledge provide recommendations for choosing colors.

Color IS perception #

Because this wiki is specifically aimed at practicing scientists and engineers, it is worth addressing one point up front. Color and photon wavelength are not the same thing. This is a common misconception among technically trained people, but is easily disproven. Consider for instance, the spectrum of light shown below. This spectrum reflects the all the colors associated with the various wavelengths of visible light, running from violet to red. Above this is a magenta rectangle. You will see that the color of this rectangle is not present in the spectrum. Simply put there is no single wavelength of light that corresponds to the color magenta.

A figure showing all the colors associated with the visible spectrum of light. Also shown in a magenta rectangle. The color magenta is not found in the spectrum.

Instead, magenta is how our brain perceives sensing both red and blue photons at the same time. Similar considerations can be made for many other colors: no single wavelength of light is associated with the color brown, or gray, or teal. Instead, these are formed by the simultaneous detection of 2 or more photons of light.

The key point here is that color is all about perception. This means that we should always try to think about how our viewers might perceive our colors when designing our data visualization.

HSV is a widely used color model that addresses perception #

When dealing with the array of colors, people often try to break color into components. For reasons that go beyond the scope of this book, the most common models contain three components.$^\dagger$ One ubiquitous model is the so-called rbg color model, which stands for red-green-blue. The reason this is ubiquitous is that the displays used in much of our technology use combinations of red, green, and blue light to create the colors we see on them. One can visualize this process as a cube, where three separate axes control the intensity of red, green, or blue light, as shown below.

The rgb color space represented as a cube. One axis is used to control the brightness of red, green, or blue light. Thus, the cube contains red, green, and blue corners, as well as magenta, yellow, teal, black and white corners. The black corner is not visible in this image, but is hidden by the rest of the cube.

However, though the rgb system might seem like a natural way to discuss color, it is not the most useful for design. Instead, designers tend to rely on a color model called HSV, for hue-saturation-value.$^\ddagger$ This system can be visualized as a cylinder, as shown below.

A representation of the HSV color model as a sphere. Hue is given by the angle of the radius, the radius represents saturation, and the height represents value.

In this model, hue represents what is colloquially called “color.” Value can be though of as how bright a color is. For instance, you might consider having a lightbulb that will produce some color light (e.g., red). If the lightbulb is off, then we are at zero value. If the lightbulb is on at maximum brightness, then we are at maximum value, and we can smoothly move between these two values. Saturation represents how much of our ‘pure’ hue is added in. If we are at some medium value, then no saturation will result in a grey.

The reason that HSV is the preferred model for designers, is that it more closely reflects how humans perceive color. To illustrate this, consider the color ‘families’ that most people know. These families have names like pastels, neons, jewel tones, earth tones, and neutrals. These families reflect different values of saturation and value. Thus, people naturally group colors by these characteristics.

A square plot, representing saturation and value for a single hue. This is colored to reflect these values and saturation. Regions are circled, and one can see a stylized color wheel in which the colors correspond to the values and saturations circled. These are then given family names, like “pastel” and “Jewel tones."

Value is the most critical component to consider #

When working with data, there is another benefit to working with HSV. It turns out that the HSV system isolates an aspect of color that the human brain can easily quantify: value. To illustrate this point, we can consider a painting where we have preserved just the channels of hue, saturation, or value. In this, you can see that the value is what provides our brain the most information about the image.

Four images of the chemist Lavoisier and his wife. In the first image, all channels of HSV are present. In the next three, only hue, saturation, or value are present, respectively.

Original image from Wikipedia. Altered images by Ben Lear.

From this, we already have three good rules for working with color:

The best contrast in colors will come from colors that differ in value.
If you want a color change to reflect a quantitative change (aka. a color map), then choose a map that varies in value.
Hue may be a good choice for categorical changes, where quantitative assignements are not needed.

The second point suggests that we mapping requires finding color maps that are perceptually uniform in terms of their colors. Fortunately, there are good online resources to find such maps. This will be discussed in more detail in the page on color maps.

Using saturation and value together #

As shown above, we tend to group colors into families, based on their saturation and value. Thus, while value can be used to create contrast, consistency in design is attained by working within a single color family. For instance, if we have a plot with several lines on it, we might choose colors within a single family, to create a cohesive feeling.

A line plot of 6 IR spectra, in which the spectra have been assigned colors from the Jewel Tone family of colors

Choosing hues #

While value can be used to indicate quantitative changes, hue can be useful for indicating categorical changes. Hues can also be used to create associations. Most people will view blue and green as more similar to one another than they are to red. Thus, one can select these colors to communicate which sets of data should be more closely associated with one another, as illustrated shown below.

A figure of average housing costs, education costs, and income, plotted as a line chart with markers. The housing and education costs are colored in blue and green, respectively, while the income is plotted in red.

The perceived relationship between hues is common enough that we have words for them. We call blue and green analogous colors, while we call red and green complimentary colors. We can also see this in the arrangement of the color wheel. On such a wheel, blue and green are close to one another, while red and blue are opposite one another. Using the wheel, we can develop other heuristics for handling color choices, in order to emphasize different relationships between data. These relationships are also given names, as illustrated below.

An image of a color wheel. Beside the wheel are common color schemes, illustrated on smaller versions of the wheel. These include monochromatic, complementary, analogous, triadic, and split complimentary.

Thus, if one understands the relationship one wishes to highlight, then one is well on their way to choosing colors. In general, a workflow for color might look like this:

decide on message → choose color scheme that emphasizes the connections you see → choose correct heuristic for your message

Plan for accessibility #

However, there are also a number of other considerations that come into play when choosing colors—considerations we can collectively call ‘accessibility.’ The idea is that one must consider the manner in which your data visualizations will be viewed to ensure you are making good color choices.

Perhaps the most common consideration is to ensure that your choices are colorblind friendly. A bit over 5% of the world’s population cannot distinguish between reds and greens. Thus, even though red and green might look like good choices to those with normal color vision, this is a problematic paring for a significant number of people.

A series of the same graphic. A color where is placed above a bar chart drawn using red and green bars. This is repeated 7 times. In the first, it is drawn representing normal color vision. The remaining 6 are drawn simulating different versions of colorblindness: deuteranomaly, protanomaly, deuteranopia, protanopia, trianomaly, trtanopia.

To ensure that you are producing images that are colorblind friendly, you can use modified color wheels, as shown above, or you can use online resources like colblinder to simulate how your designs will look to those with colorblindness.

Though colorblindness is perhaps the most commonly talked about consideration for accessibility, it is also worth considering the size of your design. The reason is simple: the degree of contrast between colors will depend on the size of the colored objects.

A line-based version of the plot for income, housing expenses and education expenses. This has the same coloration of red, blue, and green lines. The plot is repeated twice. In the left plot, the lines are very thin, in the right, they are thick. The colors are much more apparent in the thick version.

Good tools exist #

Even though the intension of this discussion was to help you approach choosing colors with more confidence, you may not yet feel confident in choosing colors. That is ok! You will make progress with purposeful practice.

Also, you don’t have to go it alone! There are many good tools to help you choose colors. Here are two of my favorite:

https://coolors.co/: This is a website with an excellent color picker/generator, as well as contrast checkers, and community submitted color palettes. This is an extremely good resource when searching for color ideas.
Colblinder: This is a website where you can upload an image, and click through various simulations of colorblindness. This is extremely helpful in checking your complete designs. Additionally, it will simulate grey-scale images, so you can see how designs will look on black and white printers, or on most ereader screens.

$^\dagger$I am specifically thinking of additive colors (such as what is shown on a screen). The common model for colors in print (subtractive) has 4 components and is called CMYK.

$^\ddagger$Value is also sometimes called “brightness.”