Chromaticity diagrams

Applet: Katie Dektar
Text: Marc Levoy
Technical assistance: Andrew Adams

In the preceeding applet, we introduced color theory and 3D colorspace. While 3D colorspace is a complete and mathematically satisfying way to look at colors, primaries, and color mixing, as a formalism it leaves artists and colorists a bit cold. While we could force car designers to specify the color of a body paint using RGB coordinates, they would prefer to factor out its total reflectance, a.k.a. albedo, lightness, brightness, or value. For example, if a photographer turns up the voltage on a pro-quality colored spotlight, its color shouldn't change, only its brightness. (Actually, its color usually does change, and the photographer has to compensate for this.) Since we're removing one variable (value) from a 3D coordinate system, this leaves two variables. These are most commonly factored into hue, i.e. position on the rainbow, and saturation, i.e. purity, or distance from gray. Together, these two variables are sometimes called chroma. In this applet, we consider two particular two-variable color specification systems for chroma, called the RGB chromaticity diagram and the XYZ chromaticity diagram.

The RGB chromaticity diagram

In the preceeding applet, we asked you to imagine 3D colorspace without the rho, gamma, and beta axes, and to consider the relationship of the locus of spectral colors to the red, green, and blue axes for a particular choice of primaries. Here we make it easy for you; we've removed the rho, gamma, and beta axes, we've made the other three axes more prominant, and we've labeled them R, G, and B. We're using the same primaries as before (notice that the matching functions look the same), so if you spin this space to the right orientation, you can see that the locus looks the same as in the first applet.

This rendition of 3D colorspace is sometimes called RGB space or the RGB cube. It's a convenient space for computer graphics programmers, because in this space the purest green a graphics card can produce is denoted (0,1,0), i.e. a point one unit out along the green axis. Similarly, deepest black (0,0,0) is at the origin, and brightest white (1,1,1) is at the 3D diagonally opposite corner of the unit cube (going out one unit along each of the three axes). Actually, there is no such thing as "brightest white"; there is only reference white, which must be chosen when you set up your computer display. See the section labeled "the RGB cube and reference white" in the preceeding applet.

In RGB space the brightness of a color is evidentially related to its distance from the origin. Since there is no guarantee that such a distance is perceptually meaningful (how do you compare the brightness of a certain red to the brightness of a certain green?), the expedient is taken of projecting all colors onto the plane that bisects the cube, halfway between black and white. Click on the leftmost "Project" button to watch how this projection affects the locus of spectral colors. Note that some of the colors on the locus move inward to reach this plane and some move outward. The new locus shape is now planar, as you can see by spinning the colorspace around. Mathematically, given the RGB coordinates of a color, its (r,g) coordinates can be computed as (R/(R+G+B),G/(R+G+B)). In words, these divisions perform the projection of points in RGB space onto the R+G+B=1 plane, where the point of projection is the origin.

Since all colors now lie on a plane, we can denote their position on that plane using two coordinates, rather than the original three. By convention, it has been agreed to define the origin of this 2D plane at the B=1 point in the original 3D space, from which two axes extend towards the R=1 and G=1 points. The names of these two new axes are r and g, respectively. If the "Project" box is checked, you can see the r and g axes labeled on the diagram. To help you make sense of this new coordinate system, click on the "Align" button. The diagram will re-orient itself until the r and g axes look like X and Y axes. This new colorspace, which is clearly only two-dimensional, is called the RGB chromaticity diagram. Fully saturated hues lie along the spectral locus, and desaturated colors lie inside the locus, with the zero-saturation point located at the white dot, whose coordinates are (r,g) = (1/3,1/3). Brightness is not represented at all, so this point is called the neutral point, not black or white or gray.

The XYZ chromaticity diagram

As a useful representation of chroma the RGB chromaticity diagram has two flaws. First, most colors along the locus of spectral colors require negative values of r and g to specify. Second and more important, the shape of the locus (and the positions of all the colors inside it) depends on the particular choice of primaries; change these primaries and the r,g coordinates change.

To address these problems, the International Committee on Illumination (CIE) defined in 1931 a set of three primaries they called X, Y, and Z. As we know from the preceeding applet, for the purposes of the human visual system a primary consists of an axis in rho-gamma-beta space. Moreover, once an axis is defined, the coordinates of the spectral locus relative to that axis constitute a matching function. The CIE defined three axes, leading immediately to three matching functions. The diagrams at right show the matching functions of this so-called CIE 1931 XYZ colorspace, or simply XYZ space.

If you spin around the XYZ 3D colorspace, you can see that it looks quite different than the RGB colorspace. Most importantly, the locus of spectral colors sits entirely inside the all-positive octant of the XYZ axes, whereas in RGB space the locus hung out over the axes. Looking at the two sets of matching functions, you can see that the XYZ matching functions are entirely positive, whereas the RGB matching functions include negative values. If you've been following the discussion so far, you'll appreciate that the two foregoing sentences are two ways of stating the same fact.

Like RGB space, XYZ space has an associated XYZ cube. As before, it would be nice to factor brightness out of the colors in this cube. The obvious way to do this is to project all colors onto the X+Y+Z=1 plane, as before. Click the "Project" button to do this. Note the two new axes, x and y. Now click the "Align" button. The resulting representation is called the XYZ chromaticity diagram. This time, the locus of spectral colors falls entirely within the diagram. Once again, fully saturated hues lie along the locus, and the neutral point (white dot) is at (x,y) = (1/3,1/3). The XYZ chromaticity diagram is a standard colorspace, independent of any choice of primaries, in which the color of any object or light can be specified, independent of its total reflectance or brightness. This standardization allows colorists in different industries to talk precisely to each other about colors, for example to manufacture dishware whose color matches a tablecloth. It also allows the manufacturers of cameras, printers, and displays to talk in common terms about the range of chromaticities their device can reproduce. This range, called the device's gamut, is discussed in the next applet.

In closing, one question you might be wondering about is: how were the X, Y, and Z axes chosen? They were clearly chosen to ensure that the spectral locus fell into the all-positive octant of XYZ colorspace. Beyond this, the answer is complicated and beyond the scope of this applet; the interested reader is referred to (Wyszecki 1982). You might also ask: what do the XYZ primaries look like? What are their spectral power distributions? The answer to this question is simpler; they aren't physically realizable primaries; you can't make a light of X, or Y, or Z. If you took the time to edit the R, G, and B primaries in the preceeding applet, you'll appreciate that no matter how complicated the spectral power distribution of a primary might be, it eventually boils down to an axis in rho-gamma-beta space. In fact, there might be many SPDs that map to the same axis; these SPDs are by definition metamers. Once the axis is defined, it in turn uniquely defines a set of matching functions. Thus, to position an axis in 3D colorspace, it suffices to give its matching functions; there is no need to specify a spectral power distribution. In fact, for the case of the XYZ axes, any SPD would need to contain negative values, which would require negative light, which is physically impossible.


Questions or Comments? Please e-mail us.
© 2010; Marc Levoy
Last update: June 8, 2010 11:19:55 PM
Return to index of applets