Skip to content

Convert OKLCH to HSL

Converting Lightness, Chroma, Hue (perceptual) (OKLCH) to Hue, Saturation, Lightness (HSL) is a precise, rule-based operation — both formats describe the same color with different numbers. Whether you are tuning a CSS custom property, matching a brand color across design tools, or preparing values for print, this page gives you an interactive converter, the exact OKLCH → HSL method, a worked example, a quick-reference table and the details that matter (rounding, gamut and print caveats).

From

To

—

—

—

Live preview

How to convert OKLCH to HSL

Take this real example — the color firebrick(#c2410c):

oklch(0.553 0.174 38.4) → hsl(17.47, 88.35%, 40.39%)

  1. Convert the OKLCH color to RGB using the OKLCH → RGB method.
  2. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format.
  3. Convert RGB to HSL with the RGB → HSL method to finish.

OKLCH → RGB → HSL (RGB is the numeric bridge)

OKLCH to HSL conversion table

OKLCH to HSL — quick reference
Common colors converted from OKLCH to HSL
ColorOKLCHHSL
Whiteoklch(1 0 90)hsl(0, 0%, 100%)
Blackoklch(0 0 0)hsl(0, 0%, 0%)
Redoklch(0.628 0.258 29.23)hsl(0, 100%, 50%)
Limeoklch(0.866 0.295 142.5)hsl(120, 100%, 50%)
Blueoklch(0.452 0.313 264.05)hsl(240, 100%, 50%)
VersatilBox accentoklch(0.553 0.174 38.4)hsl(17.47, 88.35%, 40.39%)
Tailwind blue-500oklch(0.623 0.188 259.81)hsl(217.22, 91.22%, 59.8%)
Tailwind emerald-500oklch(0.696 0.149 162.48)hsl(160.12, 84.08%, 39.41%)

About these formats

OKLCH (Lightness, Chroma, Hue (perceptual)). OKLCH is the modern perceptual space from CSS Color 4: L for lightness, C for chroma (intensity) and H for hue, designed so that equal numeric steps look like equal steps to your eye.

HSL (Hue, Saturation, Lightness). HSL is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.

Frequently asked questions

How do I convert OKLCH to HSL?

Convert the OKLCH color to RGB using the OKLCH → RGB method. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format. Convert RGB to HSL with the RGB → HSL method to finish. The converter above does it instantly, including the reverse direction.

What is OKLCH?

OKLCH — Lightness, Chroma, Hue (perceptual) — is the modern perceptual space from CSS Color 4: L for lightness, C for chroma (intensity) and H for hue, designed so that equal numeric steps look like equal steps to your eye.

What is HSL used for?

HSL (Hue, Saturation, Lightness) is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.

Is the OKLCH → HSL conversion exact?

Yes, within display precision. OKLCH values are typically stored to 3 decimals, and on very saturated colors that can shift a channel by 1–3 units of 255 after a round trip — invisible in practice, and exactly how browsers and conversion tools round.

Why does the HSL value look different in other tools?

Small differences come from rounding (how many decimals are kept) and from out-of-gamut handling. This site follows the CSS Color 4 algorithms and shows OKLCH with 3 decimals, the same convention used by browsers and mainstream design tools.