CSS Color Converter All-in-One: Hex, RGB, HSL, OKLCH

OKLCH is a perceptually uniform color space defined in CSS Color Level 4. Unlike HSL where lightness feels inconsistent across hues, OKLCH's Lightness (L) is based on human perception, making it far more predictable. Chroma (C) represents color intensity, and Hue (H) is the color angle. It's excellent for generating accessible color palettes, consistent gradients, and design systems.

HSL uses a cylindrical model where equal Lightness values don't appear equally bright to the human eye — a blue at 50% lightness looks much darker than a yellow at 50% lightness. OKLCH fixes this with perceptually uniform lightness. Additionally, OKLCH's Chroma is more intuitive than HSL's Saturation, and its Hue is more evenly spaced perceptually.

As of 2024, oklch() is supported in all major browsers: Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. Global support exceeds 92%. For legacy browsers, provide a fallback using @supports or a hex/rgb fallback declared before the oklch value.

OKLCH can represent colors beyond the sRGB color space (especially at high Chroma values). When converting such colors to Hex or RGB, they must be clipped to fit within sRGB, which may result in a slightly different color. The preview in this tool uses the native oklch() CSS value, so on P3-capable screens you'll see the true color, while Hex/RGB/HSL outputs show the sRGB-clipped approximation.

Most design tools (Figma, Sketch, Adobe XD) use Hex or RGB formats. You can copy the Hex value from this tool and paste it directly into any design app. Conversely, paste any Hex, RGB, or HSL value into the corresponding field here, and all formats will update instantly. Some modern tools like Figma now support OKLCH natively.

If you push Chroma very high, the resulting color may exceed the sRGB gamut. The Hex/RGB/HSL outputs will show the closest in-gamut sRGB approximation, which may appear unchanged even as you increase Chroma further. This is expected behavior — the full color is still preserved in the OKLCH output and the preview (on wide-gamut displays).