HEX to OKLCH Converter
Processed Client SideConvert a hex color into the modern OKLCH color space — perceptually uniform lightness, chroma, and hue — ready to paste into your CSS.
Bookmark this tool now — skip the search next time you need it.
About HEX to OKLCH converter
This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.
Convert a hex colour into OKLCH, the perceptually uniform colour space that modern CSS supports natively. OKLCH describes a colour as lightness, chroma, and hue, and its advantage over HSL is that its lightness actually matches what your eye perceives — in HSL, yellow and blue at the same lightness value look nothing alike, which is why HSL-derived palettes come out uneven. Because the three axes are independent in OKLCH, you can hold hue and chroma steady and step lightness to generate a colour scale that reads as genuinely consistent, which is exactly what a design system needs. Paste a hex code or pick the colour visually with the swatch, and the three components are broken out individually as well as assembled into the finished oklch() declaration.
Key features
- Converts 3, 4, 6, and 8-digit hex into OKLCH
- Lightness reported as a percentage, chroma and hue as separate values
- Outputs the CSS oklch() function, ready to paste
- Live swatch preview
- Invalid hex flagged immediately, with the accepted formats spelled out
- Native colour picker alongside the text field, so you can arrive at the value visually instead of typing it
- L, C, and H shown as separate labelled rows as well as inside the oklch() string, which is what you need when building a scale by hand
- Perceptually uniform, so equal lightness steps look equal to the eye
- Runs entirely in your browser
How to use it
- Paste your hex colour into the input.
- Read the L, C, and H values along with the CSS oklch() output.
- Vary the lightness while holding chroma and hue to build a scale.
- Copy the oklch() value into your stylesheet.
Tips & common mistakes
- This is the reason to use OKLCH: hold hue and chroma fixed, step lightness evenly, and every step looks evenly spaced. Doing the same in HSL produces a scale that lurches.
- Chroma is not a percentage and has no fixed maximum — the usable ceiling depends on the hue and on the display. Values above roughly 0.37 are outside what most screens can show.
- OKLCH can express colours outside sRGB, which is how it reaches the wider P3 gamut on modern displays. Browsers clamp gracefully on older screens.
- Hue is in degrees on the same circle as HSL, but the numbers are not interchangeable between the two spaces — do not copy a hue across.
- oklch() is supported across all current browsers. For an old-browser fallback, list a hex declaration first and let the oklch() line override it.
- Because lightness is perceptual, OKLCH is also a better basis for deciding text contrast than HSL — though the Colour Contrast Checker is still the authority on whether a pair passes.
- Alpha from a 4 or 8-digit hex carries through as a slash-separated value, so #7C5CFFCC becomes an oklch() with a trailing / 0.8 rather than losing its transparency.
- Near-grey colours have a chroma close to zero, and at that point the hue value is essentially meaningless — small rounding differences can swing it wildly without changing the colour you see.