OKLCH
A color format with lightness, chroma, and hue dials where the lightness number matches what your eye sees, so steps look evenly spaced.
See it
What it is
OKLCH describes a color with three numbers: L (perceptual lightness), C (chroma, how colorful it is), and H (hue angle, 0 to 360). The point is the L. In HSL, yellow at 50% lightness burns your retina and blue at 50% reads almost black. In OKLCH, 50% L lands much closer to the same apparent brightness across hues, because the math is built on Oklab, a space fitted to human vision instead of to monitor voltages. Approximately, not perfectly: it is a good model, not a guarantee, and equal L does not mean equal WCAG contrast.
Reach for it when you are generating rather than picking: tonal ramps, hover and pressed states, dark-mode surfaces, gradients. Set one lightness ladder (97, 92, 85, 75, 65, 55, 45, 35, 22) and swap the hue, and every brand color gets a ramp that behaves similarly, though you still measure the contrast rather than assume it. CSS ships it natively as oklch(62% 0.19 259), and gradients interpolated in oklch skip the muddy gray midpoint that sRGB gives you between opposites.
Gotcha: chroma is not a percentage and has no fixed ceiling. The maximum usable chroma changes with both lightness and hue, so oklch(90% 0.4 140) asks for a green no screen owns and the browser quietly clips it back into gamut. There is no single safe number here: at some hue and lightness combinations a chroma of 0.12 is already outside sRGB, at others 0.25 fits fine. Gamut-check every swatch instead of picking a ceiling and hoping.
Ask AI for it
Define this palette in OKLCH instead of hex or HSL. Use a fixed lightness ladder (97%, 92%, 85%, 75%, 65%, 55%, 45%, 35%, 22%) and generate each ramp by holding the hue angle constant and scaling chroma so it peaks in the middle steps and falls toward zero at both ends. Then gamut-check each swatch and reduce chroma independently at that step's lightness and hue until it sits inside sRGB, preserving the intended lightness and hue wherever you can. Output CSS custom properties using the oklch() function plus a verified hex fallback for every step, note which steps had to be reduced, and set every gradient to interpolate in oklch so midpoints stay colorful instead of going gray.