What is OKLCH and why should I use it instead of HEX or HSL?

OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space based on the Oklab model. Unlike HEX or HSL, equal numeric changes in OKLCH produce equal perceived differences. This makes it ideal for designing accessible color palettes, creating smooth gradients, and generating consistent Tailwind v4 color scales.

How do I convert HEX to OKLCH?

Paste your HEX value (e.g. #3b82f6) into the HEX input field and the OKLCH field updates instantly with the equivalent oklch(0.6 0.18 250) notation. All other formats — OKLab, RGB, and HSL — also sync at the same time.

What does 'out of sRGB gamut' mean and what happens to the color?

Some OKLCH colors — particularly high-chroma values — exceed the sRGB color space that most displays use. When this happens, the tool applies the CSS Color 4 toGamut algorithm to find the closest displayable sRGB color. An amber warning banner appears showing the original out-of-gamut value alongside the mapped result.

How does the Tailwind v4 OKLCH palette generator work?

The generator uses Tailwind v4's official lightness schedule (50=0.971, 100=0.945, through 950=0.238) applied to your current hue and chroma. It produces 11 color steps from light to dark and exports them as an @theme { --color-brand-50: oklch(...); } code block ready to paste into your CSS.

Why does OKLCH interpolation look better than HSL for gradients?

HSL interpolates through a cylindrical coordinate system that does not match human perception, often causing gray dips or unexpected hue shifts midway through a gradient. OKLCH interpolates in the perceptually uniform Oklab space, so lightness and chroma transition smoothly without unexpected color casts.

Is this OKLCH converter free and private?

Yes. The tool is completely free and runs entirely in your browser using the culori library. No color values are uploaded to a server.

Does CSS Color 4 OKLCH work in all browsers?

OKLCH color syntax (oklch()) is supported in all modern browsers as of 2023, including Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. For older browsers, use the HEX or RGB fallback values this converter provides.

Color Tools

OKLCH Converter – CSS Color 4 & Tailwind v4

Free OKLCH color converter: live sync across OKLCH, OKLab, RGB, HSL, HEX. L/C/H sliders, CSS Color 4 gamut mapping, Tailwind v4 palette export.

OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space built on the Oklab model and officially adopted in CSS Color Level 4. Unlike RGB or HSL, OKLCH keeps perceived lightness consistent across hues, making it ideal for accessible color systems, Tailwind v4 palettes, and smooth gradients.

How to Use the OKLCH Color Converter

1
Enter a color value
Type or paste a value in any supported format: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%), or oklab(0.6 -0.056 -0.169). The tool syncs all other formats instantly.
2
Fine-tune with the L/C/H/Alpha sliders
Drag the Lightness (L), Chroma (C), Hue (H), or Alpha sliders. The Chroma slider shows the sRGB gamut boundary marker so you always know when a color exceeds the standard display range.
3
Check the gamut warning if it appears
If your OKLCH color is outside the sRGB gamut, an amber warning banner shows the original value and the CSS Color 4 toGamut-mapped result used for display.
4
Generate a Tailwind v4 palette
The Tailwind v4 OKLCH palette section automatically generates 50-950 color steps for your current hue, following the official Tailwind lightness schedule. Click Copy to paste the @theme block directly into your CSS.

References

W3C CSS Color Level 4 – oklch()
The W3C specification defining the OKLCH color notation and gamut mapping algorithms.
Culori – JavaScript Color Library
The open-source library powering OKLCH conversion, toGamut mapping, and perceptual interpolation in this tool.
Evil Martians – OKLCH in CSS: Why Quit RGB and HSL?
A comprehensive guide explaining the advantages of OKLCH over RGB and HSL for modern color work.
Tailwind CSS v4 – Default Palette
Tailwind's official color palette documentation, including the OKLCH lightness values used in this palette generator.

Related Tools

Color Converter

Convert between RGB, RGBA, HEX, HSL, HSV, and CMYK with bidirectional live sync.

CSS Minifier

Minify CSS that uses your OKLCH color values.

SVG Viewer

Preview and inspect SVG graphics that use OKLCH fill and stroke values.

Frequently Asked Questions

What is OKLCH and why should I use it instead of HEX or HSL?: OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space based on the Oklab model. Unlike HEX or HSL, equal numeric changes in OKLCH produce equal perceived differences. This makes it ideal for designing accessible color palettes, creating smooth gradients, and generating consistent Tailwind v4 color scales.
How do I convert HEX to OKLCH?: Paste your HEX value (e.g. #3b82f6) into the HEX input field and the OKLCH field updates instantly with the equivalent oklch(0.6 0.18 250) notation. All other formats — OKLab, RGB, and HSL — also sync at the same time.
What does 'out of sRGB gamut' mean and what happens to the color?: Some OKLCH colors — particularly high-chroma values — exceed the sRGB color space that most displays use. When this happens, the tool applies the CSS Color 4 toGamut algorithm to find the closest displayable sRGB color. An amber warning banner appears showing the original out-of-gamut value alongside the mapped result.
How does the Tailwind v4 OKLCH palette generator work?: The generator uses Tailwind v4's official lightness schedule (50=0.971, 100=0.945, through 950=0.238) applied to your current hue and chroma. It produces 11 color steps from light to dark and exports them as an @theme { --color-brand-50: oklch(...); } code block ready to paste into your CSS.
Why does OKLCH interpolation look better than HSL for gradients?: HSL interpolates through a cylindrical coordinate system that does not match human perception, often causing gray dips or unexpected hue shifts midway through a gradient. OKLCH interpolates in the perceptually uniform Oklab space, so lightness and chroma transition smoothly without unexpected color casts.
Is this OKLCH converter free and private?: Yes. The tool is completely free and runs entirely in your browser using the culori library. No color values are uploaded to a server.
Does CSS Color 4 OKLCH work in all browsers?: OKLCH color syntax (oklch()) is supported in all modern browsers as of 2023, including Chrome 111+, Firefox 113+, Safari 15.4+, and Edge 111+. For older browsers, use the HEX or RGB fallback values this converter provides.