HSL to OKLCH Converter
Convert hsl(h, s%, l%) strings to CSS OKLCH format and eliminate non-uniform perceptual lightness distortion.
The Flaw in HSL Lightness
HSL calculates lightness as a crude geometric average of maximum and minimum RGB channels: (max(R,G,B) + min(R,G,B)) / 2. This ignores the biological reality of human eyes, which are 30 times more sensitive to green and yellow light than blue light. Converting to OKLCH solves this permanently.
How to Convert HSL to OKLCH
- Paste any
hsl()value (e.g.hsl(217, 91%, 60%)) into the input field above. - Our engine converts HSL to RGB, then applies gamma decoding to get linear RGB, then transforms through the Oklab LMS cone response matrices.
- The result is a perceptually uniform OKLCH value where equal lightness looks equally bright across all hues.
The math path: HSL → RGB (cylindrical to Cartesian) → linear RGB (gamma decode) → Oklab (LMS matrices) → OKLCH (cylindrical transform).
HSL to OKLCH Reference Values
| Swatch | Color | HSL Code | OKLCH Value |
|---|---|---|---|
| Pure White | hsl(300, 50%, 100%) | oklch(100.0% 0.000 0.0) | |
| Pure Black | hsl(0, 0%, 0%) | oklch(0.0% 0.000 0.0) | |
| HSL Blue 500 | hsl(217.21, 91.22%, 59.8%) | oklch(62.3% 0.188 259.8) | |
| HSL Indigo 600 | hsl(243.41, 75.38%, 58.63%) | oklch(51.1% 0.230 277.0) | |
| HSL Emerald 500 | hsl(160.13, 84.18%, 39.39%) | oklch(69.6% 0.149 162.5) | |
| HSL Red 500 | hsl(0, 84.21%, 60.19%) | oklch(63.7% 0.208 25.3) | |
| HSL Amber 500 | hsl(37.71, 92.15%, 50.15%) | oklch(76.9% 0.165 70.1) | |
| HSL Cyan 500 | hsl(188.75, 94.26%, 42.79%) | oklch(71.5% 0.126 215.2) | |
| HSL Gray 500 | hsl(300, 0%, 45.09%) | oklch(55.5% 0.000 0.0) | |
| HSL Slate 900 | hsl(222.22, 47.34%, 11.18%) | oklch(20.8% 0.040 265.8) | |
| HSL Purple 500 | hsl(270.74, 90.97%, 65.09%) | oklch(62.7% 0.233 303.9) | |
| HSL Pink 500 | hsl(330.37, 81.19%, 60.39%) | oklch(65.6% 0.212 354.3) |
Copy-Ready CSS with Progressive Enhancement
.link {
color: hsl(217, 91%, 60%); /* fallback */
color: oklch(62.3% 0.188 259.8); /* modern browsers */
}Tailwind CSS v4 @theme:
@theme {
--color-link-blue: oklch(62.3% 0.188 259.8);
}Gamut Note: HSL is Always sRGB
Standard hsl() values are confined to the sRGB gamut by definition. Converting from HSL to OKLCH is therefore always gamut-safe. However, the perceptual improvement is significant: HSL's uneven lightness means that hsl(60, 100%, 50%) (yellow) looks almost white while hsl(240, 100%, 50%) (blue) looks very dark, despite both having 50% lightness. OKLCH fixes this.
Frequently Asked Questions
What is the main difference between HSL and OKLCH?
HSL's lightness is not perceptually uniform — yellow at 50% lightness looks almost white, while blue at 50% looks dark. OKLCH's lightness is perceptually uniform: 50% lightness looks equally bright regardless of hue.
Can I convert HSL with alpha to OKLCH?
Yes. hsla(217, 91%, 60%, 0.5) converts to oklch(62.3% 0.188 259.8 / 0.5) — the alpha channel is preserved.
Is HSL to OKLCH conversion reversible?
Yes, for sRGB colors. Converting HSL → OKLCH → HSL yields the original values. The round-trip is lossless within the sRGB gamut.
Why should I switch from HSL to OKLCH?
OKLCH gives you perceptually uniform lightness, predictable palettes, and access to wide-gamut Display-P3 colors. It makes accessible, consistent color systems far easier to build.
Do all browsers support oklch()?
Yes. oklch() is a Baseline feature available across all modern browsers since May 2023. Chrome, Edge, Safari, and Firefox all support it natively.