Colors Your Monitor Can't Produce

Background:

Light varies in intensity (the number of photons arriving per unit time) and wavelength (the amount of energy carried by each photon). We perceive light intensity as the brightness of colors, and wavelength as the hue. We also perceive saturation, the range of intensities present. Low saturation colors, like white, gray, and black, have roughly equal intensities at all wavelengths, while highly saturated colors like red, green, or blue are very intense at one wavelength and very weak at all others.

Humans have 3 types of light detectors in their eyes (well, 4 actually, but one of them only works in low-intensity light). The signals the detectors send vary with the intensity and wavelength of light received, and each type of detector responds most strongly to a different wavelength. The peak sensitivities are (roughly) violet, green, and yellow. (Plus cyan for the low-light detector, which gives you the wonderful range of blues you see in the sky just after sunset.)

Computer screens produce colors by mixing different intensities of three wavelengths of light (red, green, and blue) in a deliberate attempt to stimulate the three types of color detector in the human eye. This system was originally developed in the early 1950s for color television, before the exact peaks of color sensitivity were known, but the choice of colors evenly distributed through the visible wavelengths has worked pretty well.

Pretty Colors:

On computers, colors are almost always stored in RGB format: three numbers giving the intensity of red, green, and blue light, in that order. You can visualize this by putting the three numbers on perpendicular axes, giving you a cube of color with black at the origin (zero intensity for all three) and white at the opposite corner (100% intensity for all three). Red, green, and blue appear on the corners nearest the origin, and the mixtures of two colors (yellow, cyan, and magenta) appear on the other three corners. Here are slices of the cube showing the green and red axes at 0%, 50%, and 100% blue:



Animations of every image here are available. It's quite helpful to watch them at the appropriate points. Download all the animations: 4.5MB zip (Yahoo is messing with the link based on referrer. Try removing '.share' from the URL after you click the link.)

The diagonal line between black and white passes through all the shades of gray; that is, all the colors with equal amounts of red, green, and blue. Brightness increases steadily from black to white. Here are slices through the color cube, perpendicular to the brightness line, at 33%, 50%, and 66%:



Note that the centers of all those images are gray. As distance from the center increases, the saturation of the colors increases. The hue varies with the angle from the center. With a little work, a diagram with hue, saturation, and brightness on the three axes can be generated. Here are images with hue on the x axis, saturation on the y axis, and brightness at 33%, 50%, and 66%:



This makes it absolutely clear that at any given brightness, there are a lot of high saturation colors your screen can't produce. This is a direct consequence of producing color by mixing three wavelengths, rather than varying the wavelength directly. For example, at anything other than 33% brightness, it's impossible to produce a 100% saturated red. There's a bird called a Scarlet Tanager, which I've seen in real life, and despite the apparent brilliance of those images, they don't do justice to the real thing. It's literally impossible to reproduce the brightness of its plumage on a computer or television screen. (Paintings and non-digital photographs are another matter. Also, most printers produce a different range of colors than your monitor.)

Here are images with hue on the x axis, brightness on the y axis, and saturation set to 0%, 16%, 33%, 50%, 66%, and 83%:



Again, it's clear there are a lot of colors your screen can't reproduce. As saturation increases, the range of brightnesses contracts. It's impossible to create very bright or very dark yet highly saturated colors. At 100% saturation, only six colors are available: red, yellow, green, cyan, blue, and magenta. At the halfway points between these colors, only ~87% saturation is possible. Incidentally, the names I've been using for the halfway colors are orange, lime green, sea green, sky blue, purple, and hot pink. I'm not aware of any official names for these colors. (Edit: see comment #1) Here are images of all 12 hues with saturation on the x axis and brightness on the y axis:

Programmers, Pay Attention:

Several programming languages have libraries for converting RGB colors to HSB (Hue Saturation Brightness). (E.g., Java's Color class has methods for this.) HSB colors use a distortion of the simple system demonstrated above to make it seem as though all possible combinations of hue, saturation, and brightness are available. It's a relatively minor distortion (effectively, the triangles shown on the hue images above are all straightened out to the same shape), but a distortion nonetheless. Here's the full range of hue generated with Java's HSB library at maximum saturation and brightness:



Here's the full range of hue with truly invariant saturation and brightness:



Distinct bands of color are prominent in the 1st version, and although subdued, are also present in the 2nd version. This is a direct result of our perceptual system: we automatically "chunk" color into discrete categories. For this reason, it's inadvisable to use hue to represent continuous variables. For example, if you use hue to represent height on a topographic map, people viewing the map will misinterpret the heights. The yellow, cyan, and magenta regions will be percieved as steeper than intended, and the red, green, and blue regions will seem too flat. Instead of hue, try using brightness and/or saturation for continuous variables, since our eyes don't chunk them. For a topographic map, greyscale or a single hue varying in saturation can work well.

Fun With Genetics:

Each of the color detectors in our eyes uses a single photoreceptor protein, each of which is coded for by a single gene. However, since we have two copies of all our genes, some people have a mutant version of one of their photoreceptor proteins which gives them, in effect, a fourth kind of color detector. Such people are said to have tetrachromatic vision, and can distinguish many more colors than you or I. Unfortunately, two of the three photoreceptor genes (red/yellow and green) are on the X chromosome, which means men don't have a second copy! Because of this, women are much more likely to be tetrachromatic, and men are much more likely to have color-blindness in the red to green range. Color blindness happens when a mutation to a photoreceptor gene renders the corresponding color detector inoperative or causes its peak sensitivity to overlap with one of the other detectors. Women who get one copy of a broken photoreceptor can get by with a working second copy, but men only have a backup for their blue/violet receptor. This is the reason male red/green color-blindness is so much more common than blue/yellow color-blindness.