OKLCH Color Editor
Edit a color in OKLCH space — perceptually uniform.
Overview
The OKLCH Color Editor lets you edit colours in OKLCH space — the perceptually uniform polar form of OKLab — using sliders for lightness, chroma and hue. Every change keeps the other two components stable, so you can build tonal scales, hue rotations and chroma ramps that look genuinely consistent on screen.
It is the modern editor for design-system authors, CSS engineers who want to use the native oklch() function, and anyone tired of HSL's lightness drift between hues. OKLCH is supported in every current browser, so editing here gives you values you can paste straight into a stylesheet.
How it works
OKLCH is derived from OKLab, Björn Ottosson's 2020 colour space designed for screen colours. The forward path is sRGB → linear RGB → OKLab via a matrix multiplication and cube-root non-linearity. OKLCH is the polar form: C = sqrt(a² + b²), h = atan2(b, a), with L unchanged.
The editor renders the gamut boundary as a clipping indicator — push chroma high enough at extreme lightness and the value falls outside sRGB, at which point the tool clamps to the closest in-gamut hex and flags the clipping. CSS oklch() itself can carry out-of-gamut values, but browsers will gamut-map them on display.
Examples
L 0.6, C 0.20, h 30° → #f06868 (warm red)
L 0.6, C 0.20, h 240° → #5f7ad0 (blue at same lightness)
L 0.8, C 0.10, h 120° → #a7d5a8 (pastel green)
L 0.5, C 0.00, h ∗ → #777777 (neutral grey)
FAQ
Why use OKLCH instead of HSL?
HSL's lightness is computed in gamma-encoded sRGB and is not perceptually uniform — a yellow at HSL L 50 looks far brighter than a blue at HSL L 50. OKLCH's L is perceptually uniform, so equal-L colours genuinely look equally bright.
Is OKLCH the same as CIE LCH?
Both are polar forms of a Lab-like space, but CIE LCH is based on CIE Lab (designed in 1976 for paints and prints) while OKLCH uses OKLab (designed in 2020 for screens). OKLCH performs noticeably better in the blue-violet region.
Why does my colour clip when I increase chroma?
OKLCH can describe colours outside sRGB. The editor clamps to the displayable range and shows a warning. To stay safe in sRGB, watch the chroma cap that appears as you slide.
Can I paste OKLCH straight into CSS?
Yes. Use color: oklch(60% 0.2 30); — the syntax accepts percentage lightness, raw chroma, and hue in degrees. Browsers from 2023 onward support it natively.
Should I author all my tokens in OKLCH?
It is the best modern option for tonal scales and dark-mode pairing. Many teams keep hex as the storage format and use OKLCH only for the maths, since hex is still the most portable representation.