Hex / RGB to OKLCH

Paste a colour in #hex or rgb() form and see it decomposed into OKLCH — CSS Color 4's perceptually-uniform colour space, where equal steps in L, C, or H look like equal steps to the eye. Edit L, C, or H and watch the swatch update. Click any chip to copy. Pure client-side, no upload.

Input — #hex or rgb() / rgba()

Live swatch

#0d6efd

rgb(13, 110, 253)

Readouts

Edit L, C, H

L 0–1 C 0–0.4 H 0–360° α 0–1

Lightness ramp — L ± 0.20, hold C & H

Hue ring — H + 0/72/144/216/288°, hold L & C

What is OKLCH, and why use it over HSL?

OKLCH is a perceptually-uniform colour space defined in CSS Color Level 4. Unlike HSL, where two colours with the same L often look very different in brightness, equal steps in OKLCH L (lightness) look like equal steps to the human eye. That makes it ideal for generating ramps, palettes, and theme scales — the kind of thing where HSL regularly produces "the same lightness" steps that don't actually look the same.

L — perceptual lightness, 0 (black) to 1 (white).
C — chroma (colourfulness), 0 (grey) up to ~0.4 for the most saturated in-gamut sRGB colours.
H — hue in degrees, 0–360 (matches CSS oklch()).

The math is the sRGB → linear → Oklab → Oklch pipeline from Björn Ottosson's 2020 paper (bottosson.github.io/posts/oklab). Every conversion runs locally in your browser — nothing leaves the page.