OKLCH Color Picker & Converter

Pick and convert colors in OKLCH — a newer, perceptually uniform color space increasingly supported in modern CSS — alongside instant conversion to and from HEX and RGB.

Traditional color spaces like HSL have a known quirk: two colors with the same lightness value can look noticeably different in actual perceived brightness depending on their hue (a “50% lightness” yellow looks much brighter than a “50% lightness” blue to the human eye). OKLCH is designed specifically to fix this — its lightness value tracks actual perceived brightness consistently across all hues, which makes it a meaningfully better space for building color scales, accessible palettes, or predictable hover/active state variations.

Use the visual picker or type values directly into the Lightness, Chroma, and Hue fields, and see the live swatch update alongside automatic HEX and RGB equivalents. Since not every OKLCH color maps to a displayable RGB value (OKLCH can express colors outside the standard sRGB gamut), out-of-gamut warnings flag when a chosen color can’t be accurately rendered on a typical screen or in standard CSS without clipping.

Frequently asked questions

Why would I use OKLCH instead of the HSL I already know? 

The main advantage is that adjusting lightness in OKLCH changes perceived brightness consistently across every hue, which HSL doesn’t reliably do — this matters most when systematically generating a color scale (like five shades of a brand color) where you want each step to look evenly spaced to the eye, not just numerically evenly spaced.

Is OKLCH actually usable in real CSS today, or is it purely theoretical? 

It’s supported natively in current versions of all major modern browsers as a real CSS color function (oklch(...)), so it’s genuinely usable in production CSS now, not just a design-time concept — though checking your specific browser support requirements for older browser versions is still worth doing before relying on it exclusively.

What does the out-of-gamut warning actually mean? 

It means the exact OKLCH color you’ve specified is more vivid or saturated than standard displays (sRGB) can physically reproduce, so browsers will automatically clip it to the closest displayable color — the warning just makes that automatic adjustment visible to you rather than a surprise.

Can I convert an existing HEX color I already have into OKLCH? 

Yes, entering a HEX or RGB value converts it into its OKLCH equivalent just as readily as the reverse direction — for other common format conversions like HSL, the Color format converter covers that broader set.