HEX to OKLCH Converter
Convert any hex color to oklch() and back — the modern perceptual CSS color space used by Tailwind v4. Free, private, in-browser.
- Runs in your browser
- No upload on server
- Free, forever
- Pick input
- Tweak
- Copy / export
HEX
OKLCH
oklch()
oklch(0.623 0.188 259.81)Tailwind v4 CSS var
--color: oklch(0.623 0.188 259.81);HEX (round-trip)
—How this works — and why it's private
- Your hex code is parsed into sRGB (0–255 per channel).
- Each channel is un-gamma-corrected into linear light.
- Linear RGB is transformed to OKLab using Björn Ottosson's 3×3 matrix.
- OKLab (L, a, b) becomes OKLCH by turning (a, b) into chroma + hue.
- Nothing leaves your browser — the whole pipeline is ~30 lines of math.
How the conversion works
Why OKLCH beats HEX for design systems
HEX and RGB describe what a screen should emit. OKLCH describes what a person actually perceives. That means equal steps in lightness or chroma look equal to your eye — so building a 50–950 shade ramp in OKLCH gives you a smooth, professional palette in seconds. Tailwind v4, Radix Colors and most modern design systems now ship in OKLCH for this reason.
Need more formats? Use our full Color Converter for HEX, RGB, HSL, HSV and OKLCH side by side, or the Color Picker to sample colors visually.
Rate HEX to OKLCH Converter
One tap. Anonymous. Helps others find the good tools.
No account, no email, no tracking — just a 1–5 number.
Be the first to rate