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.
Synchronized color
#2B7FFFParsed as RGB; malformed or out-of-range channels are rejected, never silently clamped.
Try: oklch(62.3% 0.214 259.8), #2B7FFF, or rgb(43, 127, 255)
Adjust channels
Share this exact input
?color=2B7FFFOne input, implementation-ready output
Color workspace
Hex
#RRGGBB
#2B7FFFCSS RGB
Modern space syntax
rgb(43 127 255)Legacy RGB
Comma syntax
rgb(43, 127, 255)RGB %
Percentage channels
rgb(16.9% 49.8% 100%)HSL
CSS hue, saturation, lightness
hsl(216 100% 58%)HSV / HSB
Design-tool model
hsv(216, 83%, 100%)OKLCH
Perceptual CSS color
oklch(61.9% 0.207 259.2)LAB
CSS Lab, D50
lab(53.83% 11.48 -72.05)LCH
CSS LCH, D50
lch(53.83% 72.95 279.05)CMYK
Unprofiled approximation
cmyk(83%, 50%, 0%, 0%)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) |
Need a value that is not listed? Browse the full color library — every hex code has a page with its RGB, HSL, CMYK and OKLCH values, contrast ratios, tints, shades and matching palette colors.
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.
Plenty of tools still only accept hex: design software, email templates, brand documents, chart libraries, and older codebases. Converting lets you take colors from a modern OKLCH-based system like Tailwind v4 into any legacy workflow.
For colors inside the sRGB gamut, yes - OKLCH and hex describe the same color exactly. Very high-chroma OKLCH values can exceed what sRGB can display; those are clamped to the nearest displayable color, which is the same thing browsers do on sRGB screens.
Tailwind v4 defines blue-500 as oklch(62.3% 0.214 259.815), which renders as #2B7FFF in sRGB. Our Tailwind color chart lists the hex rendering of the entire default palette.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.
Hex to OKLCH Converter
Convert hex colors to the modern CSS oklch() format
RGB to Hex Converter
Convert RGB and alpha to Hex, CSS formats, color spaces, code, and states
HSL to Hex Converter
Convert HSL values to hex color codes instantly
Tailwind CSS Color Palette
The full Tailwind CSS v4 color palette in hex and OKLCH