OKLCH to HSL Converter
Convert an OKLCH color to HSL for CSS, with a live preview. All conversion runs locally in your browser.
oklch(0.7 0.15 250)HSL Result
Other Formats
#4ba3f7rgb(75, 163, 247)How OKLCH to HSL conversion works
OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space built on OKLab — equal numeric steps in L, C, or H correspond to equal perceived changes in color, which makes it ideal for generating palettes and gradients that look smooth to the human eye. It is natively supported in modern CSS via the oklch() function.
HSL (Hue, Saturation, Lightness) is the older, more widely supported cylindrical color model most CSS developers already know. To convert, this tool first maps OKLCH to OKLab, then to linear sRGB via the standard OKLab-to-LMS and LMS-to-linear-RGB matrices, applies the sRGB gamma curve, and finally derives HSL from the resulting RGB channels. Because OKLCH can represent colors outside the sRGB gamut, some inputs are clamped to the closest displayable HSL value.
Need the reverse direction or other formats? Try HSL to HEX, the full OKLCH Color Converter, or OKLCH to HEX.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing an HSL fallback from a palette authored in OKLCH.
- Converting a modern colour for tooling that only accepts HSL.
- Comparing a perceptual value against an HSL one.
- Getting a legacy value for an older stylesheet.
- Checking how much a colour shifts when clipped into sRGB.
Frequently Asked Questions
- Why would I convert from OKLCH back to HSL?
- Compatibility. A palette is best designed in OKLCH and sometimes has to be delivered as HSL — an older build pipeline, a design tool that will not accept it, or a codebase where every other colour is already HSL. The conversion is a delivery step, not a design one.
- What is lost in the conversion?
- The perceptual guarantee. Three OKLCH colours at the same lightness look equally light; the same three as HSL will have three different L values, and adjusting them afterwards in HSL breaks the evenness the palette was built for.
- Why do the lightness numbers differ so much?
- Because they measure different things. OKLCH lightness is perceptual — 50 is a mid-grey to the eye. HSL lightness is a geometric position between black and white in a cylinder, so a fully saturated yellow sits at 50% there while looking almost white.
- What happens to an out-of-gamut colour?
- It is clipped to sRGB, since HSL cannot describe anything beyond it. That is a real loss when the source was a P3 colour, and the clipped result is usually noticeably duller — which is the honest cost of targeting the older model.
- Is the round trip stable?
- Approximately, not exactly. Rounding HSL to whole-number percentages quantises the space more coarsely than OKLCH's decimals, so converting out and back shifts values slightly. Keep OKLCH as the source of truth and treat HSL as generated output.
Common errors and gotchas
- Expecting HSL to preserve the perceptual spacing that OKLCH was chosen for, which it does not.
- Assuming every OKLCH colour converts cleanly, when out-of-gamut values must be clipped.
- Reading the two lightness channels as comparable, which they are not.
- Building a scale in OKLCH and then editing it in HSL, which destroys the evenness.
- Treating the conversion as lossless in both directions.