OKLCH Color Picker

OKLCH is the colour space CSS Color 4 introduced so that lightness, chroma and hue behave the way the eye expects. Move the hue while holding the other two and the perceived brightness stays put; do the same in HSL and it does not. The picker exposes all three channels plus alpha, and shows the oklch() string, the sRGB hex, rgb and hsl equivalents, the underlying OKLab a/b coordinates, and a warning when the colour you have asked for lies outside what an sRGB monitor can display.

The difference from HSL is not subtle, and one comparison makes it concrete. Pure yellow and pure blue both sit at lightness 50% in HSL, which is why a palette built by rotating HSL hue produces some swatches that glare and others that vanish. In OKLCH the same two colours land at lightness 0.97 and 0.45 — numbers that match what you actually see. The scale is anchored to perception rather than geometry, which is also why mid-grey #808080 comes out near 0.60 rather than 0.50: the sRGB midpoint is lighter than half.

Lightness runs 0 to 1, hue 0 to 360, and chroma has no fixed maximum — it is an absolute distance from grey, and how much of it a display can render depends on the display. That is the source of the gamut warning. Ask for a chroma that sRGB cannot reach and a browser will not fail; it maps the colour to something it can show, and the CSS specification says to do that by reducing chroma while holding lightness and hue, so your colour comes back less saturated but the right brightness and the right hue. A wide-gamut screen will show more of what you asked for than a standard one, which means a heavily saturated OKLCH colour is not the same colour for every visitor.

The practical payoff is building a scale. Pick a hue and a chroma, step the lightness evenly, and you get a ramp whose steps look evenly spaced — the thing that takes manual fiddling in hex and still comes out lumpy. Holding lightness constant across several hues gives a categorical palette whose colours carry equal visual weight, which is exactly what a chart legend needs and what HSL cannot deliver.