Hex to OKLCH converter
A hex color converts to OKLCH by linearising the sRGB channels, passing them through the OKLab matrices, then reading the result as lightness, chroma and hue. #2563EB is oklch(54.61% 0.2152 262.88). Paste any hex below to convert it and adjust it on the OKLCH sliders.
Chroma has no fixed maximum. Values beyond what sRGB can show are clamped to the nearest displayable color, so the slider may stop having a visible effect before it reaches the end.
Working with a design system? Paste several hex codes, one per line or comma-separated, to convert them all at once and save the set as a palette.
Why OKLCH and not HSL
HSL lightness is a position in a cylinder, not a measure of brightness. Pure yellow and pure blue both sit at 50 percent HSL lightness while differing in actual luminance by more than a factor of twelve. Any ramp you build by stepping HSL lightness will therefore be even in some hues and wrong in others.
OKLab was designed to fix exactly that. Its lightness axis tracks perception, so the same loop over lightness values produces a ramp that reads as even across every hue in your palette. OKLCH is the cylindrical form of it, which is the one you write in CSS.
Reading the three numbers
- L, 0 to 1, usually written as a percentage. 0 is black, 1 is white.
- C, chroma, from 0 upward. There is no fixed ceiling: the highest reachable chroma depends on the lightness, the hue and what the display can show.
- H, hue in degrees. Same idea as HSL hue, but the angles do not line up between the two spaces, so do not carry a number across.
A worked example
Starting from #2563EB:
- Convert to RGB first: rgb(37, 99, 235)
- Linearise each channel with the sRGB transfer function: 0.0185, 0.1248, 0.8308
- Apply the OKLab LMS matrix to those linear values, then take the cube root of each
- Apply the second OKLab matrix, giving L = 0.5461
- Chroma = sqrt(a squared + b squared) = 0.2152
- Hue = atan2(b, a) in degrees = 262.88
Result: oklch(54.61% 0.2152 262.88)
OKLCH can express colors outside sRGB. Converting back clamps them into gamut, so a very high chroma will not survive a round trip.
A check you can repeat
Tailwind CSS 4.3.1publishes its palette in OKLCH. Running those published values through this converter's inverse reproduces the hex codes Tailwind itself ships, including blue-600 as #155DFC. That is a third party's numbers agreeing with ours, which is the only kind of check worth quoting.
Frequently asked questions
What does an OKLCH value mean?
Lightness runs from 0 to 1 and is built to match perception, so two colors at the same lightness look equally light whatever their hue. Chroma is how colorful, starting at 0 for grey, with no fixed maximum. Hue is an angle in degrees.
Why convert hex to OKLCH at all?
Because equal steps in OKLCH look equal. A nine step ramp built by stepping HSL lightness looks even in some hues and badly uneven in others. The same loop in OKLCH looks even everywhere, which is why new design systems specify their palettes this way.
Is OKLCH chroma the same as HSL saturation?
No. HSL saturation always runs 0 to 100 and is relative to what that hue and lightness can reach. OKLCH chroma is an absolute distance from grey, so its usable maximum changes with lightness and hue, and it can exceed what sRGB is able to show.
Can every OKLCH value be written as hex?
No. OKLCH can address colors outside the sRGB gamut. Converting one of those to hex clamps it to the nearest displayable color, so a very high chroma will not survive a round trip.
Related tools
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.