Color theory: the wheel, the attributes, the models

Color theory sounds either pretentious or vague. It’s neither. It’s a small, stable set of ideas that survived three centuries of refinement and still underpins every color tool you use today, including this site.

The whole field reduces to a handful of real ideas: a wheel, three attributes, two mixing models. The rest is decoration, marketing, or someone selling a course. Here’s the canonical version: the names that actually matter, and the parts that don’t.

The color wheel

The wheel started with Newton. In Opticks (1704), and in his earlier 1672 letter to the Royal Society, he showed that white light is a mixture of all visible wavelengths: pass sunlight through a prism, a rainbow comes out. He arranged those spectrum colors in a circle, closing the loop between red and violet through the non-spectral purples: colors the eye perceives but no single wavelength produces. That seven-sector circle is the ancestor of every color wheel since.

Goethe published a more painterly wheel in 1810 (Zur Farbenlehre); Johannes Itten produced the canonical 12-color wheel in 1961 (The Art of Color): primaries at the points of an inner triangle, secondaries at the points of an outer triangle, tertiaries between them. The harmonies live as inscribed shapes inside the wheel: a line for complementaries, an equilateral triangle for triadics, a square for tetradics. That 12-color structure is still what you’ll see in Figma’s color picker, in this site’s harmony rotations, and on every Pantone classroom poster.

What the wheel does: encode the cyclic relationships between hues. Two hues 180° apart are complementary (maximum visual contrast); 120° apart are triadic; 30° apart are analogous and feel related. These angles are the actionable part of color theory.

What the wheel doesn’t do: tell you anything about how dark or how saturated a color is. The wheel is one-dimensional, encoding only hue. Real color has two more axes, which is where the attribute model below comes in.

Hue, value, chroma: the three attributes

Albert Munsell published A Color Notationin 1905 and introduced what’s still the most usable description of any color: three attributes, each independent of the others.

• Hue: which color it is. Position on the wheel, measured in degrees (0° red, 60° yellow, 120° green, and so on).
• Value: how light or dark it is, regardless of color. A pale yellow has high value; a navy has low value. Munsell measured value 0 (black) to 10 (white).
• Chroma: how intense or pure the color is, away from gray. A neon orange has high chroma; a beige has low chroma. Two colors can share a hue and a value but feel completely different at different chromas.

These three names persist in modern color science. CIE L*a*b* uses L* (lightness) plus two chromatic axes: a* (green↔red), b* (blue↔yellow). HSL uses Hue/Saturation/Lightness (with the lying-L issue covered in OKLCH vs HSL vs hex). OKLCH uses Lightness/Chroma/Hue directly. Every modern color space is a different parameterization of Munsell’s triad, sometimes with better perceptual uniformity than the original, but always with the same three axes.

A note on vocabulary: saturation and chroma get used interchangeably in design tools and software. In formal colorimetry (CIE 015:2018) they aren’t the same thing. Chroma is colorfulness as an absolute property of a stimulus; saturation is colorfulness relative tothe stimulus’s own brightness. For practical work the imprecision is harmless. Treat them as synonyms unless you’re doing academic colorimetry or paint mixing.

How the eye sees color

The wheel and the attributes describe color as a system. This is what color actually is to your visual system. Two facts of human biology are load-bearing for everything else, and most discussions of color theory skip them.

Trichromatic vision.Your retina has three types of cone photoreceptors (labeled L, M, and S), each tuned to a different wavelength range (peak sensitivities at roughly 564, 534, and 420 nanometers, corresponding loosely to red, green, and blue light). Every color you perceive starts as the relative activation of these three cones. This is why screens use three primaries: matching three cone responses is sufficient to reproduce any color a healthy human eye can see. It’s also why color blindness exists. Most forms are a missing or shifted cone type, collapsing one of the three dimensions.

Opponent-process processing.But the brain doesn’t experience color as raw cone activations. Ewald Hering proposed in 1892, and Hurvich and Jameson formalized in 1957, that the visual cortex re-encodes the cone signals into three opponent axes: red↔green, blue↔yellow, and light↔dark. You can perceive a yellowish red (“orange”) or a yellowish green (“chartreuse”), but you cannot perceive a reddish green or a yellowish blue. The opponent encoding rules them out. This is why CIE Lab uses two chromatic axes (a*↔b*) and OKLCH inherits them: they’re modeling the brain’s actual representation, not the retina’s. It’s also why true complementaries (red/green, blue/yellow) feel the most jarring next to each other: they max out the brain’s opponent encoding in opposite directions at once.

Two phenomena fall out of this for designers:

• Color constancy.A banana looks yellow under sunlight, fluorescent light, and warm tungsten. The wavelengths reflecting off it are dramatically different in each case; your brain corrects for the illumination and reports “yellow” anyway. This is why white balance in photography exists, why monitors profile their white point, and why colors look subtly off when you walk from a daylight-balanced room into one lit by warm bulbs. The brain’s correction can’t fully keep up with the change.
• Simultaneous contrast.A neutral gray patch reads slightly orange against a blue background and slightly blue against an orange one. The visual system enhances differences along the opponent axes. This is the mechanism behind Albers’s Interaction of Color. It’s why a yellow lamp produces shadows that look distinctly purple, why your brand color shifts identity in different rooms, and why two monitors calibrated to the same white can still display the same image perceptibly differently.

These are not metaphors or designer maxims. They’re documented in the visual cortex. Every color decision you make is filtered through them, which is why the wheel and attributes alone aren’t sufficient. Without the perceptual layer you can’t explain why Albers’s identical squares look different against different backgrounds, why a hex that reads as “your brand” in Figma reads as a different color on a phone outdoors, or why screens need calibration in the first place.

