Introduction

To see the visualization, click here.

The chromaticity diagram is one of the most informative diagrams in color science—it shows the range of colors the human eye can perceive and what portion of that range our displays can reproduce. While the diagram is quite interesting on its own, I feel like there is some information that begs to be explored. I wanted to do the following:

intuit the range of colors that are missing from our displays
compare the gamuts of different display color spaces
better understand the relationship between the visible light spectrum/the rainbow with chromaticity

To investigate this, I built an interactive visualization with three main components:

the chromaticity diagram
a 3D point-cloud counterpart
the visible spectrum plotted alongside them

If you already know chromaticity well, you can jump straight into the visualization. But, if you’d like more context, or want to understand some of the design decisions, read on.

The Chromaticity Diagram

While color is three-dimensional, chromaticity is a two-dimensional concept consisting of color without the brightness dimension, so it roughly corresponds to the actual “colorful” components of color (which can be further isolated into hue and saturation). A useful property of chromaticity is that mixtures of colors fall on straight lines between their chromaticities. That makes the chromaticity diagram a compact 2D map of all visible colors and great at representing the range of colors display spaces can show, as these spaces typically represent colors via three sources of light/emitters, so in a chromaticity diagram this results in a neat compact triangle connecting the chromaticities of those three light components.

A typical chromaticity diagram has a “guitar pick” shape. The curved outer arc comes from the chromaticities of single wavelengths of light, and since all colors are made up of mixtures of wavelengths of light, the arc sets a boundary which is filled in by the chromaticies of all possible colors.

Here’s an example of a typical chromaticity diagram you can find online:

Planckian locus in the CIE chromaticity diagram — *Image: Wikimedia Commons*

(This particular one also shows the chromaticities of blackbody radiators—why light bulbs are described as “3000K,” “4000K,” etc.)

However, there are some issues I have with this diagram: most notably… it’s “wrong,” many of the colors it shows do not have the chromaticity they are placed at. Notice how a very large region at the top is the same shade of green, this is because the shades they are supposed to be are too green for a typical display, so instead they represent these shades of green by using the same maxed out shade. There is no real solution to this, but I think we can do better.

A point-cloud approach

In my visualization, the chromaticity diagram is represented as an interactive moving point cloud. This has a few advantages:

In 3D, point clouds are easy to see through, allowing the ability to look at the inside of a shape
When plotting shapes, they are easy to distinguish via their densities—no need to highlight or outline regions
In 2D, colors which occupy different brightnesses can periodically occupy the same chromaticity, so we can see the range of brightnesses
Hovering and selection become simple visual changes where we can increase the size of the points
The motion adds a bit of life to the visualization.

To address the out-of-gamut problem, I desaturate colors until they become displayable. This preserves hue even when chromaticity is out of range, and it makes the boundary between in-gamut and out-of-gamut regions immediately visible.

I show three display spaces:

sRGB — the long-standing standard, used almost everywhere and what people are most familiar with when they define a color in “RGB”
P3 — now common in modern displays, with more saturated red and green primaries than sRGB’s. Photos taken on modern smartphones typically can produce P3 colors
Rec. 2020 — even more saturated primaries than either, though no current display can fully reproduce all of the colors in Rec. 2020

3D Point Cloud

Beyond the 2D chromaticity diagram, I wanted to compare the volumes of the sRGB, P3, and Rec. 2020 cubes. It’s easy to see their shapes in 2D, but less obvious how they differ in 3D.

I plotted all three gamuts in a rotated version of XYZ space (rotated so that the black-white axis is vertical), the canonical space used in color science, which can be rotated by the user. While it’s kind of arbitrary, XYZ earned this status due to some convenient properties, like its Y coordinate corresponds to brightness, and all chromaticities in XYZ fall within positive coordinates, which makes for a neater diagram. Technically chromaticities can be derived in the context of any space, as the derivation of the components of the chromaticity diagram is simply: $$x = \frac{X}{X+Y+Z}$$ $$y = \frac{Y}{X+Y+Z}$$ So, there are analogues to chromaticity in other spaces calculated the same way, but they produce more warped diagrams. Since the canonical chromaticity diagram is derived from XYZ space, it makes sense to show the 3D point clouds in XYZ space as well.

Representing the “max gamut”

The visible spectrum extends far beyond the boundaries of sRGB, P3, and Rec. 2020. To show these spectral colors in XYZ space alongside the display gamuts, the visualization includes what can be called the max gamut—the full region spanned by all physically possible display primaries.

Color spaces such as sRGB, P3, and Rec. 2020 are each defined by four chromaticities:

a red primary
a green primary
a blue primary
a whitepoint

The whitepoint is the chromaticity produced when red, green, and blue are all at maximum intensity. Because this whitepoint fixes the relative strengths of the primaries, it also constrains the overall shape of the gamut.

To construct the max gamut, spectral chromaticities were paired with their opposites and scaled so that each pair summed to the equal-energy whitepoint (X = Y = Z = 1). This produces the largest possible gamut consistent with that whitepoint. Notably, this is actually a different whitepoint than the whitepoint used by sRGB, P3, and Rec. 2020, which is why you will notice that their gamuts reach their top at a different place than the central axis in the visualization.

Visible Light Spectrum

Included is also a visible light spectrum. This, like the max gamut, is desaturated until made displayable, but it is quite “accurate” in the sense that it is equivalent to projecting a true rainbow on a gray surface. The underlying data is from the CIE 1931 2° XYZ color-matching functions (via cvrl.org). The values from this dataset define the XYZ values for each wavelength, and I just found the gray value and mixing coefficient which maximized its saturation in P3. By hovering over or clicking the spectrum you can see the matching chromaticities in the chromaticity diagram and the 3D point cloud.