Skip to main content
WebColorTools

OKLCH to HSL Converter

Convert OKLCH color values to HSL instantly. Free, in your browser.

Instant 100% Private Free Forever
OKLCH HSL CSS Converters
Swap to HSL → OKLCH
OKLCH values

HSL output

hsl(11, 100%, 60%)
Raw 11, 100%, 60%
HEX #FF5733

Examples

How to use the OKLCH to HSL Converter

Four steps to turn OKLCH into HSL cylindrical values.

  1. 1

    Enter OKLCH values

    Type lightness (0–100), chroma, and hue (0–360), or pick a color with the swatch.

  2. 2

    Check the live preview

    The large swatch updates as you edit so you can verify the color before copying.

  3. 3

    Copy the HSL value

    Click Copy next to the main hsl() output, or grab Raw components or the bonus HEX code.

  4. 4

    Try an example

    Use Load example or the gallery chips for oklch(68% 0.21 33.5), a blue-violet, and black.

What is OKLCH to HSL conversion?

OKLCH to HSL conversion translates perceptually uniform OKLCH coordinates into the familiar cylindrical HSL model that many developers and design tools still use. You might receive colors as OKLCH from a modern design system or Tailwind v4 config, but need HSL for legacy Sass variables, documentation, or team communication. This free converter closes that gap instantly with a live preview and one-click copy.

OKLCH (Oklab Lightness, Chroma, Hue) separates lightness, chroma, and hue in a way that matches human vision. CSS accepts oklch(68% 0.21 33.5) in supported browsers. HSL expresses the same sRGB color as an angle plus two percentages — for example hsl(11, 100%, 60%). Search phrases like oklch to hsl, oklch to hsl converter, and convert oklch to hsl describe this reverse handoff from modern OKLCH tokens to HSL notation.

The conversion pipeline transforms OKLCH through OKLab into RGB, then derives HSL using standard CSS formulas. Raw comma-separated HSL components and a bonus HEX row accompany the primary hsl() output. For the reverse direction, use our HSL to OKLCH converter, or explore HEX to HSL and the all-in-one Color Converter.

Frequently asked questions

Why convert OKLCH back to HSL?
OKLCH is ideal for perceptually uniform design tokens, but many legacy codebases, tutorials, and tools still use HSL. If you received an OKLCH value from a modern design system and need to communicate it to a team working in HSL — or paste into older Sass mixins — this converter gives you the exact hsl() string with a live swatch preview.
What does oklch(68% 0.21 33.5) become in HSL?
That vivid orange-red maps to roughly hsl(11, 100%, 60%) and HEX #FF5733. Exact values depend on rounding; the live swatch confirms the match before you copy.
What is the Raw output row?
Raw lists hue, saturation, and lightness as comma-separated numbers — for example 11, 100%, 60% — without the hsl() wrapper. Handy for spreadsheets, design docs, or preprocessors that assemble the function yourself.
Will HSL from OKLCH match browser rendering?
Yes, within normal rounding. The conversion path is OKLCH → OKLab → RGB → HSL using the same formulas as CSS. Very small differences (±1 on a percentage) can appear because OKLCH chroma and hue are stored as decimals, but the swatch preview uses the computed RGB so you can visually confirm the result.
Is my color data private?
Yes. Conversion runs entirely in your browser. Your OKLCH values are never uploaded, stored on a server, or sent to any API.

Related tools

More free tools — all run in your browser.

HSL to OKLCH

Convert HSL color values to OKLCH instantly.

OKLCH to HEX

Convert OKLCH color values to HEX codes instantly.

HSL to HEX

Convert HSL color values to HEX codes instantly.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.