Hex to OKLCH color converter
Convert a hex color to OKLCH, the perceptually uniform color space supported in CSS Color Level 4. The OKLCH advantage over HSL and what tooling supports it.
# conversion
| format | foreground | background |
|---|---|---|
| hex | #ff8800 | #0a0a0a |
| rgb | rgb(255, 136, 0) | rgb(10, 10, 10) |
| oklch | oklch(75% 0.18 60) | oklch(7.8% 0 0) |
| oklab | oklab(75% 0.09 0.16) | oklab(7.8% 0 0) |
# context
OKLCH (Lightness, Chroma, Hue in OKLab space) is the modern color space designed for perceptual uniformity — equal numeric distances correspond to equal perceived color differences. CSS supports it natively (since 2023 in major browsers).
→ Open in color picker (pre-filled)
# notes
- OKLCH lightness is "perceptual" — going from 50% to 60% looks like a consistent step regardless of the hue.
- Chroma replaces saturation; it can exceed 1.0 for highly saturated colors but is bounded by what the screen can show.
- Use OKLCH when generating color scales (e.g., a button family from 100 to 900). HSL produces uneven steps; OKLCH produces visually consistent ones.