OKLCH Color Picker

Choose a color in OKLCH — the perceptually uniform color space behind modern CSS — using lightness, chroma, hue, and alpha sliders, and read off the oklch(), hex, rgb(), and hsl() values together. A live swatch previews the result and a warning flags when a color falls outside the sRGB gamut. Paste a hex value to convert it straight to OKLCH. All the color math runs in your browser.

How to use the OKLCH Color Picker

Drag the lightness, chroma, and hue sliders to build a color, and adjust alpha for transparency. The swatch updates live and the four format strings — oklch(), hex, rgb(), and hsl() — appear below; click any of them to copy. Working the other way, paste a hex value into the hex field and the sliders snap to its OKLCH coordinates, which is the quickest way to see the OKLCH form of a color you already have.

Watch the gamut line. OKLCH can describe colors more vivid than an sRGB screen can show, so when your chroma is too high for the chosen lightness and hue, the tool warns that the color is out of gamut and shows the clamped, displayable equivalent in the hex and rgb values. That's expected and useful: it tells you the oklch() value is valid CSS and will look richer on a wide-gamut (P3) display, while still giving you the safe sRGB fallback. Lower the chroma until the warning clears if you need a color that's identical everywhere.

Why OKLCH matters for CSS color

OKLCH is a cylindrical form of the OKLab color space, expressing a color as Lightness, Chroma (how vivid it is), and Hue (its angle on the color wheel). Its defining property is perceptual uniformity: a given change in the lightness number corresponds to roughly the same change in perceived brightness regardless of hue. That's something HSL conspicuously fails at — in HSL, a yellow and a blue at the same 50% lightness look wildly different in actual brightness, which is why HSL-based color systems produce uneven palettes and unpredictable contrast.

This uniformity makes OKLCH the right tool for systematic color work. Because lightness behaves consistently, you can build an accessible palette by holding lightness steady and rotating hue, or generate tints and shades by stepping lightness while keeping chroma and hue fixed — and the steps look even. Mixing and interpolating in OKLCH avoids the muddy grey midpoints and shifted hues that plague gradients computed in sRGB. It's the difference between a palette that was tuned by eye and one that's correct by construction, which is why design systems have moved toward it.

OKLCH is now a first-class CSS color function, written oklch(L C H) with an optional / alpha. Crucially, it isn't limited to the sRGB gamut: on a wide-gamut display it can render more saturated colors than hex or rgb() can express, while degrading gracefully to a clamped sRGB color elsewhere — which is exactly what the gamut indicator here is showing. The catch is that authoring OKLCH by hand is unintuitive at first, since chroma's usable range depends on lightness and hue. A picker that shows the resulting color, its conversions, and whether it fits in sRGB turns that abstract triple into something you can dial in by sight.

Common use cases

• Design tokens. Author CSS colors in oklch() with a live preview and sRGB fallback.
• Palettes. Build even tint/shade scales by stepping lightness at fixed hue and chroma.
• Converting colors. Turn an existing hex into its OKLCH coordinates to fold it into a system.
• Wide-gamut color. Find vivid P3-capable colors and check whether they exceed sRGB.