The short answer
You rarely need the formula by hand. Paste any HEX value into the OKLCH Picker — or open its page in the color library, for example #2563eb — and the OKLCH readout is right there: oklch(0.546 0.215 262.9). The rest of this guide is for when you want to understand, verify or automate the conversion.
The conversion, step by step
- HEX → sRGB channels. Split the HEX into red, green and blue (25, 63, EB → 37, 99, 235) and divide by 255.
- Linearise. sRGB values are gamma-encoded; undo that with the sRGB transfer curve so the numbers are proportional to light.
- Linear sRGB → Oklab. Multiply by the Oklab matrix (through its cube-root intermediate) to get L, a and b — a Cartesian space where L is perceived lightness and a/b are the green–red and blue–yellow axes.
- Oklab → OKLCH. Go polar: chroma is the length of the (a, b) vector, √(a² + b²), and hue is its angle in degrees. That is the whole conversion — no step needs the display gamut, which is why OKLCH can also describe colors sRGB cannot show.
A worked example
Take the familiar product blue #2563eb. Running the steps above gives oklch(0.546 0.215 262.9): a little over half-way up the perceptual lightness scale, strongly saturated (chroma 0.215 is vivid for a blue), at hue 263° — squarely blue. Compare that with its HSL, hsl(221 83% 53%): the 53% “lightness” tells you almost nothing — a yellow at 53% HSL lightness looks far brighter. This is why ramps and dark themes built in OKLCH behave and the same recipes in HSL drift.
When the HEX you get back is an approximation
Converting HEX → OKLCH is exact. Going the other way is not always: setting a high chroma in the picker can produce an OKLCH value outside the sRGB gamut, and turning it back into HEX forces a clip or a gamut map. If exact brand HEX values matter, convert from the HEX and keep chroma edits modest — or accept a mapped HEX knowingly. The gamut mapping guide explains the trade-offs, and the picker flags out-of-sRGB colors before they surprise you.
Using the result in CSS
Modern browsers accept oklch() natively, so converted values can go straight into a stylesheet, ideally with an sRGB fallback first for older clients. For design tokens, export from Studio keeps the OKLCH source of truth alongside HEX, CSS variables, Tailwind and DTCG outputs — you convert once, and every format stays in sync.