Color Theory

Color physics

How light becomes color, from electromagnetic radiation to the spectrum your eyes perceive.

You don't need to understand the physics of color to use color effectively in design. But knowing how color actually works — what it is physically, why we see it the way we do, and where the color wheel comes from — gives you a foundation that makes everything else in color theory click. This page covers the essentials without going deeper than is useful.

What is color?

Color is how our brain interprets electromagnetic radiation within a narrow band of wavelengths. Light is energy traveling in waves, and different wavelengths produce different colors. The range visible to the human eye spans roughly 380 to 700 nanometers — a tiny slice of the full electromagnetic spectrum, which extends from radio waves to gamma rays.

Everything below about 380nm is ultraviolet — invisible to us but visible to some insects. Everything above about 700nm is infrared — we can't see it, but we feel it as heat.

Within that visible window, shorter wavelengths appear violet and blue, middle wavelengths appear green and yellow, and longer wavelengths appear orange and red. When all visible wavelengths reach your eye at once, you see white. A broad, balanced mixture of visible wavelengths is generally perceived as white. When little or no visible light reaches the eye, we perceive black.

The visible spectrum

You see the visible spectrum every time you see a rainbow — white light separated into its component wavelengths by water droplets acting as prisms. Newton was the first to systematically describe this separation, dividing the spectrum into seven bands. Some historians believe he included indigo specifically to create seven divisions, matching the seven notes in a musical scale.

380 nm — Violet Blue Green Yellow Orange Red — 700 nm

The approximate wavelength ranges for each band:

Color	Wavelength (nm)
Red	620 – 700
Orange	590 – 620
Yellow	550 – 590
Green	495 – 550
Blue	460 – 495
Indigo	430 – 460
Violet	380 – 430

These boundaries are approximate — the spectrum is continuous, not divided into sharp steps. Colors blend smoothly from one wavelength to the next, and where you draw the line between "blue" and "green" is partly subjective.
Each color in the spectrum can vary in saturation and lightness. Accounting for all these variations, the human eye can distinguish an estimated 10 million different colors.

How we see color

The retina contains two types of light-sensitive cells: rods and cones. Rods handle low-light vision and see no color — only brightness. Cones handle color vision and come in three types, each sensitive to a different range of wavelengths:

L-cones (long wavelength) — most sensitive to red-orange light
M-cones (medium wavelength) — most sensitive to green light
S-cones (short wavelength) — most sensitive to blue-violet light

Your brain interprets color by comparing the signals from all three cone types. When an object reflects 600nm light, your L-cones fire strongly, your M-cones fire moderately, and your S-cones barely respond — your brain reads this pattern as "orange."

This three-receptor system is why screens can reproduce millions of colors using just red, green, and blue light. By varying the intensity of three primaries that roughly match the sensitivity peaks of your three cone types, a screen can trigger the same neural response as almost any real-world color.

It's also why color blindness occurs. If one cone type is absent or shifted in its sensitivity range, certain color distinctions become invisible. The most common forms — protanopia and deuteranopia — affect the L and M cones respectively, making it difficult to distinguish red from green.

Additive vs. subtractive color

This is where color can get confusing, because the primary colors you learned in school aren't the primary colors your screen uses, and neither set is wrong.

Additive color (light): When you mix light, colors get brighter. Your screen creates color by emitting red, green, and blue light from tiny close-packed sources. When all three shine at full intensity, you see white. When all three are off, you see black. Red + green = yellow. Green + blue = cyan. Red + blue = magenta. This is the RGB system — every hex code and CSS color value you write is based on it.

If you look very closely at a screen (a magnifying glass on an old monitor makes this dramatic), you can see the individual red, green, and blue subpixels. Your eye blends them at normal viewing distance, the same way it blends the dots in a pointillist painting.

Subtractive color (pigment/ink): When you mix pigments, colors get darker. A printed page doesn't emit light — it reflects ambient light, and the ink absorbs (subtracts) certain wavelengths before the rest reaches your eye. The primary colors in this system are cyan, magenta, and yellow (CMY). Mix all three at full strength and you get black — or close to it, which is why printers add a dedicated black ink (K), giving us CMYK.

Cyan ink absorbs red light and reflects green and blue. Magenta absorbs green and reflects red and blue. Yellow absorbs blue and reflects red and green. Each ink removes one additive primary from the reflected light.

Why both systems work. The additive and subtractive primaries are actually mirrors of each other. The additive secondaries (cyan, magenta, yellow) are the subtractive primaries, and vice versa. The color relationships on the wheel — complementary, analogous, triadic, hold true in both systems. The theory is the same; only the medium changes.

What this means for web design: On the web, you're always working in additive color (RGB). But if you design anything that will be printed — business cards, brochures, packaging — the colors will shift when converted to CMYK, because the printable color gamut is smaller than what a screen can display. Vivid blues and greens are particularly affected. Always proof printed work in CMYK before finalizing.

Additive (RGB) — light mixes to white

Subtractive (CMY) — pigment/ink mixes to black

The color wheel

The visible spectrum is linear — violet at one end, red at the other. The color wheel is what you get when you bend that line into a circle, connecting the red and violet ends. This connection isn't arbitrary — mixing red and violet light produces magenta, a color that doesn't exist as a single wavelength in the spectrum but that our eyes perceive as a distinct hue. Magenta fills the gap and completes the circle.

The color wheel is the foundation of color theory because it makes the relationships between colors visible and predictable. Complementary colors sit opposite each other. Analogous colors sit beside each other. Triadic harmonies form equilateral triangles. None of these relationships are obvious in a linear spectrum — they only emerge when the spectrum becomes a circle.

Explore the Color Wheel

Learn How Colors Combine

The color wheel — the visible spectrum joined end to end