Learn Color Theory
Master color with interactive guides.
What Are Undertones?
The hidden color family beneath what you see.
Every color has a mass tone — the dominant hue you perceive at first glance. But beneath that surface sits an undertone: a subtle secondary color family that only emerges when you compare the color to its neighbors or desaturate it. Undertones are why two “reds” can feel completely different — one leans warm and fiery, the other cool and refined.
Undertones vs overtones
In paint and pigment, overtonesdescribe the color visible in a thin layer versus a thick one — a physical property of pigment density. In digital color, every pixel is a single RGB value with no physical layering, so overtones don't apply. Undertones are the relevant concept: the hue direction a color drifts toward when desaturated.
Revealing Undertones
Context makes hidden color visible.
Undertones hide in plain sight — your eye normalizes them until forced to compare. Place a color against white, neutral gray, or its complementary color and the hidden cast appears immediately. This is simultaneous contrast at work — the same phenomenon explored in the Perception & Context article.
Why complementary backgrounds work best
The complement exaggerates the undertone through simultaneous contrast — your visual system amplifies the difference. A gray with a green undertone looks vividly green when placed against a red-pink background.
Undertones in Neutrals
Grays, whites, and beiges are never truly neutral.
Neutrals are where undertones matter most in real design work. A warm gray with a brown undertone feels cozy and organic; a cool graywith a blue undertone feels clinical and modern. White walls with a pink cast look completely different from white walls with a yellow cast — even though both read as “white.” Matching neutral undertones is critical for cohesive UI surfaces.
Design system tip
When defining neutral tokens for a design system, pick one undertone family and commit to it across all surfaces, borders, and text colors. Mixing a blue-gray sidebar with a warm-gray card background creates subtle discord that users feel but can't articulate.
Undertone Harmony
Why some palettes feel cohesive and others feel off.
Two colors with matching mass tones but clashing undertones create a subtle visual tension that undermines even well-planned palettes. Aligning undertones — ensuring every color in your palette drifts toward the same hue family when desaturated — is the secret to palettes that feel effortlessly right.
The undertone test
The aligned palette feels effortlessly cohesive because every color drifts toward the same undertone family when desaturated. The clashing palette creates subtle tension — each color pulls the eye in a different direction. Try dragging the hue slider to see how different base hues produce different undertone dynamics.
Detecting Undertones
Programmatically revealing what the eye normalizes away.
In OKLCH color space, the hue angle (H) that persists as chroma (C) approaches zero isthe undertone — it's the color direction a neutral drifts toward. By progressively draining chroma and observing the surviving hue, we can computationally identify any color's undertone family.
Why OKLCH?
Unlike HSL where hue becomes meaningless at low saturation, OKLCH's hue angle remains perceptually stable even at near-zero chroma. This makes it the ideal color space for undertone detection — the math matches what your eye perceives.