Primary Colors, Part 1: Additive Color Mixing

The primary colors of light are red, green, and blueRGBand these three colors can be combined to make other colors, such as the secondary colorscyan (blue + green), magenta (red + blue), and yellow (red + green); this is the concept underlying how computer displays and televisions produce color. But exactly how does mixing a red light with a green light make yellow light? Before we can really understand how color mixing works, we need to review some basics of light and vision.

Visible light

The human eye can detect light from the portion of the electromagnetic spectrum known as the visible spectrum. This spectrum ranges from shorter wavelengths (400 nm) corresponding to the color blue to longer wavelengths (700 nm) corresponding to the color red.

If we were to examine the frequency spectrum of light of a single color (a so-called “pure tone”), we would see frequency content only at the location corresponding to the frequency of that color, and no frequency content anywhere else. For example, a red light would appear as a spike at about 400 THz, and a green light would appear as a spike at about 600 THz.

Red-YellowGreen-Blue_LED_spectra
Some types of color displays, such as flat-panel televisions, use a grid of colored LEDs to create colored images. This figure shows the spectral curves for blue, yellow-green, and high-brightness red solid-state semiconductor LEDs. Because these are real, non-ideal devices, the curves are not perfect impulses, but are still quite narrow. [reference]
We know that mixing red and green gives yellow. Yet we also know that adding two impulses in the frequency domain is NOT going to result in a single impulse at a different frequency; it will result in the same two impulses at 400 THz and 600 THz. So even though the resulting light appears yellow to us, there is actually no signal power at the frequency corresponding to yellow light! There must be something else at play here….

Perceived colors

It turns out that there is a difference between “spectral colors” and “perceived colors”. A spectral color is a light of a pure tone, like a 500-THz yellow. A perceived color is a color that humans “see” when two or more spectral components are mixed together, like the yellow that humans perceive when red and green light is mixed together.

The CIE chromaticity diagram (shown below [reference]) is a useful tool for visualizing the gamut that most humans are able to perceive. The outline of the horseshoe corresponds to spectral colors. The triangle in the center represents the RGB gamut: each vertex represents one color channel, and all the colors inside the triangle can be created by combining these three colors in various proportions. (Observe that, since the RGB components used in color displays are created by non-ideal devices like LEDs, which do not produce pure spectral colors, the vertices of the triangle are not located on the horseshoe outline.)

The CIE color space is parameterized by chromaticity values ‘x’ and ‘y’ (the grid axes), plus a luminance value ‘L’ (not shown). Without going into too much detail, it suffices to say that these three quantities are analogous to three important quantities seen in the human visual system. More on this shortly.

Color vision in humans

The human eye has three types of cone cells (S, M, and L), which act as540px-Cone-fundamentals-with-srgb-spectrum.svg color receptors. Each cell type is “tuned” to a different frequency, meaning that the cell responds maximally to stimuli of that frequency (its “preferred stimulus”). S cells get excited by light of short wavelengths, M cells by medium, and L cells by long. But these tuning curves are quite broad and significantly overlap. As a result, there will be redundant information encoded by each cell type for a given stimulus.

For efficiency reasons (probably), the next layer of neurons removes redundancy by performing these computations: (1) S+M+L; (2) L-M (3) S-(M+L). The resulting signals correspond to (1) luminance (brightness); (2) red vs. green; and (3) blue vs. yellow. Let’s refer to these basis signals as X, Y, and Z. The strength of each signal in the brain will be a function of the input stimulus (what the eye sees). Let’s refer to the strengths as a, b, and c. Finally, let us define the percept (or perceived color) as a scaled sum of the three basis signals: aX + bY + cZ.

These three signals are the quantities to which the three parameters of the CIE colorspace are analogous. When we mix R, G, and B channels in various proportions (strengths), or when we choose x, y, and L from the CIE colorspace to create a color, we are essentially inducing aX + bY + cZ to create a color percept in the brain. Voila!

(Side note: This is one equation with three unknowns—a, b, and c. This implies that there are infinitely many ways to construct a given color percept from these three signals. This idea is consistent with the CIE diagram: Imagine drawing two lines in the gamut that intersect. The color at the point of intersection can be created by mixing the colors at the endpoints of either line. Now extend the case to infinitely many lines intersecting at the same point.)

I hope that this post has shed some light, so to speak, on what happens when colored lights are mixed (“additive” color mixing). But why are the primary colors different in art class? We will answer this question in the next post, when we explore how “subtractive” color mixing works.

And for dessert, some eye candy

1Mcolors
This image (when viewed in full size, 1000 pixels wide) contains 1 million pixels, each of a different color. The human eye can distinguish about 10 million different colors. [reference]