BYTETOOLS

OKLCH Color Converter

Convert HEX and RGB to OKLCH or OKLab and back, with a live swatch, gamut warnings and ready-to-paste oklch() CSS for Tailwind v4.

Colour

Result

#3b82f6
62.31%
Lightness
0.1880
Chroma
259.81°
Hue
0.2038
Max chroma at this L & H

CSS and colour codes

oklch()oklch(62.31% 0.188 259.81)
oklab()oklab(62.31% -0.0332 -0.1851)
HEX#3b82f6
rgb()rgb(59, 130, 246)
hsl()hsl(217.2, 91.2%, 59.8%)
OKLab L / a / b0.6231 / -0.0332 / -0.1851

What is the OKLCH Color Converter?

OKLCH is the colour space modern CSS reaches for when lightness has to behave predictably. Unlike HSL, where a yellow at 50% lightness looks far brighter than a blue at the same number, OKLCH lightness tracks what your eye actually perceives.

  • Two-way conversion between HEX/RGB and OKLCH/OKLab
  • Ready-to-paste oklch() and oklab() CSS output
  • Warns when your chroma falls outside the sRGB gamut
  • Shows the maximum chroma available at that lightness and hue
  • Cross-checks against HEX, rgb() and hsl() at the same time
  • Runs entirely in your browser, nothing uploaded

How to use the OKLCH Color Converter

  1. 1

    Pick a conversion direction: HEX to OKLCH, or OKLCH to HEX.

  2. 2

    Type a hex value in the text field, or use the swatch picker beside it.

  3. 3

    Read the lightness, chroma and hue, along with the maximum chroma available at that lightness and hue.

  4. 4

    Copy the oklch() or oklab() string straight into your stylesheet or design tokens.

About the OKLCH Color Converter

OKLCH is the colour space modern CSS reaches for when lightness has to behave predictably. Unlike HSL, where a yellow at 50% lightness looks far brighter than a blue at the same number, OKLCH lightness tracks what your eye actually perceives. That is why Tailwind v4 ships its entire default palette in oklch() notation.

This converter runs the full Björn Ottosson pipeline in both directions. Going in, it linearises your sRGB channels, applies the LMS matrix, takes the cube root and lands on OKLab, then reports chroma as the hypotenuse of a and b and hue as their arctangent in degrees. Going out, it inverts the same chain and tells you when your chroma has left the sRGB gamut.

Everything is computed locally in your browser with JavaScript, so no colour you type is ever uploaded and there is no account to create. Alongside the OKLCH numbers you also get the matching HEX, rgb() and hsl() values, which makes it easy to drop a fallback declaration in for older browsers. The page keeps working offline once it has loaded.

Frequently asked questions

What is the difference between OKLCH and HSL?

Both use a hue angle, but their lightness axes behave very differently. HSL lightness is a simple average of the brightest and darkest channel, so a pure yellow and a pure blue at L 50% look nothing alike in brightness. OKLCH lightness is perceptual, so two colours with the same L really do read as equally light.

Why does my OKLCH color look different in the browser?

Almost always because the chroma you asked for does not exist in sRGB at that lightness and hue. Browsers clip out-of-gamut colours back to the boundary, which usually drops saturation. This tool flags that case and tells you the maximum chroma that actually fits.

Is OKLCH supported in all browsers?

The oklch() function has been supported in current Chrome, Edge, Safari and Firefox since 2023. For older browsers, copy the HEX value this tool shows alongside and use it as a fallback declaration before the oklch() line.

What chroma value should I use?

sRGB tops out around 0.37 chroma, and only for a few hues at particular lightnesses. Around 0.1 to 0.2 covers most brand colours; below 0.05 reads as a tinted grey. The tool shows the ceiling for whichever lightness and hue you are on.

Does converting HEX to OKLCH lose any color information?

No. The conversion is mathematically reversible, and converting back returns the same hex value. What you can lose is precision if you round the OKLCH numbers aggressively before converting them back.

Related tools