OKLCH Converter
Every notation CSS now understands, from the same color. OKLCH is the one worth learning: its lightness matches what your eye reports, so a set of colors at one lightness really does look level.
The color
hex, rgb(), hsl(), hwb(), lab(),
lch(), oklab(), oklch() or a CSS color name.
Nudge it in OKLCH
Every notation
Click any line to copy it.
Why the newer spaces are worth it
Both rows walk the same hue circle at one fixed lightness. In HSL the yellows glare and the blues sink; in OKLCH every step carries the same visual weight.
HSL at 50% lightness - the numbers say level, your eye says otherwise
OKLCH at the same lightness - even the whole way round
This color from black to white in OKLCH, in even steps
What the numbers mean
Reading OKLCH
L- lightness, 0 is black and 1 is white. Two colors at the same L look equally light.
C- chroma, how far from gray. 0 is gray; how high it can go depends on the hue.
H- hue in degrees, the same circle you know: 30 red, 145 green, 260 blue.
- Gamut
- some L and C pairs cannot be shown on an ordinary screen. This page eases the chroma down until they fit and tells you when it did.