RGB: The Primary Colors of Light Explained

Two Different Systems of Color

The confusion between RGB and RYB (red, yellow, blue) primaries comes from the fact that there are two fundamentally different systems of color mixing, and they have different primary colors:

• Additive color mixing (light): Red + Green + Blue = White. Used by screens, lights, projectors, and the human eye itself.
• Subtractive color mixing (pigment): Cyan + Magenta + Yellow = Black (in theory). Used by ink, paint, and physical pigments. The traditional art school primaries (red, yellow, blue) are an approximation of this system.

Screens use additive mixing because they emit light. Pixels have no light of their own — they start from black (no light) and add red, green, and blue to create every visible color. Paint and ink, by contrast, start from white (reflected light from the paper or canvas) and subtract wavelengths. The physics are fundamentally different, so the primary colors are different.

Why Red, Green, and Blue?

The choice of red, green, and blue as the primaries for additive color mixing is not arbitrary — it follows directly from the biology of human vision. The human retina contains three types of cone photoreceptors, each sensitive to a different range of wavelengths:

• L-cones (Long wavelength): Peak sensitivity around 564 nm — roughly red-orange
• M-cones (Medium wavelength): Peak sensitivity around 534 nm — roughly green
• S-cones (Short wavelength): Peak sensitivity around 420 nm — roughly blue-violet

Three cones, three primaries. RGB works for human vision because it stimulates each of the three cone types independently. By varying the intensity of red, green, and blue light, a screen can produce any color within a wide gamut — matching the mix of cone signals that a given color would produce in natural light.

The Color Triangle: The Gamut

Not all colors that the human eye can see can be reproduced by any given RGB system. The colors a display can produce form a triangular region on the CIE chromaticity diagram — a map of all visible colors. The three corners of the triangle are the display's red, green, and blue primaries; every color inside the triangle can be produced; colors outside it cannot.

Different display standards specify different primary colors — and therefore different gamuts:

• sRGB: The standard for most web content and consumer displays, covering approximately 35% of the visible color space
• Display P3: Used by Apple products and cinema monitors, covering about 45% of visible colors — notable for richer reds and greens
• Rec. 2020: The wide-gamut standard for 4K HDR content, covering about 75% of visible colors
• DCI-P3: Cinema projection standard, similar to Display P3

The distinction matters because a color that looks vivid on a Display P3 screen may appear washed out on an sRGB screen, and vice versa (colors outside sRGB gamut are clipped or compressed when displayed on sRGB devices).

James Clerk Maxwell and the First Color Photograph

The principle of RGB color mixing was established experimentally by James Clerk Maxwell in 1861. Maxwell photographed a tartan ribbon three times through red, green, and blue filters, then projected the three black-and-white photographs through the same filters and superimposed them on a screen. The result was the world's first color photograph — a demonstration that three primary colors of light could reproduce the full range of visible color.

Maxwell's demonstration predated any practical color photography technology by decades — the photographic emulsions of his time were not sensitive to red light, so the experiment worked partly by accident (infrared sensitivity in the red channel roughly compensated). The principle, however, was correct, and all modern color reproduction technology is built on it.

How an RGB Display Works

Modern LCD, OLED, and LED displays produce color by dividing each pixel into three sub-pixels — one red, one green, one blue. At normal viewing distance, the eye cannot resolve individual sub-pixels; instead, it perceives the blend of the three sub-pixel colors as a single color.

The intensity of each sub-pixel is controlled by the display driver, typically with 8 bits per channel — giving values from 0 to 255. This produces 256 × 256 × 256 = 16,777,216 possible colors per pixel. A display with 10 bits per channel produces over 1 billion colors, enabling smoother gradients without banding.

In CSS, the rgb() function maps directly to this system: rgb(255, 0, 0) is full red, no green, no blue. rgb(0, 255, 0) is full green. rgb(255, 255, 0) combines red and green to produce yellow. rgb(255, 255, 255) is full intensity on all three channels — white.

Why Green Contributes Most to Brightness

In the RGB system, the three primaries do not contribute equally to perceived brightness. The human eye's luminosity function — its sensitivity to light of different wavelengths — peaks in the green range (around 555 nm in daylight). This means green contributes more to perceived brightness than red or blue.

The precise contribution weights used in standard luminance calculations (as defined by the ITU-R BT.709 standard for HDTV) are:

• Red: 21.26% of luminance
• Green: 71.52% of luminance
• Blue: 7.22% of luminance

This is why grayscale conversions of images preserve the perceived brightness of the original — they use a weighted average of R, G, and B values rather than a simple equal-weight average. It is also why a pure blue at full intensity (rgb(0, 0, 255)) looks darker than a pure green at full intensity (rgb(0, 255, 0)) — even though both are at maximum saturation, the green carries far more luminance.

Generate colors →