CIE LCH
The polar form of CIE Lab. Lighter to reason about than Lab when working with hue and chroma directly.
lch(45% 88 298).The three components
L* — Lightness
Same as in Lab. Ranges from 0 (black) to 100 (white). Perceptually uniform across hues.
C* — Chroma
Distance from the neutral gray axis. 0 means a perfect gray; higher values mean more saturated, vivid color. The maximum chroma available depends on the hue and lightness — some hues can reach C 100+ in sRGB, others cap lower.
h — Hue angle
An angle in degrees, from 0 to 360. Following the same convention as HSL and OKLCH: 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta.
Lab ↔ LCH conversion
LCH and Lab are related by a polar-to-Cartesian transformation. The conversion is straightforward trigonometry:
From Lab to LCH:
L = L*
C = √(a*² + b*²)
h = atan2(b*, a*) × 180 / π
From LCH to Lab:
L* = L
a* = C × cos(h × π / 180)
b* = C × sin(h × π / 180)The color is identical. Only the coordinate system changes. LCH is preferred when you want to reason about hue angles independently of chroma.
Why use LCH over Lab?
-
Hue is explicit. Reading
lch(45% 80 240)tells you immediately that this is a blue hue. - Rotating hue is a single operation. Change one number to shift the color family.
- Chroma is a distance. Increase C to make the color more saturated; decrease to make it grayer.
- Gamut mapping is intuitive. Reducing chroma brings an out-of-gamut color back into sRGB without changing its hue.
CIE LCH vs OKLCH
| Aspect | CIE LCH | OKLCH |
|---|---|---|
| Base space | CIE Lab (1976) | OKLab (2020) |
| Complexity | Higher (piecewise Lab transform) | Lower (simple matrices) |
| Blue-region accuracy | Distorted | Uniform |
| Chroma range in sRGB | 0 to ~130 | 0 to ~0.4 |
| Typical use | Print, color science | Modern CSS, design systems |
For modern web design work, OKLCH is the recommended choice. CIE LCH remains the standard for print and scientific color work, and the two are conceptually similar enough that knowledge of one translates easily to the other.
Practical syntax in CSS
/* LCH syntax */
color: lch(45% 88 298);
/* With alpha */
color: lch(45% 88 298 / 0.5);
/* Rotating hue — same L and C */
color: lch(45% 88 30);
color: lch(45% 88 120);
color: lch(45% 88 240);
/* Reducing chroma — color becomes grayer */
color: lch(45% 40 298);
color: lch(45% 10 298);Common uses
- Gamut mapping — reducing chroma to bring out-of-gamut colors back into sRGB without shifting hue.
- Color difference — computing hue and chroma differences between colors (ΔH, ΔC).
- Palette generation — building scales by holding hue and chroma while varying lightness, or holding lightness while rotating hue.
- Print and color science — the standard polar space in CIE-based workflows.
Continue reading
Frequently asked questions
What is CIE LCH?
CIE LCH is the polar form of CIE Lab. It describes a color with three values: L* for lightness, C* for chroma and h for hue angle. It is mathematically equivalent to Lab but easier to reason about for hue-based work.
What is the difference between Lab and LCH?
Lab and LCH describe the same color space in different coordinate systems. Lab uses Cartesian a* and b* axes; LCH uses polar chroma and hue. Both produce identical colors; LCH is preferred when you want to reason about hue and saturation independently.
What is the difference between CIE LCH and OKLCH?
Both are polar perceptually uniform spaces. CIE LCH uses CIE Lab as its base and is common in print and color science. OKLCH uses OKLab as its base — it is simpler to compute, handles the blue region more evenly, and is now the standard for modern web design systems.
When should I use LCH?
LCH is useful when you want to adjust hue while keeping lightness and chroma constant, or when you want to compute a color's hue angle in a perceptually uniform space. It is common in print production, color research and advanced design tooling.
Is LCH supported in browsers?
Yes. lch() is part of the CSS Color Module Level 4 and is supported in all modern browsers alongside lab(), oklab() and oklch().