Hex to OKLCH Converter
Convert a hex color into OKLCH — the perceptually uniform lightness, chroma, and hue values that CSS Color 4 and modern design systems use.
How Hex to OKLCH Conversion Works
Hex converts to OKLCH by first going through linear-light RGB, then into the Oklab space (a perceptually uniform lightness plus two opponent-color axes), and finally converting those Cartesian a/b coordinates into polar chroma and hue. The result is the same color space CSS's oklch() function and modern design tokens use, chosen because equal numeric steps in L, C, or H correspond to equally-sized perceived differences — unlike HSL, where lightness doesn't track how bright a color actually looks.
Hex to OKLCH Example, Step by Step
#2563EB = oklch(54.6% 0.2152 262.9)
#2563EB (hex) = oklch(54.6% 0.2152 262.9)
#2563EB -> linear RGB -> Oklab(L=0.546, a=-0.0267, b=-0.2135) C = sqrt(a^2 + b^2) = 0.2152 H = atan2(b, a) in degrees = 262.9
| Step | Description | Result |
|---|---|---|
| Convert hex to linear RGB | undo sRGB gamma encoding | linear R, G, B |
| Convert to Oklab | apply the Oklab matrix transform | L=54.6%, a=-0.0267, b=-0.2135 |
| Compute chroma | C = sqrt(a^2 + b^2) | C = 0.2152 |
| Compute hue angle | H = atan2(b, a) | H = 262.9° |
This value round-trips exactly back to #2563EB when converted with the OKLCH to hex tool, since no information is discarded along the way.
Common Mistakes With Hex to OKLCH
- Assuming OKLCH lightness matches HSL lightness for the same color — they're calculated completely differently and will not match.
- Treating chroma as a 0-1 or percentage value — it's an open-ended scale, typically capped around 0.4 for in-gamut sRGB colors.
- Forgetting that browser support for oklch() requires a reasonably modern browser; always provide a hex or rgb() fallback for older ones.
Frequently Asked Questions
What is OKLCH?
OKLCH is a color space built on Björn Ottosson's Oklab model, expressed in polar coordinates: L (lightness, 0-100%), C (chroma, roughly 0-0.4), and H (hue angle, 0-360). It's supported natively by the CSS oklch() function in modern browsers.
What's the OKLCH value of #2563EB?
oklch(54.6% 0.2152 262.9) — 54.6% lightness, moderate-high chroma, and a hue angle in the blue range.
Why use OKLCH instead of HSL?
HSL's lightness channel doesn't match human perception — hsl(60, 100%, 50%) (yellow) looks much brighter than hsl(240, 100%, 50%) (blue) despite an identical lightness value. OKLCH's L channel is calibrated so equal numeric steps look equally different, making gradients and shade scales far more predictable.
Is this conversion exact?
Yes, within floating-point and display rounding — converting the resulting OKLCH value back to hex reproduces the original color.
Where is OKLCH used in practice?
In CSS via oklch(), and increasingly in design systems and color palette generators for building perceptually even light-to-dark shade ramps from a single brand color.