Convert oklch() colors to plain hex for older tooling and fallbacks. Accepts the CSS syntax — oklch(0.63 0.15 250) — converts through OKLab to sRGB, and warns when lightness/chroma combinations exceed what sRGB can display, instead of quietly returning a wrong-looking clip.
Generated locally in your browser — your colors, settings and code never leave this page.
Deploying modern color to every browser
oklch() is how forward-looking stylesheets specify color; hex is what every last consumer understands — old browsers, email clients, design handoffs, terminal configs. This converter is the bridge, and it polices the one real hazard on it: OKLCH coordinates that exceed what sRGB (and therefore hex) can express.
Worked example: oklch(0.8868 0.1822 95.3)
Gold, specified perceptually:
polar → rectangular: a = C·cos(H), b = C·sin(H) OKLab → LMS′ → cube → LMS → linear sRGB → gamma oklch(0.8868 0.1822 95.3) = #ffd700
Raise that chroma from 0.1822 to 0.24 and the request leaves sRGB — the tool flags it and shows the nearest fit rather than a silent clip. Yellows tolerate enormous chroma; try the same 0.24 at hue 264° (blue) and the boundary arrives far sooner. That asymmetry is the sRGB gamut’s shape, made tangible.
Fallback patterns that work
Ship both, hex first: color: #ffd700; color: oklch(0.8868 0.1822 95.3); — cascade order upgrades capable browsers automatically. For tokens, store the oklch() as source of truth and generate the hex line with this converter at build time.
Precision
The reference anchor — oklch(0.62796 0.25768 29.234) = #ff0000 — round-trips exactly here, as do grid sweeps in the automated tests. What varies is only out-of-gamut policy, where this tool chooses disclosure over guessing.
Reference values, computed live
The fastest way to trust a converter is to check it against colors you know. Seven CSS named colors as oklch() input and the hex each produces:
| Color | OKLCH | HEX |
|---|---|---|
| hotpink | oklch(0.728 0.197 352) | #ff69b4 |
| forestgreen | oklch(0.558 0.169 142.9) | #228b22 |
| coral | oklch(0.735 0.168 40.2) | #ff7f50 |
| seagreen | oklch(0.569 0.119 154.9) | #2e8b57 |
| royalblue | oklch(0.56 0.188 266.4) | #4169e1 |
| palevioletred | oklch(0.678 0.138 0.7) | #db7093 |
| darkorange | oklch(0.751 0.179 58.3) | #ff8c00 |
All seven land exactly on their canonical hex — the round trip is bit-exact for in-gamut colors. Push any row’s chroma up by 0.1 and most rows leave sRGB, which is when the gamut warning and nearest-fit behavior described above stop being theory and start earning their place.
Why tokens should store OKLCH and ship hex
The emerging best practice this converter operationalizes: author design tokens in oklch() (editable on perceptual axes, future-gamut-ready) while build tooling emits hex fallbacks for compatibility surfaces — emails, legacy browsers, third-party embeds. The two-value pattern costs one build step and buys both worlds; this page is the manual version of that step, and its math matches what PostCSS-style plugins do automatically. Teams not ready for build integration can still adopt the convention document-side: tokens files listing both forms, with this converter keeping them in sync at edit time.
How to use the OKLCH to HEX Converter
- Enter the oklch() color – oklch(0.63 0.15 250) or bare numbers.
- The result updates live as you type – no convert button needed.
- Heed the gamut warning at vivid L/C combinations.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
How does OKLCH convert to hex?
Polar to rectangular (a = C·cos H, b = C·sin H), then the OKLab matrices: cube the LMS responses, matrix to linear sRGB, gamma-encode, scale to 0-255. Red's reference oklch(0.628 0.2577 29.23) converts back to exactly #ff0000 in this implementation's tests.
Why does my oklch() value warn about sRGB gamut?
OKLCH coordinates describe more colors than sRGB contains – oklch(0.7 0.35 150) is a legal green no monitor fully shows. The warning tells you the swatch is a reduced-chroma stand-in; the Gamut Mapper computes the exact largest chroma that fits.
What are typical OKLCH values for usable UI colors?
Lightness 0.55-0.8 with chroma 0.08-0.2 covers most accessible, pleasant UI colors; text-on-white needs L under ~0.5. Chroma above ~0.25 is already near or past sRGB limits for many hues.
Can I write oklch() percentages like CSS does?
Yes – oklch(63% 0.15 250) parses, with % on L mapping 100% → 1.0, and % on chroma mapping 100% → 0.4 per the CSS spec. Bare numbers are usually clearer.
Why prefer OKLCH over HSL for generating colors?
Two HSL colors with equal L can differ hugely in real lightness; two OKLCH colors with equal L genuinely match. Palettes, hover states and dark themes derived in OKLCH stay consistent – the entire palette section of this site works in it.
What is the hue angle convention in OKLCH?
Degrees 0-360 like HSL, but the families sit at different angles: ~29° red, ~145° green, ~264° blue in OKLCH. Do not port HSL hue numbers across unchanged.
Which tool goes hex → OKLCH?
The HEX to OKLCH converter handles the forward direction – and it is batch-friendly, accepting one color per line for whole palettes. This page is its return path for bringing oklch() values back to hex, and the two link to each other.
