Introduction to color theory

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

In 1801 Thomas Young, known to us mostly for his work on the interference of waves, proposed that the retina of the human visual system contains three "kinds of fibers", each sensitive to a different wavelength of light (Hecht 1930). His proposal, expanded in the 1860's by Hermann von Helmholtz and James Clerk Maxwell and experimentally verified in the 1980's by microspectrophotopic measurements of single eye cone cells (Dartnall 1983), is now called the "trichromatic theory of color vision", or simply "Young-Helmholtz theory". In these applets, we explore this theory, and we consider its implications for human perception, color photography, and computer display of color images.

Human sensitivity to color

The tristimulus sensitivity functions

The retina of the human visual system contains three types of cone cells. The sensitivity of each cell type to light varies across the visible spectrum. One of these types is most sensitive to long wavelengths (around 600nm). These wavelengths appear reddish to us, so cone cells of this type are collectively referred to as the rho receptor system ("rho" sounds like "red"). The sensitivity of the second type peaks in the medium wavelengths (around 550nm), which appear greenish, so it's called the gamma receptor, and the third type peaks in the short wavelengths (around 450nm), which appear blueish, so it's called the beta receptor.

If we plot the sensitivity of these three receptor systems as a function of wavelength, we obtain the graph labeled "tristimulus sensitivity functions" in the applet above. The X-axis on this graph represents wavelength in nanometers, from blue at the left end to red at the right. Beyond blue is ultraviolet, which humans can't see, although many other animals can. Beyond red is infrared, which again we can't see but some animals can (Land 2002). The Y-axis is called "relative sensitivity" because we've normalized the curves so their peaks reach the same height. In some books these graphs are normalized to enclose the same area, causing the beta (blue) curve to be drawn taller. In reality we're much less sensitive to blue than to green or red, so in other books the beta curve is drawn lower (Wyszecki 1982).

The rainbow you see after a storm is composed of concentric bands of color, ranging from purplish blue to deep red. Each band contains light of a single wavelength, ranging from 400 to 700 nanometers respectively. Try dragging the slider labeled "single wavelength". As you do so, you are essentially scrolling through the colors of the rainbow. Click on "show tic marks"; this displays the actual wavelength you've selected, in nanometers. At each wavelength, you can see how strongly it stimulates our rho, gamma, and beta receptors. If we march through the rainbow in order from 400nm to 700nm, writing down for each wavelength the rho, gamma, and beta values from these curves, we get a list of triplets of numbers. This list completely specifies the human visual system in tabular form.

Three-dimensional colorspace

Any time you have triplets of numbers, it's tempting to interpret them as X, Y, and Z coordinates of points in three-dimensional space. This is shown in the diagram at right (above). The three axes are rho, gamma, and beta. The XYZ location of a point in this space represents how strongly a particular colored object stimulates our rho, gamma, and beta receptor systems. For example, if a point lies on the rho axis, then its gamma and beta values must be zero. This corresponds to an object that stimulates only our rho receptor; deep red objects lie here. The origin of this three-dimensional space (where the three axes meet) is the point of zero response; wavelengths we can't see at all, like infrared, lie here.

Returning to the wavelength slider, each time you release it the current rho, gamma, and beta values from the curves are used as X, Y, and Z coordinates to draw a point in 3D colorspace. Now imagine proceeding through the wavelengths in order from blue to red, dropping points in 3D colorpsace. If you connect these points together, you trace out a curve. This curve is called the "locus of spectral colors", and it describes the response of the human visual system to every color in the rainbow. If you click and drag on the colorspace diagram, you can spin it around. This will help you understand the bizzare shape of this 3D curve.

Alternate visual systems

