A whole palette at once
Put one colour per line and every one is converted. Copying a palette straight out of a design file and taking it away in another notation is what people actually use this for. Separating with commas or semicolons works too.
These notations are understood.
#3366cc·#36c·#3366cc80(with alpha)rgb(51 102 204)·rgb(51, 102, 204)·rgb(20% 40% 80% / 50%)hsl(220 60% 50%)·hwb(220 20% 20%)oklch(52% 0.14 262)·oklab(52% -0.02 -0.14)- CSS colour names such as
tomatoandrebeccapurple
The L in HSL is not the L in OKLCH
The yellow hsl(60 100% 50%) and the blue hsl(240 100% 50%) share an L
of 50%, yet the yellow looks far brighter. HSL's L is not perceived brightness; it is just the
average of the highest and lowest of the red, green and blue values.
OKLCH's L is built to match what the eye actually perceives, which makes these possible:
- Change the hue and hold the brightness — building a button colour in several families
- Step the brightness evenly to produce a 50 · 100 · … · 900 palette
- Invert brightness for dark mode while the hue stays put
Do the same in HSL and some colours scream while others go dead.
Colours outside sRGB
OKLCH can name colours wider than a screen can produce. Feed it one and it is clipped to the
nearest reachable colour, and you are told so in the result. To keep the original, write the
oklch() notation into your CSS as it is — on a wide-gamut display it renders
richer.
How is the text colour on top decided?
The colour is treated as a background, the contrast ratio is measured against both white and black text, and the higher one wins. Above 4.5:1 means it is usable for body text.
How is alpha handled?
It is kept in the notation. For measuring contrast, though, the colour is composited over white — the real brightness of a semi-transparent colour depends on whatever is behind it.