OKLCH to HEX Converter

Paste an oklch() value and get its HEX equivalent, plus RGB and HSL. It also tells you when a color falls outside the sRGB range.

Updated

Your data never leaves your computer. All processing happens 100% locally in your browser.

How to use the OKLCH to HEX Converter

  1. Paste your color, such as oklch(62.8% 0.2577 29.23).
  2. Check the gamut note under the result.
  3. Copy the HEX value for your fallback or design tool.

When do you need OKLCH to HEX?

Some tools, email clients and older browsers don’t read OKLCH. A HEX value makes a safe fallback:

color: #e83a2e;
color: oklch(62.8% 0.2577 29.23);

Browsers use the last value they understand, so older ones keep the HEX.

What does “out of gamut” mean?

OKLCH can describe vivid colors that HEX can’t store. When that happens, the HEX value is the closest match, so it may look slightly duller on a wide-gamut screen.

Also searched as: oklch to hex, convert oklch to hex, oklch to rgb.

Tools that pair well with the OKLCH to HEX Converter

  • HEX to OKLCH Converter — Paste a HEX color and get its OKLCH value for CSS.
  • HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
  • Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
  • CSS Variables to Tailwind — Turn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.

Frequently asked questions

Why does my HEX color look different?
The OKLCH color may be outside sRGB, so HEX shows the nearest color it can.
Can I use OKLCH in Figma?
Support depends on your version and plugins. HEX is the safest way to move a color into a design tool.
Is my data uploaded?
No. It all runs in your browser.
Can I install OKLCH to HEX Converter as a web app and use it offline?
Yes. OKLCH to HEX 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.

Related tools