OKLCH to HEX Converter
Convert CSS oklch() strings into standard 6-digit or 8-digit HEX format with automatic sRGB gamut clamping and wide Display-P3 detection.
Why Convert OKLCH to HEX?
While modern browsers and CSS frameworks like Tailwind v4 natively support OKLCH, legacy tools — such as older image software, email templates, or SVG renderers — still demand hexadecimal values. Our converter maps OKLCH values into standard HEX, providing an exact clamped fallback for wide-gamut Display-P3 colors.
How to Convert OKLCH to HEX
- Paste any
oklch()value (e.g.oklch(62.3% 0.188 259.8)) into the input field above. - Our engine converts the cylindrical OKLCH coordinates back through Oklab to linear RGB, then gamma-encodes to sRGB.
- The result is a 6-digit HEX code (or 8-digit with alpha) that you can copy or save to your cart.
The math path: OKLCH → Oklab (Cartesian) → linear RGB (inverse LMS matrix) → gamma-encoded sRGB → HEX. If the color falls outside sRGB, chroma is clamped to the nearest in-gamut value.
OKLCH to HEX Reference Table
Build-Time Computed| Swatch | OKLCH Input Value | Color Label | Calculated HEX | Gamut Status |
|---|---|---|---|---|
| oklch(100.0% 0.000 0.0) | Pure White | #ffffff | Exact Match | |
| oklch(0.0% 0.000 0.0) | Pure Black | #000000 | Exact Match | |
| oklch(62.3% 0.188 259.8) | OKLCH Blue 500 | #3b82f6 | Exact Match | |
| oklch(51.1% 0.230 277.0) | OKLCH Indigo 600 | #4f46e5 | Exact Match | |
| oklch(69.6% 0.149 162.5) | OKLCH Emerald 500 | #10b981 | Exact Match | |
| oklch(63.7% 0.208 25.3) | OKLCH Red 500 | #ef4444 | Exact Match | |
| oklch(76.9% 0.165 70.1) | OKLCH Amber 500 | #f59e0b | Exact Match | |
| oklch(71.5% 0.126 215.2) | OKLCH Cyan 500 | #06b6d4 | Exact Match | |
| oklch(55.5% 0.000 0.0) | OKLCH Gray 500 | #737373 | Exact Match | |
| oklch(20.8% 0.040 265.8) | OKLCH Slate 900 | #0f172a | Exact Match | |
| oklch(62.7% 0.233 303.9) | OKLCH Purple 500 | #a855f7 | Exact Match | |
| oklch(65.6% 0.212 354.3) | OKLCH Pink 500 | #ec4899 | Exact Match |
Copy-Ready CSS with Progressive Enhancement
Ship the HEX fallback first, then override with OKLCH for modern browsers:
.button-primary {
color: #3b82f6; /* fallback */
color: oklch(62.3% 0.188 259.8); /* modern browsers */
}Tailwind CSS v4 @theme:
@theme {
--color-brand-blue: oklch(62.3% 0.188 259.8);
}Gamut Note: What Happens Outside sRGB
Because HEX is physically confined to sRGB, high-chroma OKLCH colors (such as vibrant cyans or punchy greens with C > 0.22) cannot be rendered accurately in HEX. Our tool calculates the closest possible in-gamut chroma without distorting the perceptual hue angle, ensuring your fallback hex colors look harmonious.
- Clamping vs. Display-P3: On a Display-P3 monitor, the original OKLCH color appears more vivid. On an sRGB monitor, the browser automatically tone-maps it. The HEX fallback always represents the sRGB-clamped version.
- Alpha Channel: An OKLCH value with alpha (e.g.
oklch(62.3% 0.188 259.8 / 0.5)) converts to an 8-digit HEX code (e.g.#3b82f680).
Frequently Asked Questions
What happens if my OKLCH color is in Display-P3?
If the color exceeds sRGB boundaries, our engine alerts you with a Display-P3 badge and automatically provides the optimal clamped sRGB HEX code as a graceful fallback. The hue and lightness are preserved as closely as possible.
How do I export HEX fallbacks in CSS?
On our Export page, switch to the "HEX Fallback + OKLCH" tab to generate twin variable lines, ensuring full backward compatibility on legacy browsers.
Is the OKLCH to HEX conversion lossy?
For sRGB colors, the conversion is lossless — you get back the exact same HEX value. For Display-P3 colors, the conversion to HEX requires clamping to sRGB, which is a lossy step. The OKLCH original remains the source of truth.
Can I convert OKLCH with alpha to 8-digit HEX?
Yes. An OKLCH value like oklch(62.3% 0.188 259.8 / 0.5) converts to #3b82f680 — the last two digits represent the alpha channel in hex.
Why does my HEX color look different on different screens?
HEX values are absolute sRGB colors. On a wide-gamut Display-P3 monitor, the browser may render them more vividly than on a standard sRGB monitor. This is expected behavior — the HEX value itself does not change.