LCH Color Explained: LAB Made Intuitive
LCH is CIELAB with its a*/b* rectangle converted to polar coordinates: Lightness (0–100, perceptual), Chroma (0 → ~130+, how colorful) and Hue (0–360°). You get LAB's perceptual honesty with HSL's intuitive dials — rotate hue while lightness genuinely stays constant, something HSL cannot do.
Why designers use LCH
Design-system color scales built in LCH look even: the 500-level of every hue has the same perceived weight, text contrast behaves predictably, and categorical palette colors carry equal visual emphasis — critical for data visualization. CSS supports it directly: color: lch(52% 58 286);.
| Dial | Meaning | Watch out |
|---|---|---|
| L | Perceived lightness | Directly predicts WCAG-ish contrast behavior |
| C | Colorfulness | Max chroma varies by hue — yellows reach further than blues |
| H | Hue angle | Blue region can shift purple when darkening (LAB flaw) |
LCH vs OKLCH
LCH inherits CIELAB's imperfect blue behavior. OKLCH is the same idea built on OKLab and is now the recommended default for screen work — but LCH remains important where CIELAB is the reference (print, color QC). Tools: RGB to LCH, LCH to RGB, LCH to LAB.