Undertone

The quiet warm or cool color hiding inside a neutral, which explains why two perfectly good grays or whites can look wrong together.

why do these two grays clashthis white looks yellow next to that whitewarm gray vs cool graythe hidden color in a neutralwhy does this beige look pinkundertoneethe blue hiding in this graymatching cream and white

See it

Live demo coming soon

What it is

An undertone is the faint hue bias inside a color that otherwise reads as neutral. A gray may lean blue, a beige may lean pink, and a white may lean yellow. Paint and makeup use warm, cool, and neutral undertone labels because two colors can share almost the same lightness yet look wrong together when those hidden directions disagree.

Reach for the idea when whites, grays, skin tones, wood, or stone refuse to coordinate even though each looks neutral alone. Sampling them in OKLCH makes the bias easier to spot: chroma will be low, but the hue angle still points warm or cool. Repeating that direction through the neutral ramp makes the palette feel related.

Gotcha: undertone is contextual, not a permanent label printed by the pixel. Lighting and surrounding colors can make the same swatch appear warmer or cooler, and hue becomes unstable as chroma approaches zero. Compare physical samples under the light where they will live, or test screen colors beside the actual brand and imagery rather than on an empty canvas.

Ask AI for it

Audit the neutral palette in CSS oklch(). List each neutral's lightness, chroma, and hue, then rebuild the ramp with one consistent undertone chosen from the brand color: hue 70 for warm or hue 250 for cool, with chroma between 0.006 and 0.018. Preserve the existing lightness steps, define the result as CSS custom properties, and show every neutral beside the primary color and the main photography so any conflicting pink, yellow, blue, or green bias is visible.

You might have meant

tinted neutralsneutral palettecolor temperatureoff white bone creamsimultaneous contrast