HEX is an encoded sRGB value. OKLCH is a perceptual color model that can describe colors beyond sRGB. Conversion is therefore sometimes more than changing notation: the color may need to move into the smaller destination gamut first.
A worked conversion
For oklch(72% 0.28 330), this site’s current engine produces the following target-specific result:
| Target | Mapped OKLCH | sRGB HEX fallback | ΔEOK |
|---|---|---|---|
| sRGB | oklch(72% 0.28 330) | #fd46f5 | 0.0000 |
| Display P3 | oklch(72% 0.28 330) | #fd46f5 | 0.0000 |
The P3 result can retain more chroma on a compatible display, but the displayed HEX remains an sRGB fallback. The example is generated from the same color engine as the live tool during the site build, preventing documentation and code from drifting apart.
The conversion steps
- Normalize lightness, chroma, hue and alpha.
- Convert OKLCH through its underlying color-space transforms.
- Test whether the result fits the destination gamut.
- If necessary, reduce chroma perceptually while preserving lightness and hue as far as practical.
- Encode the mapped sRGB channels as two-digit hexadecimal bytes.
Why channel clipping can mislead
A naive converter can cap red, green or blue channels at their limits. The output is technically displayable, but it may shift hue or collapse differences between adjacent palette steps. CSS Color 4 describes a perceptual approach based on chroma reduction and an OK-space difference threshold instead.
Read ΔEOK as disclosure, not a pass/fail badge. A larger value means the mapped color moved farther from the requested coordinate. Whether the change is acceptable depends on the role and neighboring colors.
Keep intent and fallback together
.accent {
color: #fd46f5;
color: oklch(72% 0.28 330);
}Modern browsers use the later declaration. The fallback documents an sRGB delivery value. For a P3 enhancement, add a color(display-p3 …) declaration inside a capability query and keep the sRGB fallback first.
What about alpha?
Eight-digit HEX can encode alpha, but contrast must be calculated after compositing the translucent color over its actual background. The generator keeps alpha in OKLCH parsing but its contrast workflow is designed around final opaque mapped colors.
Paste an OKLCH value.
Every swatch exposes mapped OKLCH, HEX, P3 and ΔEOK.
Sources and further reading
Technical claims are grounded in specifications and primary documentation. Product observations are dated snapshots from direct use.