So far we've considered only humans with normal color vision. Since normal humans have three cone receptor systems, we're called "trichromats". What about color-blind people? The most common form of color blindness is deuteranopia, which afflicts 1% of all males and 0.1% of all females. (It's a sex-linked trait). Deuteranopes are missing the gamma receptor system. As a result, they tend to confuse red with green. Click on "Deuteranope" in the pull-down menu. Since these people have only two receptor systems, their colorspace is two-dimensional. For them the locus of spectral colors is flattened into a planar figure lying in the rho-beta plane.

Flipping back and forth between "Normal Human" and "Deuteranope", you can see that colors lying on any line in colorspace that is parallel to the gamma axis will project to a single point on the rho-beta plane for a deuteranope. Such colors, distinguishable to a person of normal vision, will be indistinguishable to a deuteranope. Such colors are called "metamers". Try clicking on the other (much rarer) forms of color blindness, "Protanope" and "Tritanope". Look also at the "Horse". Even healthy horses have only two cone receptor systems. Like a color-blind person, their colorspace is two-dimensional. Such animals are called dichromats.

Are there monochromats? Indeed there are - the horeshoe crab is an example. Having only one receptor system, the locus of spectral colors projects for them onto a single axis. This makes it impossible for them to distinguish all the colors of the rainbow. More importantly, if a stimulus becomes brighter the object that produced it may have gotten brighter, but it may instead have changed color to a wavelength to which the animal is more sensitive. The ability to distinguish changes in wavelength from changes in intensity is a good working definition for color vision. You can imagine the evolutionary advantage to an organism of being able to make this distinction.

The "visual system" of a digital camera

To see a really weird animal, click on the "Canon 30D". The sensor of this high-end consumer camera is covered with a mosaic of three types of colored filters. The relative transmissivities of these filters to light of various wavelengths is shown by the graphs. Look at the locus of spectral colors in the camera's 3D colorspace; it looks different than a human's. This suggests there are colors we can see that are indistinguishable to a Canon camera. It also suggests there are colors a Canon camera can distinguish that we cannot. However, these effects are likely to be subtle. Ideally, you want the transmissivity functions of the color filters in a camera to match the sensitivity functions of a human with normal vision, so that metamers to one system are also metamers to the other.

Design your own visual system

Click on one of the three "edit" buttons and start drawing over the corresponding sensitivity function. When you release the mouse, the locus of spectral colors will update to reflect the new visual system you've created. Try making one of the curves match another. What happens to the locus of spectral colors? Try making one of the curves a multiple of another, for example twice as sensitive at each wavelength. Now what happens to the locus? What is the dimensionality of colors this creature can see?

Lest you feel pity for creatures with fewer than three receptor systems, consider the Mallard Duck, which has five. This makes it a pentachromat. It's colorspace is five-dimensional. I don't know how to draw a 5D space, but if we could draw it, then turn off two of its receptor systems, we would see collections of points in 5D that each project to a single point in 3D. These collections correspond to colors that are distinguishable by Mallard Ducks but not to humans. This is the evolutionary advantage in having more receptor systems - the ability to distinguish more colors. What are these colors a duck can see that we can't? They're not the pure wavelengths; we can distinguish those fine with just three receptors, although they wouldn't look the same to us as they do to a duck. It's certain mixtures of pure wavelengths that we can't distinguish, but a duck can. Mixing of wavelengths is the subject of our next applet.

Primary colors and color mixing

Additive versus subtractive color mixing

While Thomas Young was the first to propose that the human eye contains three types of receptors, artists have known for centuries that most colors could be produced by mixing three primary colors. Certainly it was understood by Jakob Le Blon, who in 1721 developed a three-color printing process to make color book illustrations (Kemp 1990). The primary colors used by artists and publishers mix "subtractively", that is, each layer of dye absorbs some of the wavelengths of light falling on the canvas or paper, or striking one side of a piece of colored glass. The primary colors used in theatrical lighting, color television, and tapestry weaving on the other hand mix additively, by superimposing colored beams in the case of lighting, or placing colored objects close together in the case of weaving and the pixels of color televisions. In these technologies the light in each beam or the light leaving each thread converge simultaneously at the eye, independently stimulating the three receptor systems.

Let's put additive and subtractive color mixing on a slightly more mathematical footing. As Isaac Newton showed in his experimentum crucis (crucial experiment), a beam of sunlight is composed of roughly equal amounts of light of all wavelengths in the visible spectrum. Colored lights, by contrast, contain more or less of particular wavelengths. A plot giving the amount of light of each wavelength present in a light beam is called its spectral power distribution (SPD), or spectrum for short. In subtractive color mixing, to compute the SPD of light arriving at your eye after reflection from a colored surface (or transmission through a thickness of colored glass), you multiply at each wavelength the SPD of light falling on the surface by the reflectance (or transmittance) of the surface material at that wavelength. This yields a new SPD, which is what you see. In additive color mixing, to compute the SPD of light arriving at each spot on the eye's retina from a color display screen (or woven fabric), you add at each wavelength the SPDs of the light coming from each pixel or thread that are focused on that spot. If the spot is roughly the size of a cone cell, you don't see the individual threads, only the mixture color.

Additive mixing using pure-wavelength primaries

In this applet we consider only additive color mixing. The three sliders at left are positioned at three different wavelengths in the visible spectrum: 590 nanometers, 540 nanometers, and 445 nanometers. These will be our three primary colors. As we know from the first applet, we can look up the sensitivity of our rho, gamma, and beta receptor systems to these wavelengths, and we can plot them as points in 3D colorspace. If "show in locus" is checked, you can see these points. Spin the colorspace around to get a sense for where the points fall in 3D. Since each primary is a single wavelength, it represents a color in the rainbow, and indeed each point falls somewhere along the locus of spectral colors.

What happens if you turn the red primary to half-intensity, leaving the green and blue primaries dark? Psychophysical measurements show that if the intensity of a stimulus of a single wavelength is decreased, our response (at the retinal level) is reduced in proportion. For example, our response to a half-strength beam of the red primary would be a point halfway between the origin and the spectral locus, i.e. halfway along the straight red line on the diagram. Stated mathematically, this means our visual system obeys scaling.

Psychophysical measurements also show that our response (at the retinal level) to simultaneous stimulation by two lights of different wavelengths is the sum of our responses to the two lights considered separately. Thus, our response to stimulation by a half-strength red beam and a half-strength green beam can be computed by adding together the rho responses to each beam to obtain a composite rho response, and similarly for the gamma and beta responses. Stated mathematically, this means our visual system obeys superposition. Any system that obeys both scaling and superposition is called a linear system. Linearity means we can use vector addition to compute responses to mixtures of lights. Adding a vector that stretches from the origin halfway along the red line and a vector that stretches from the origin halfway along the green line yields, as you probably remember from high school, a point halfway between the endpoints of the (full-length) red and green lines.

Generalizing this principle, we can state that any fractional additive mixture of two primaries, i.e. a mixture whose total intensity is constant, will lie on a line connecting the endpoints of the two primaries. Extending this idea to three primaries, any fractional mixture of them will lie on a triangle connecting the endpoints of the three primaries. This triangle is called the gamut of reproducible colors for these particular primaries. Click on the "show gamut" button to view this triangle. Spin the colorspace around to get a sense of its shape.

The RGB cube and reference white

If you click on "scale primaries", you'll see an RGB cube appear in 3D colorspace. This cube represents the range of colors that can be produced using mixtures of the red, green, and blue primaries, where the mixture sums to 1.0. For this purpose, 1.0 along the red, green, or blue axes is defined as the point where each axis touches the spectral locus; higher values means more intensity. One corner of this cube is rooted at the origin. It is produced by setting red = green = blue = 0.0, and it will appear black. The opposite corner, denoted with a small black dot, is produced by setting red + green + blue = 1.0. If the primary scales at the left side of the applet are at their initial values of 1/3,1/3,1/3, then this dot will be at red = green = blue = 1/3. If you click on "show gamut", you'll notice that the black dot sits on the gamut triangle, and it coincides with a gray in the middle of the triangle.

Now pretend that this cube represents a color reproduction system, let's say a computer display with 8 bits for each of R, G, and B. In this case (R,G,B) = (0,0,0) will appear black, and (R,G,B) = (255,255,255) will appear gray. If the brightest R or G or B you can produce lies at the intersections of this cube with the red, green, and blue axes, respectively, e.g. (R,G,B) = (255,0,0) for the red axis, then you'll come to call (255,255,255) white rather than gray. In other words, grayness versus whiteness is relative to the brightness of your primaries; within the little world of your computer display's RGB cube, (255,255,255) represents your white point, a.k.a. reference white.

Now fiddle with the sliders. As you increase the scaling factor applied to one primary, the others decrease, so that their sum stays 1.0. This moves the black dot around on the color gamut. If you move it just slightly, you can make the RGB cube's (255,255,255) appear slightly reddish or slightly blueish. What you are doing is changing the reference white of your make-pretend computer display. If you own an old-style television set, you can think of these sliders as lying behind the flip-up door you're never supposed to open. If you own a modern LCD, the reference white is set for you by the manufacturer, typically to a slightly blueish-white called D6500. This is the color given off by a black body radiator heated to 6500 degrees Kelvin. You can sometimes change this reference white by fiddling with menus provided by the LCD manufacturer, but you're asking for trouble later on - your colors won't match the rest of the world. By the way, although our applet won't let you do it, you might also imagine increasing all three scaling parameters at once. If you increase them in proportion, e.g. multiply each by 120%, what you've done is make your RGB cube bigger. Doing so makes your computer display brighter without changing the "chromaticity" of its white point.

As you make the transition from this applet, in which features are visualized in rho-gamma-beta space, to the next applet, in which which features are visualized relative to an RGB cube, keep in mind that this is the cube we'll be talking about, and there is a hidden set of scaling parameters that must be adjusted before using the RGB cube.

The trichromatic matching functions

In a separate applet, we explore Maxwell's trichromatic matching experiment. That experiment shows that for a given choice of three primaries, one can record the amount of each primary required to visually match each color in the rainbow. This record can be plotted as three curves, shown above in the graph labeled "trichromatic matching functions". Unfortunately, as Maxwell discovered it is not possible using three pure-wavelength primaries to successfully match every color in the rainbow. Whenever it proved impossible (which was most of the time), he allowed that rainbow color to be desaturated by adding a bit of one of the primaries to it. He recorded this "cheating" as a negative value of the corresponding matching function.

If you've having trouble making sense of these matching functions, and understanding how they relate to the sensitivity functions, here's another way to think about it. We said earlier that the XYZ coordinates of each point on the locus of spectral colors, or more accurately, their coordinates relative to the rho, gamma, and beta axes of 3D colorspace, are given by the rho, gamma, and beta sensitivity functions. Now click on "show in locus", and use your fingers to block out the rho, gamma, and beta axes. What you're looking at now is a 3D colorspace whose axes are the lines defining the currently chosen red, green, and blue primaries. One could easily define the XYZ coordinates of each point on the locus of spectral colors relative to these axes, i.e. a certain distance along the red primary, followed by distances along the green and blue primaries. These distances given by the red, green, and blue matching functions!

Stated mathematically, we say that the locus of spectral colors is a curve in 3D space, whose shape can be defined using a parametric equation having a single parameter lambda (wavelength), which gives position along the curve. If the axes of the space are taken to be rho, gamma, and beta, then the shape of this curve is specified by three coordinate functions (rho(lambda), gamma(lambda),and beta(lambda)). These are the sensitivity functions. Alternatively, if the axes of the space are taken to be red, green, and blue for three chosen primaries, then the shape of the curve is equally well specified by three coordinate functions (red(lambda), green(lambda),and blue(lambda)). These are the matching functions for these primaries.

Once you understand this principle, there are some cool insights waiting for you. Spin the 3D colorspace diagram until the lines denoting the red and blue primaries line up (or fall atop one another). Note how the locus bows out to the left (between 600 and 650 nanometers if you've checked "show tic marks"). This bowing represents negative values of the green primary. Looking at the matching functions, you can see how the green matching function goes negative in exactly this part of the rainbow! Try the same thing for the green and blue axes; can you find the cause of the big negative-going lobe of the red matching function? The blue matching function goes negative as well, but just barely; it's hard to see in this applet.

Alternative primaries and gamuts

Moving the primaries around

Do the three primaries need to be the particular wavelengths we've chosen? Not at all. Use the sliders to change the wavelengths of the primaries and watch what happens to the gamut. In particular, if you make the primaries too close together in wavelength, the gamut gets rather small. You'll never be able to reproduce a Marc Chagall with that gamut. (His paintings are known for their saturated, prismatic colors.)

On the other hand, no matter how carefully you choose the primaries, there are colors on the locus you can't reproduce. For example, starting from the Reset position, and with "show gamut" checked, you can see that the purest yellow on the triangle isn't nearly as pure (i.e. as saturated) as the yellow nearby on the locus of spectral colors.

Adding more primaries

Given that there are always colors we can't reach using three primaries, would it help to add more primaries? You bet! Starting from the Reset position, and with "show tic marks" checked, if you were to add a primary at 565nm, mixtures of it and the red primary (at 590nm) would let you reproduce the pure yellow you couldn't reach with the initial three primaries, as well as some splendid saturated oranges. While color mixing for printing works a bit differently than we show here, the same principle holds; adding a fourth ink gives the printmaker access to an infinitude of new colors similar to the additional ink.

Keep in mind that adding a fourth primary doesn't make you a tetrachromat. The new colors reside in the same 3D colorspace as the old colors; it just gives you access to more, typically highly saturated, colors. (The applets on this web page don't give you the ability to add more primaries, but click here for applet that does.)

Primaries that aren't pure wavelengths

So far we've considered only primaries that are pure wavelengths, i.e. colors from the rainbow. The spectral power distribution of a pure-wavelength primary is a spike at one wavelength, as shown diagrammatically in the bottommost graph in the applet above. In practice single-wavelength primaries are hard to create. Except for lasers, light sources seldom contain only a single wavelength; most are mixtures of many wavelengths. The same is true of the reflectance spectra of dyes and the transmission spectra of colored glass (or color filters); they reflect (or transmit) multiple wavelengths. We learned in the second applet how to mix wavelengths, at least for light, by adding vectors in 3D colorspace. We also know that doing so produces points not lying on the spectral locus. These points correspond to colors that appear slightly desaturated, i.e. washed out.

To create a primary by mixing several wavelengths, click on one of "edit R", "edit G", or "edit B", then start drawing on the corresponding spectral power distribution. Create a hump that is centered around the position of the original spike. When you release the mouse, our applet computes the human (or horse, or camera) response to this primary by multiplying the amount of light present in the hump at each wavelength by the rho, gamma, and beta sensitivities to that wavelength, adding the resulting vectors together at discussed earlier, and plotting the resulting point in 3D colorspace. Invariably, the new primary will not lie on the spectral locus, but will instead fall short of it. As a result, it will be less saturated than the original, single-wavelength primary. (Look at the color of the dot.) Repeat this procedure for the green and blue primaries. Now click on "show gamut". Look how much smaller it is than it was before! And look how much less saturated are the colors on it!

As you edit the primaries, note that the matching functions change. Remember what these functions mean - they give the 3D coordinates of the locus of spectral colors relative to your chosen primaries. If you move the primaries around, it stands to reason that these coordinate functions will also change.

As a last hurrah, pull down the "select primaries" menu and choose "XYZ primaries". Note that the matching functions change, becoming the CIE standard matching functions, as discussed in this applet. Note also that the X, Y, and Z axes have been drawn in 3D colorspace, using red, green and blue lines, respectively. Spin the diagram around and examine where these axes fall. (The Z axis almost coincides with the gamma axis, so it is barely visible.) Note that the X and Y axes do not fall in the all-positive octant of rho-gamma-beta space. Since negative responses of these receptors is impossible, these are not physically realizable primaries. In other words, you can't make lights of X, Y, or Z. Thus, the spectral power distribution plots have disappeared from the applet. However, its a valid set of axes for colorspace, and it's a standard set, which does not depend on any particular choice of primaries. This makes it a convenient space for specifying the coordinates of colors and the shape of the locus of spectral colors. This is the subject of the next applet.


Questions or Comments? Please e-mail us.
© 2010; Marc Levoy
Last update: February 29, 2012 10:59:46 PM
Return to index of applets