OKLCH converter — HEX, RGB and any CSS colour to oklch() and back

How to use the OKLCH converter

1. Choose the Input: Any colour or OKLCH numbers.
2. For Any colour, enter a value in the Colour field, for example #3b82f6, rgb(59 130 246) or a CSS name.
3. For OKLCH numbers, drag Lightness L (0–100%), Chroma C (0–0.4) and Hue H (0–360°).
4. Read the OKLCH, OKLab, HEX and RGB values, and check In sRGB gamut.
5. Copy the two-line CSS: a HEX fallback followed by the oklch() value.

What it does and when to use it

OKLCH has become a popular way to write colours in CSS and in design tokens. Tailwind v4 defines its whole palette in it. Raise L and the colour gets lighter without changing hue; lower C and it turns greyer. This converter moves your existing HEX and RGB colours into OKLCH, and turns OKLCH numbers back into values any tool understands.

Use it when migrating a palette to OKLCH, when you want to see whether a vivid OKLCH colour fits on a normal screen, or to learn the scale by dragging the sliders. To change lightness by a set amount in OKLCH, use lighten / darken. For every other notation of a colour at once, try the colour converter, and see real OKLCH palettes in the Tailwind colour palette.

How it works

The conversion follows CSS Color Module Level 4 and Björn Ottosson’s published matrices. sRGB values are first linearised, then multiplied by a matrix, cube-rooted and multiplied by a second matrix to give OKLab L, a and b. OKLCH is the polar form: C = √(a² + b²) and H = atan2(b, a) in degrees.

Going back reverses those steps. If any RGB channel falls outside 0–1, the colour is out of gamut. The tool then searches for the highest chroma at the same L and H whose clipped version is within a just-noticeable difference (ΔE OK 0.02) of it. That is the CSS Color 4 gamut-mapping method.

Worked examples

These come from the converter.

Tailwind v3 blue-500, #3b82f6. OKLCH oklch(62.31% 0.188 259.81), OKLab oklab(62.31% -0.0332 -0.1851). It is inside the sRGB gamut.

A green too vivid for sRGB. L 70%, C 0.4, H 150 gives In sRGB gamut: No. The mapped HEX is #00c248; simply clipping the channels would give #00d600, a lighter, yellower green.

Pure red in OKLCH. oklch(62.8% 0.2577 29.23) converts to #ff0000, rgb(255, 0, 0).

Limits and tips

• The highest chroma a screen can show depends on hue and lightness: vivid yellows exist only at high lightness, vivid blues only at low lightness.
• Hue has no meaning when chroma is 0; greys show H as 0.
• Conversion runs in your browser.