OKLCH Color Explorer
Experiment with OKLCH-style CSS notation and a visual preview.
Explore OKLCH color
OKLCH is a modern, perceptually uniform color space — changing its lightness or chroma looks consistent to the eye in a way HSL does not — and it is increasingly supported in CSS. This explorer lets you experiment with OKLCH notation and preview the result.
Working in OKLCH makes it easier to build accessible, evenly-stepped palettes and predictable hover states. Adjust lightness, chroma, and hue, see the color, and copy the oklch() value for forward-looking CSS.
Perceptual uniformity
Because OKLCH is perceptually uniform, equal lightness steps look equal to the eye in a way HSL cannot promise. The explorer runs in your browser and never uploads anything.
Frequently asked questions
What does the OKLCH color explorer do?
It builds an OKLCH CSS color string from lightness, chroma, and hue controls with a preview.
What do the three OKLCH values mean?
L is perceived lightness from 0% to 100%, C is chroma (colorfulness, usually 0 to about 0.37), and H is the hue angle from 0 to 360.
Why does the preview change in steps at high chroma?
Some lightness and hue combinations with high chroma fall outside the sRGB or P3 gamut your screen can show, so the browser maps them to the nearest color it can display.
What is the fallback value for?
It is a rough HSL approximation for very old browsers that do not understand oklch(). All current major browsers support OKLCH, so most sites no longer need it.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.