HEX to OKLCH Converter
Convert 3-digit, 6-digit, or 8-digit hexadecimal colors into standard CSS oklch() notation with perceptual accuracy and live gamut detection.
Why Convert HEX Colors to OKLCH?
Hexadecimal color codes (#RRGGBB) have served the web for decades, but they are tied to device-dependent sRGB color spaces. When building dynamic design systems, tweaking the brightness of a HEX color requires complex, inaccurate math. In contrast, OKLCH separates lightness, chroma, and hue into independent parameters: you can change lightness from 40% to 80% without affecting the chromatic purity or shifting the hue angle.
How to Convert HEX to OKLCH
- Type or paste any HEX value (e.g.
#3b82f6or with alpha#3b82f680) into the input field above. - Our engine immediately calculates the exact perceptual Lightness (
L), Chroma (C), and Hue (H). - Click Copy to copy the output or + Cart to store this token into your role collection.
The math path: HEX → sRGB (0-255) → linear RGB (gamma decode) → Oklab (LMS cone response matrices) → OKLCH (cylindrical transform). The result is a perceptually uniform color where equal lightness values look equally bright across all hues.
Popular HEX Codes & Their OKLCH Equivalents
Build-Time Generated| Color | Color Name | HEX Input | OKLCH Equivalent | Gamut Status |
|---|---|---|---|---|
| Pure White | #ffffff | oklch(100.0% 0.000 0.0) | sRGB Safe | |
| Pure Black | #000000 | oklch(0.0% 0.000 0.0) | sRGB Safe | |
| Tailwind Blue 500 | #3b82f6 | oklch(62.3% 0.188 259.8) | sRGB Safe | |
| Tailwind Indigo 600 | #4f46e5 | oklch(51.1% 0.230 277.0) | sRGB Safe | |
| Emerald 500 | #10b981 | oklch(69.6% 0.149 162.5) | sRGB Safe | |
| Red 500 (Danger) | #ef4444 | oklch(63.7% 0.208 25.3) | sRGB Safe | |
| Amber 500 (Warning) | #f59e0b | oklch(76.9% 0.165 70.1) | sRGB Safe | |
| Cyan 500 (Info) | #06b6d4 | oklch(71.5% 0.126 215.2) | sRGB Safe | |
| Neutral Gray 500 | #737373 | oklch(55.5% 0.000 0.0) | sRGB Safe | |
| Dark Slate 900 | #0f172a | oklch(20.8% 0.040 265.8) | sRGB Safe | |
| Purple 500 | #a855f7 | oklch(62.7% 0.233 303.9) | sRGB Safe | |
| Pink 500 | #ec4899 | oklch(65.6% 0.212 354.3) | sRGB Safe |
Copy-Ready CSS with Progressive Enhancement
Use the HEX value as a fallback for older browsers, then override with OKLCH for modern browsers:
.button-primary {
color: #3b82f6;
color: oklch(62.3% 0.188 259.8);
}Tailwind CSS v4 @theme:
@theme {
--color-brand-blue: oklch(62.3% 0.188 259.8);
}
/* Utility classes automatically generated: */
/* bg-brand-blue, text-brand-blue, border-brand-blue */Gamut Note: HEX is Always sRGB-Safe
- sRGB Gamut Bounds: Because all standard HEX codes exist inside sRGB, converting from HEX to OKLCH is always 100% gamut-safe and will never produce out-of-gamut clipping warnings.
- 8-Digit Alpha Support: If you input an 8-character HEX code (e.g.
#3b82f6cc), the alpha channel is converted into a standard slash parameter:oklch(62.3% 0.188 259.8 / 0.80). - Display-P3 Monitors: On wide-gamut displays, the same OKLCH value may appear more vivid than the original HEX, because OKLCH can describe colors beyond the sRGB triangle. The browser handles this automatically.
Frequently Asked Questions
Are HEX to OKLCH conversions reversible without loss?
Yes. Because sRGB is a mathematical subset of OKLCH, converting a HEX value into OKLCH and then back to HEX yields the exact original 6-digit hexadecimal code. The round-trip is lossless for all sRGB colors.
Can I paste 3-digit shorthand HEX codes?
Yes! Our converter natively parses shorthand codes like #fff or #f00 and expands them correctly. Each digit is duplicated (#f00 → #ff0000) before conversion.
What is the difference between OKLCH and HEX?
HEX is a device-dependent sRGB notation that mixes red, green, and blue channels. OKLCH is a perceptually uniform color space that separates lightness, chroma, and hue — making it far easier to create accessible, consistent color systems.
Do all modern browsers support CSS oklch()?
Yes. oklch() is a Baseline feature available across all modern browsers since May 2023. Chrome, Edge, Safari, and Firefox all support it natively. See the MDN browser compatibility table for details.
How do I use OKLCH in Tailwind CSS v4?
Tailwind v4 uses OKLCH for its entire default palette. Define custom colors in your @theme block using --color-{name}: oklch(...) and Tailwind generates utilities like bg-{name} automatically.