How to use the HEX to OKLCH Converter
- Paste your HEX color, such as #2563eb.
- Adjust lightness, chroma or hue if you want a variation.
- Copy the
oklch()value into your CSS.
Why convert HEX to OKLCH?
HEX tells a browser which color to show, but it’s hard to adjust by hand. OKLCH splits a color into lightness, chroma and hue, so you can make a darker shade by changing one number. Colors with the same lightness also look equally bright, which helps you build consistent palettes.
New to the format? Read how to use OKLCH in CSS, or see how it compares in OKLCH vs HSL.
Also searched as: hex to oklch, convert hex to oklch, oklch from hex.
Tools that pair well with the HEX to OKLCH Converter
- OKLCH to HEX Converter — Paste an oklch() value and get its HEX equivalent, plus RGB and HSL.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- Tailwind Color Generator — Paste one brand color and get a balanced 11-step shade scale (50 to 950) built in OKLCH — with contrast hints and exports for Tailwind v3, v4, CSS and SCSS.
- Contrast Checker — Enter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA score and one-click fixes that keep your hue.
Frequently asked questions
Is the conversion exact?
It’s very close. Values are rounded for readable CSS, so a color may differ by a tiny, invisible amount.
Do browsers support OKLCH?
Yes. All major modern browsers support it. Very old browsers need a HEX fallback.
Is my data uploaded?
No. It all runs in your browser.
Can I install HEX to OKLCH Converter as a web app and use it offline?
Yes. HEX to OKLCH Converter is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.