One colour, every notation
Any CSS colour syntax in, all the others out — with the gamut and the white point stated rather than assumed.
One colour, every notation
Type in any CSS colour syntax and get the rest, with the gamut and the white point stated rather than assumed.
What each notation is for
HEX and RGB address the display directly. They say nothing about how a colour looks next to another one, which is why arithmetic on them produces surprises.
HSL and HWB are the same sRGB values in polar form. They are easy to reason about and perceptually misleading: HSL lightness 50% is a bright yellow and a dark blue.
Lab and LCH are perceptual and standardised, defined here against the D50 white point, which is what CSS lab() means. A Lab value with an unstated white point is not a colour.
OKLab and OKLCH are newer and behave better for the two things design work actually needs: interpolation and lightness comparison. Everything generated on this site uses them.
CMYK here is a naive conversion from sRGB with no ICC profile. It is a starting point for a conversation with a printer, not a proof.
Why HSL lightness lies
In HSL, hsl(60 100% 50%) is a searing yellow and hsl(240 100% 50%) is a near-black blue. Both claim 50% lightness. The number describes a position in a geometric solid, not anything about how bright the colour looks.
OKLCH lightness does track perception, which is why a ramp built on it has even steps and one built on HSL does not.
What "out of gamut" means here
Display P3 covers colours sRGB cannot show. A colour written in P3 or in OKLCH can therefore name something no sRGB screen reproduces, and it has to be brought in before export.
This page reports whether a colour is inside sRGB, inside P3, and what it costs to bring it in — because the alternative, silently clipping, changes the hue and tells you nothing.