About this tool
OKLCH describes a color by perceptual lightness (L), chroma (C) and hue (H). Unlike HEX or HSL, equal steps in OKLCH look like equal steps to the human eye — which makes it ideal for design-system color scales.
Use it to migrate existing brand colors into oklch() syntax, or to build hue-consistent palettes.
Modern browsers support oklch() natively — no fallback needed for evergreen targets.
Frequently asked questions
Why use OKLCH over HSL?
HSL lightness is not perceptually uniform — 50% lightness yellow looks far brighter than 50% blue. OKLCH fixes that, so scales stay consistent across hues.
What do L, C and H mean?
L is perceived lightness (0–100%), C is chroma (saturation, open-ended), H is hue angle in degrees.
Is the conversion exact?
It's a standard colorimetric transform through sRGB → linear RGB → OKLab. Values are rounded for readability; precision loss is far below anything visible.