OKLCH to Hex Converter
Convert modern CSS oklch() colors to hex codes. Paste a value like oklch(62.3% 0.214 259.8) - from Tailwind CSS v4, design tokens, or any modern stylesheet - and copy the hex equivalent. All conversions happen in your browser.
How OKLCH Converts to Hex
The conversion reverses the OKLab math and re-applies the sRGB gamma curve:
- Convert the polar OKLCH form back to OKLab: a = C × cos(H), b = C × sin(H).
- Transform OKLab to the LMS cone space, cube each component.
- Transform LMS to linear RGB with the inverse matrix.
- Apply sRGB gamma, scale to 0-255, clamp to the displayable gamut, and write each channel as a hex pair.
Example: convert oklch(62.3% 0.214 259.8) to hex
a = 0.214 × cos(259.8°) = −0.038, b = 0.214 × sin(259.8°) = −0.211
OKLab (0.623, −0.038, −0.211) → linear RGB (0.024, 0.212, 1.0)
Gamma-corrected: rgb(43, 127, 255)
Result: #2B7FFF - Tailwind v4 blue-500
How to Use the OKLCH to Hex Converter
Paste an oklch() value such as oklch(62.3% 0.214 259.8) and the hex code appears immediately with a live preview. The output panel also shows RGB, HSL, and CMYK, each with one-click copy.
From Modern CSS Back to Classic Formats
OKLCH is quickly becoming the source of truth in modern design systems, but the rest of the world still speaks hex. This converter bridges the gap using the reference OKLab math, so the hex you copy renders identically to the oklch() value in the browser.
Common Use Cases
Extracting hex codes from Tailwind CSS v4 theme values, converting oklch() colors from a design system into formats that Figma plugins or email tools accept, and checking what an OKLCH color looks like when clamped to the sRGB gamut.
OKLCH to Hex Conversion Table
OKLCH, RGB, and hex values for the most commonly used colors. Click any hex code to load it into the converter above.
| Color | Name | Hex | RGB | OKLCH |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | oklch(0% 0 0) | |
| White | #FFFFFF | rgb(255, 255, 255) | oklch(100% 0 0) | |
| Red | #FF0000 | rgb(255, 0, 0) | oklch(62.8% 0.258 29.2) | |
| Lime | #00FF00 | rgb(0, 255, 0) | oklch(86.6% 0.295 142.5) | |
| Blue | #0000FF | rgb(0, 0, 255) | oklch(45.2% 0.313 264.1) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | oklch(96.8% 0.211 109.8) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | oklch(90.5% 0.155 194.8) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | oklch(70.2% 0.322 328.4) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | oklch(80.8% 0 0) | |
| Gray | #808080 | rgb(128, 128, 128) | oklch(60% 0 0) | |
| Maroon | #800000 | rgb(128, 0, 0) | oklch(37.7% 0.155 29.2) | |
| Olive | #808000 | rgb(128, 128, 0) | oklch(58.1% 0.127 109.8) | |
| Green | #008000 | rgb(0, 128, 0) | oklch(52% 0.177 142.5) | |
| Purple | #800080 | rgb(128, 0, 128) | oklch(42.1% 0.193 328.4) | |
| Teal | #008080 | rgb(0, 128, 128) | oklch(54.3% 0.093 194.8) | |
| Navy | #000080 | rgb(0, 0, 128) | oklch(27.1% 0.188 264.1) | |
| Orange | #FFA500 | rgb(255, 165, 0) | oklch(79.3% 0.171 70.7) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | oklch(86.8% 0.074 7.1) | |
| Gold | #FFD700 | rgb(255, 215, 0) | oklch(88.7% 0.182 95.3) | |
| Brown | #A52A2A | rgb(165, 42, 42) | oklch(48.1% 0.16 25.6) | |
| Coral | #FF7F50 | rgb(255, 127, 80) | oklch(73.5% 0.168 40.2) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | oklch(33.9% 0.179 301.7) | |
| Violet | #EE82EE | rgb(238, 130, 238) | oklch(76.2% 0.186 327.2) | |
| Salmon | #FA8072 | rgb(250, 128, 114) | oklch(73.5% 0.152 28.1) |
Frequently Asked Questions about OKLCH to Hex Converter
Use the CSS syntax: oklch(62.3% 0.214 259.8). The lightness accepts either a percentage or a 0-1 decimal, and the deg suffix on the hue is optional. Values are space-separated, matching how browsers and Tailwind write them.