HEX to OKLCH Converter
Paste a hex code and get OKLCH - the format modern design systems have settled on because equal steps in it actually look equal.
Example conversion
#dc143c
converts to
oklch(57.12% 0.2219 20.09)
About HEX to OKLCH conversion
Hex has stored web colors for thirty years, and it does that job well.
What it cannot do is tell you anything. Nothing in #0d6efd says
how bright it is, how vivid it is, or how it relates to the blue next to it
in your palette. OKLCH answers all three: L is perceptual
lightness as a percentage, C is chroma - how far from grey -
and H is the hue angle. The same blue becomes
oklch(57.82% 0.2282 260.03).
What makes OKLCH worth switching to rather than just another notation is
that its lightness is honest. In HSL, hsl(60, 100%, 50%) and
hsl(240, 100%, 50%) claim the same lightness, yet the yellow is
blinding and the blue is nearly black. In OKLCH those two land at very
different L values, because L is built to match what the eye reports. Step
lightness by 10% and the result looks like a 10% step, whatever the hue. That
is why design systems have moved: Tailwind ships its palette in OKLCH, and
CSS supports oklch() natively in every current browser.
When should you use HEX to OKLCH?
- Modernising an existing palette - convert the hex codes you already have and see how uneven the old scale really was.
- Adopting Tailwind 4 or a similar system - its color tokens are OKLCH, and your brand colors need to match that format.
- Building color scales that look evenly spaced - keep hue and chroma, step the lightness, and the ladder reads evenly.
- Making accessible variants - raising L until a contrast target is met behaves predictably, unlike nudging hex digits.
- Writing gradients that do not go grey - interpolating in OKLCH avoids the muddy midpoint sRGB gradients are prone to.
How the conversion works
Four steps. The hex code is decoded into red, green and blue channels;
those are un-gamma-corrected into linear-light sRGB; the linear values pass
through OKLAB's LMS matrices with a cube-root compression that models the
eye's response; and finally the resulting a and b axes are turned into polar
form, where C = sqrt(a² + b²) and H = atan2(b, a)
in degrees.
Two things follow from that. Chroma has no fixed maximum - it depends on the hue and lightness, so a vivid yellow can exceed 0.2 while a pale one sits near 0.05. And a grey has no hue at all, so any color where all three channels match comes back with chroma 0 and hue 0.
HEX vs OKLCH
- Legibility - hex is opaque; OKLCH states lightness, vividness and hue outright.
- Perceptual honesty - OKLCH's L matches what the eye sees. Hex, RGB and HSL all fail that test.
- Gamut - OKLCH can describe colors sRGB cannot show, so a hex code always converts cleanly, but not every OKLCH value converts back to a distinct hex.
- Support - hex works everywhere including old email
clients;
oklch()needs a reasonably current browser. - Best use - hex to store and hand over a fixed value, OKLCH to build a system out of it.
Named CSS colors in HEX and OKLCH
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
Why is OKLCH better than HSL for building a palette?
Because HSL's lightness lies. Yellow and blue at the same HSL lightness look nothing alike in brightness, so a scale built by stepping HSL lightness comes out uneven across hues. OKLCH's L is perceptual, so the same step produces the same apparent change whatever the hue - which is exactly what a color scale needs.
What range does chroma use?
Chroma starts at 0 for a grey and has no hard ceiling, though sRGB colors rarely pass about 0.37. The maximum depends on both hue and lightness: a bright yellow reaches far higher chroma than a dark blue can. That is why OKLCH has no percentage for it.
Can I use oklch() in CSS today?
Yes. Every current version of Chrome, Edge, Firefox and Safari
supports it. If you need to cover older browsers, provide a hex or
rgb() declaration first and let oklch()
override it - browsers that do not understand the newer line simply
ignore it.
What is the difference between OKLCH and LCH?
Both are polar perceptual spaces, but they sit on different foundations. LCH builds on CIE LAB from 1976, which misjudges blues - shifting the hue as lightness changes. OKLAB, and therefore OKLCH, corrects that. For new work OKLCH is the better choice; LCH still turns up in color science and older tooling. See HEX to LCH.
Why does my OKLCH color not convert back to the same hex?
If the chroma is higher than sRGB can reproduce at that lightness and hue, the color falls outside what your screen can show. The conversion returns the closest displayable color instead, so the round trip lands nearby rather than exactly. A color that started as a hex code almost always comes back as itself; rounding the OKLCH values to two decimals moves about one color in a thousand by a single channel step, which is invisible.