Additive vs subtractive: why the school primaries are wrong

The colors you learned in elementary school (red, yellow, blue as primaries) are wrong. Or rather, they’re an 18th-century painters’ oversimplification that survived because elementary-school art curriculum doesn’t update quickly.

The real mixing models depend on whether you’re combining light or pigment:

• Additive (light), RGB. When light sources combine, their wavelengths add. Red + green = yellow; red + blue = magenta; red + green + blue = white. Every screen, every projector, and every camera sensor works this way.
• Subtractive (pigment), CMY. When pigments combine, each one absorbs (subtracts) certain wavelengths from incident light. Cyan + magenta = blue; cyan + yellow = green; cyan + magenta + yellow ≈ black. This is how paint, ink, and printing work. Real-world print uses CMYK for three reasons: pure CMY layered three deep produces a muddy brown rather than a clean black; pure black ink is cheaper than overlaying three colors; and registration errors (when the three plates don’t line up exactly) show up as colored fringes around fine text.

Traditional RYB primaries don’t fit either model cleanly. They were codified in Jacob Christoph Le Blon’s Coloritto(1725), a system painters carried forward because mixing red + yellow + blue pigment produced a workable approximation of color before anyone understood why cyan + magenta + yellow would do the job better. There’s no reason to teach RYB anymore. It’s historical inertia.

For everything web-related, you only need additive RGB (and OKLCH as the perceptual reframing of it). Don’t worry about CMYK unless you’re prepping artwork for print. Even then, your printer driver will convert from RGB.

Warm and cool: useful but imprecise

Color temperature is half physics, half cultural inheritance.

The physical version: longer-wavelength colors (red, orange, yellow) read as warm; shorter-wavelength colors (blue, green, violet) as cool. This roughly maps to common light sources. Fire glows red-orange; sky and ice scatter blue. The associations are baked deep into perception.

The wobble: it’s not a strict spectrum boundary. A yellow-green leaning toward yellow feels warm; the same hue leaning toward green feels cool. The same hue can read as different temperatures depending on what surrounds it. One of the central observations of Josef Albers’s Interaction of Color(1963): “a color is not a fixed thing; it changes with what’s next to it.” That makes warm and cool useful as design vocabulary but unreliable as a measurement.

Designer practice that mostly holds up: warm colors visually advance, cool colors recede. The effect is real (chromostereopsis, where the eye focuses different wavelengths at slightly different distances) but modest and context-sensitive, not universal. It’s also one of the reasons warm CTAs on dark backgrounds tend to work where deep-blue ones struggle. See why your blues look muddy on dark backgrounds for the rigorous luminance-based version of the same observation.

From wheel to space

The wheel, the attributes, and the mixing models are the foundations every modern color space builds on. HSL, HSV, Lab, OKLCH, sRGB, and Display P3 are all parameterizations of the same underlying perception, with different tradeoffs around accuracy, gamut coverage, and computational convenience. Pick the right one for the job; don’t pick a hex and squint.

The next layer up, once you have the wheel, the attributes, and the mixing models, is harmony: which combinations of hues, values, and chromas actually look good together. The recognizable patterns (complementary, analogous, triadic, split-complementary, tetradic, square) deserve their own treatment.

What this looks like in modern work

Three-hundred-year-old foundations would feel remote if they didn’t keep showing up everywhere in modern tooling. The wheel became color-mix(in oklch, …)in CSS Color 4. Hue rotation in a perceptually-uniform space, rendered live by the browser, is a parameterized Itten wheel. Munsell’s H/V/C triad became the OKLCH primitive every modern shade-scale generator (Tailwind v4, Linear, Vercel) emits by default. Newton’s circular spectrum became the color-wheel UI in every design tool: Figma, Sketch, the OS color picker, your IDE’s inline color preview.

Albers’s observation that a color is not what it is but what surrounds it is the principle every WCAG contrast-ratio test now operationalizes. The reason a dark-mode blue can feel completely different from the same hex on white is the reason Albers had Bauhaus students paint identical squares against different backgrounds in 1963: the eye doesn’t see colors, it sees relationships.

Dynamic theming on modern operating systems is the foundations running automatically. Android’s Material You picks a hue from the user’s wallpaper and builds a tonal scale around it in Google’s HCT color space (Hue/Chroma/Tone, Material’s contemporary descendant of Munsell’s triad), then maps role-based design tokens to that scale via Itten harmonies. AI palette generators apply the same theory faster, often built on the same perceptually-uniform spaces (OKLCH, HCT, CAM16) underneath. Moderndoesn’t mean new theory. It means old theory, automated.

A note on culture: color symbolism varies dramatically across the world. Red signals celebration in China, danger in much of the West, and mourning in parts of South Africa. White is a wedding color in Western traditions and a funeral color across much of East Asia. The wheel and attributes themselves are universal. Everyone with healthy color vision sees yellow as more luminous than blue at the same numeric L. The associationsare not. A separate codex entry on color psychology digs into what the research actually supports about cultural and emotional color meaning, and what’s folk wisdom.

The takeaway is unsentimental: three centuries of color theory is still load-bearing. New technology renders the same ideas faster and more accurately. New cultural moments cycle which palettes feel “now” (Pantone Color of the Year, cottagecore beige, vaporwave magenta, the orange-teal cinema-grading look), but the underlying machinery is the same as when Itten codified it in 1961. Get the foundations right and the trends become legible.