OKLCH Color Picker

How to use the OKLCH color picker

1. Set lightness first to fix how light or dark the color is, since it stays steady across every hue.
2. Raise chroma to add vividness, easing off when the swatch stops changing and you hit the gamut edge.
3. Turn the hue dial to choose the actual color without altering its brightness or strength.
4. Copy the oklch() value, or grab a HEX or RGB fallback from the Color Converter for older browsers.

What is an OKLCH color?

OKLCH is the newest way to write a CSS color, shaped like oklch(65% 0.18 250). The three numbers are lightness, chroma and hue, and the picker above turns them into live sliders so you can read the code straight off your screen. What sets it apart from older formats is that its numbers are tuned to human eyesight, so the value you type matches the brightness you actually see.

Where OKLCH came from

OKLCH did not exist a few years ago. It is the cylindrical form of Oklab, a color space published in 2020 by Björn Ottosson to fix the uneven lightness of older spaces. It was then written into the CSS Color Module Level 4 spec, which is why you can now use oklch() directly in a stylesheet. That short history is the reason the picker above shows a chroma value with no fixed maximum, which surprises people coming from HSL.

The hue-shift problem OKLCH solves

Lighten a blue in HSL and it drifts toward purple; darken a yellow and it slides toward green. OKLCH holds the hue steady while you move lightness, so a tint and its base stay the same color. The table shows the same blue lightened in both models so you can see the drift.

Reading an oklch() value

Building a tonal scale with OKLCH

Because lightness behaves predictably, a full set of UI shades is just one hue and chroma with the lightness stepped evenly. Here is a blue scale built that way, the same approach design tokens use:

How wide is the OKLCH gamut?

OKLCH can name colors that sRGB cannot, which is the point on modern wide-gamut (Display P3) screens. On an older sRGB monitor those extra-vivid colors clip back to the nearest displayable shade.

OKLCH in real projects

• Tailwind CSS v4 ships its entire default palette in OKLCH, so framework users are already shipping it.
• Design-token systems use it to generate light and dark scales from a single base color.
• Theming engines lean on it for accessible contrast, since predictable lightness makes ratios easier to hit.
• Gradient and data-viz tools use it to blend colors without the muddy gray midpoint that RGB blending creates.

Why OKLCH is better than LCH and HSL

OKLCH is the format worth reaching for first, and the reason is consistency. HSL is misleading: lighten a blue and it drifts purple, and equal lightness values look wildly different across hues. OKLCH fixes both, and unlike LCH it keeps blues stable as the hue rotates. For palettes and design tokens, it is simply the best option available today.