HEX to OKLCH Converter
Paste a HEX value and get the exact OKLCH equivalent instantly — plus every other color format, a gamut check and one-click copy.
Gamut: srgb
Common HEX → OKLCH values
| Vivid Indigo | #6366f1 | oklch(0.5854 0.2041 277.12) | Details |
| Vivid Red | #ef4444 | oklch(0.6368 0.2078 25.33) | Details |
| Orange | #f97316 | oklch(0.7049 0.1867 47.6) | Details |
| Light Yellow | #eab308 | oklch(0.7952 0.1617 86.05) | Details |
| Vivid Green | #22c55e | oklch(0.7227 0.192 149.58) | Details |
| Teal | #14b8a6 | oklch(0.7038 0.123 182.5) | Details |
| Sky Blue | #0ea5e9 | oklch(0.6847 0.1479 237.32) | Details |
| Blue | #3b82f6 | oklch(0.6231 0.188 259.81) | Details |
| Vivid Violet | #8b5cf6 | oklch(0.6056 0.2189 292.72) | Details |
| Vivid Pink | #ec4899 | oklch(0.6559 0.2118 354.31) | Details |
| Medium Gray | #78716c | oklch(0.5534 0.0116 58.07) | Details |
| Black | #000000 | oklch(0 0 0) | Details |
Why convert to OKLCH at all
Once a color is in OKLCH you can lighten it by changing one number, desaturate it by changing another, and rotate hue without the lightness sliding around. That makes ramps, hover states and accessible text pairs deterministic.
A practical token pattern
Store the brand color once as OKLCH, then derive everything else with relative color syntax:
:root {
--brand: oklch(0.5854 0.2041 277.12);
--brand-hover: oklch(from var(--brand) calc(l - 0.06) c h);
--brand-subtle: oklch(from var(--brand) 0.96 calc(c * 0.25) h);
}Keeping a fallback
Declare HEX first and OKLCH second inside the same rule. Browsers that do not understand the second declaration keep the first, and everyone else gets the modern value.
Frequently asked questions
- What do the three OKLCH numbers mean?
- Lightness from 0 (black) to 1 (white), chroma — colorfulness — from 0 to roughly 0.37 in sRGB, and hue in degrees from 0 to 360.
- Is oklch() safe to ship in 1970?
- Yes. oklch() is supported in every current major browser. If you still support very old versions, keep a HEX declaration immediately above the OKLCH one as a fallback.
- Why does my HEX round-trip with tiny differences?
- HEX has 8 bits per channel while OKLCH is continuous, so converting back rounds to the nearest representable byte. The difference is far below what the eye can detect.
- Can OKLCH describe colors HEX cannot?
- Yes. OKLCH can express Display-P3 and Rec.2020 colors outside sRGB. Converting those to HEX clamps them into sRGB, which is why a gamut badge is shown.