OKLCH Color Playground

The OKLCH color playground exposes lightness, chroma and hue as three independent sliders and converts the result to a hex value you can copy.

What is OKLCH Color Playground?

• The OKLCH color playground gives you three sliders and a swatch.
• Lightness runs from zero to one hundred percent, chroma from zero to forty percent, and hue through the full three hundred and sixty degrees, with the starting point set at a mid lightness, moderate chroma and a violet hue.
• The result appears beside the controls as a large swatch with its hex value and a copy button, updating as the sliders move.

The reason a playground like this exists is that OKLCH separates three things that most people find tangled together in HSL, which is what makes it work as an oklch color picker: the axes stop influencing each other. The swatch beside the sliders doubles as an oklch to hex conversion, so the value you settle on is immediately pasteable. In that older model, hue is an angle, saturation is a percentage and lightness is a percentage, and the three interact in a way that makes them hard to reason about: a yellow at fifty percent lightness and a blue at fifty percent lightness are not equally bright to the eye, and a colour kept at a constant saturation can still look muted at one hue and vivid at another. In a perceptual model, lightness means roughly the same thing at every hue — which is why the same lightness value produces colours that read as equally weighted whether they are red or blue.

Chroma is the more unfamiliar term, and in practice it is the one worth experimenting with. It is not saturation in the HSL sense: it measures how far the colour is from grey along the hue's axis, with zero being neutral grey and higher values moving towards the most vivid version of that hue a display can produce. Raising chroma at a constant lightness and hue moves a dusty blue towards a saturated one without making it darker or lighter, which is exactly the adjustment that is difficult to make in older models.

• The upper limit of the chroma slider is what turns this from a demonstration into a useful tool.
• The maximum chroma available differs by hue and by lightness — yellows and greens can go further at high lightness, blues and violets further at lower ones — so the same chroma value is inside the display's range for some combinations and outside it for others.
• When the requested colour falls outside the range a screen can show, the conversion returns the closest displayable colour, which means the swatch can stop changing as you push the slider further.
• That behaviour is informative rather than broken, but it is worth recognising: past a certain point, more chroma is not producing a more saturated colour.

Where this earns its place is in constructing colour scales and themes. Because lightness and chroma are independent, a set of colours at identical lightness values genuinely looks even rather than merely being numerically equal, which is the property that makes a palette feel deliberate. Building five tints of a brand colour or a sequence of steps for a chart is much more controllable here than it is by eye in HSL.

The limits: the output is a single colour rather than a palette, there is no colour-space conversion beyond the hex result, no contrast checking, and no history of previous values — so a scale is built by recording values as you go. There is also no gamut warning beyond the swatch quietly refusing to change. Used as a perceptual color picker, though, it is the clearest way to see how the three axes interact, and for anyone who has wondered what an oklch lightness chroma hue triple actually produces, moving the sliders for a minute explains it better than the specification does.

How to use OKLCH Color Playground

1. Drag the Lightness slider and watch how the colour's apparent weight changes.
2. Raise Chroma to move from dusty towards vivid without affecting lightness.
3. Sweep Hue to move around the wheel at a constant weight and saturation.
4. Copy the hex value from the result swatch.

When to use OKLCH Color Playground vs related tools

Use this when you need to control lightness and vividness independently — building scales, levelling a palette, or understanding what a perceptual model does. Use HSL-based tools when you specifically want the older model's behaviour. For the neighbouring steps, see the color wheel theory guide and the bezold effect visualizer.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about OKLCH Color Playground