CIE Lab / LCH Converter
Convert sRGB to/from CIE Lab and CIE LCH.
Overview
The CIE Lab / LCH Converter translates between sRGB hex codes and the device-independent CIE 1976 Lab and LCH colour spaces. It exposes the L* (lightness), a* / b* (green–red and blue–yellow opponent axes), and the polar L* / C* / h° form used by print and colour-science workflows.
Designers reach for Lab and LCH when they need predictable perceptual lightness, branded colour matching across substrates, or smooth gradient interpolation that does not visibly drift through grey. The converter is handy when porting tokens from a design system that expresses colours in LCH back to hex for browsers that lack lch() support.
How it works
The conversion path is sRGB → linear RGB (gamma decoded with the standard 2.4 piecewise curve) → CIE XYZ (D65 illuminant, 2° observer) → CIE Lab using the cube-root non-linearity that approximates human lightness perception. LCH is then derived from Lab by polar conversion: C* = sqrt(a*² + b*²) and h° = atan2(b*, a*).
Because Lab is roughly perceptually uniform, equal numeric differences in L*, a* or b* correspond to roughly equal visible differences — which is why it underpins the CIE76 and CIEDE2000 Delta-E formulas used for tolerance-matching paint, fabric and ink.
Examples
#ff6600 → L* 64.2 a* 56.1 b* 72.9
→ L* 64.2 C* 92.0 h° 52.4°
#3366cc → L* 41.7 a* 10.3 b* -52.0
→ L* 41.7 C* 53.0 h° 281.2°
#7f7f7f → L* 53.4 a* 0.0 b* 0.0
FAQ
What is the difference between Lab and LCH?
They describe the same colour but in different coordinate systems. Lab uses Cartesian a*/b* axes, while LCH expresses the same point as chroma (distance from grey) and hue (angle). LCH is friendlier for hue rotations and saturation tweaks.
Why does my colour clip when I convert from LCH to hex?
LCH covers a wider gamut than sRGB. Highly saturated greens, blues and oranges outside the sRGB triangle have no exact hex equivalent, so the converter clamps them to the nearest displayable colour.
Is CIE Lab the same as the lab() CSS function?
Functionally yes — CSS lab() uses CIE Lab with the D50 illuminant, which differs slightly from the D65 commonly used on screen. Expect minor shifts when round-tripping between CSS Lab and image-editor Lab.
Should I prefer OKLCH over CIE LCH?
OKLCH is a newer space designed for screens and generally gives smoother interpolation, especially across the blue-violet region. CIE LCH remains the standard in print and colour science.