OKLCH to HSL Converter
Convert CSS oklch() colors to standard hsl(h, s%, l%) strings with automated gamut mapping.
Why Convert OKLCH to HSL?
While modern front-end workflows embrace OKLCH, certain legacy CSS preprocessors, email clients, or native apps continue to mandate HSL formats. Our engine translates OKLCH into standard 360-degree HSL values with graceful gamut clamping.
How to Convert OKLCH to HSL
- Paste any
oklch()value (e.g.oklch(62.3% 0.188 259.8)) into the input field above. - Our engine converts OKLCH to Oklab, then through the inverse LMS matrix to linear RGB, then gamma-encodes to sRGB.
- sRGB is converted to HSL cylindrical coordinates: hue (0-360), saturation (0-100%), lightness (0-100%).
The math path: OKLCH → Oklab (Cartesian) → linear RGB (inverse LMS) → gamma-encoded sRGB → HSL (cylindrical transform).
OKLCH to HSL Reference Values
| Swatch | OKLCH Input | Color Name | HSL Output |
|---|---|---|---|
| oklch(100.0% 0.000 0.0) | Pure White | hsl(300, 50%, 100%) | |
| oklch(0.0% 0.000 0.0) | Pure Black | hsl(0, 0%, 0%) | |
| oklch(62.3% 0.188 259.8) | HSL Blue 500 | hsl(217.21, 91.22%, 59.8%) | |
| oklch(51.1% 0.230 277.0) | HSL Indigo 600 | hsl(243.41, 75.38%, 58.63%) | |
| oklch(69.6% 0.149 162.5) | HSL Emerald 500 | hsl(160.13, 84.18%, 39.39%) | |
| oklch(63.7% 0.208 25.3) | HSL Red 500 | hsl(0, 84.21%, 60.19%) | |
| oklch(76.9% 0.165 70.1) | HSL Amber 500 | hsl(37.71, 92.15%, 50.15%) | |
| oklch(71.5% 0.126 215.2) | HSL Cyan 500 | hsl(188.75, 94.26%, 42.79%) | |
| oklch(55.5% 0.000 0.0) | HSL Gray 500 | hsl(300, 0%, 45.09%) | |
| oklch(20.8% 0.040 265.8) | HSL Slate 900 | hsl(222.22, 47.34%, 11.18%) | |
| oklch(62.7% 0.233 303.9) | HSL Purple 500 | hsl(270.74, 90.97%, 65.09%) | |
| oklch(65.6% 0.212 354.3) | HSL Pink 500 | hsl(330.37, 81.19%, 60.39%) |
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: Automatic sRGB Mapping
When an OKLCH color falls outside the sRGB gamut, our engine automatically clamps chroma to the nearest in-gamut value while preserving hue. The resulting HSL value is always valid and renders consistently across all displays.
- Display-P3 Colors: On wide-gamut monitors, the original OKLCH color appears more vivid. The HSL output represents the sRGB-clamped version.
- Alpha Preservation: An OKLCH value with alpha converts to
hsla(h, s%, l%, a)with the alpha channel intact.
Frequently Asked Questions
Why do I need HSL if I have OKLCH?
Legacy tools — email clients, older CSS preprocessors, native apps, and some design tools — only understand HSL. Converting OKLCH to HSL ensures compatibility with these tools.
Is the OKLCH to HSL conversion lossy?
For sRGB colors, the conversion is lossless. For Display-P3 colors, clamping to sRGB is a lossy step. The OKLCH original remains the source of truth.
Can I use OKLCH alpha in hsla()?
Yes. oklch(62.3% 0.188 259.8 / 0.5) converts to hsla(217, 91%, 60%, 0.5) — the alpha channel is preserved.
What happens with out-of-gamut colors?
The engine clamps chroma to the nearest in-gamut value while preserving hue. You will see a gamut badge indicating the color was clamped.
How do I use HSL values in email templates?
Many email clients only support HSL or HEX. Use the HSL output directly in your inline styles — it will render consistently across email clients.