OKLCH to HSL Converter

About the OKLCH to HSL Converter

What is OKLCH to HSL conversion?

Sometimes the modern value isn't the one you need. Your design system may publish colors in oklch(), but the project you're patching is standardized on hsl(), your CSS preprocessor tooling expects it, or you simply think in HSL after years of using it. This converter takes OKLCH's perceptual Lightness, Chroma and Hue and returns the classic HSL triple that renders the identical pixel — plus HEX, RGB, LCH, LAB, HWB and CMYK.

The L, C and H sliders each preview their own effect as a live gradient, so you can also use this page as a comfortable OKLCH color picker that happens to output HSL. Out-of-gamut OKLCH values are clipped to the nearest sRGB color first, exactly as a browser would render them. Everything runs locally.

How to Use This Tool

1. Enter the OKLCH values. Sliders or number boxes — paste the three numbers straight from an oklch() token.
2. Read the HSL value. The hsl() string leads the results and is ready for any stylesheet.
3. Cross-check the rest. HEX for design tools, RGB for JavaScript, and the other formats are one copy-click away.
4. Explore variants. Shades, tints and harmonies are generated from whatever color you land on.

Common Use Cases

• Backporting tokens: A design system ships oklch() but an older product still consumes hsl() variables.
• Preprocessor pipelines: Sass functions that manipulate H, S and L need the color in HSL first.
• Familiar editing: Read a modern token, then reason about it in the format your team already knows.
• Browser support floors: Serve hsl() where legacy browser share still matters.
• Quick visualization: Type an oklch() from a code review and instantly see and reuse the color.

Going modern instead? Use the HSL to OKLCH converter, get a HEX code, or browse all our free color tools.

Frequently Asked Questions

How do I convert OKLCH to HSL?

Enter Lightness, Chroma and Hue with the sliders or type them from your oklch() value. The tool converts through sRGB and shows the exact matching hsl() at the top of the results.

Why don't the two lightness numbers match?

OKLCH's L is perceptual while HSL's L is geometric, so the same color usually carries different numbers in each: a vivid blue might be L 45% in OKLCH but L 60% in HSL. Both describe the identical pixel; they just measure differently.

Why did my value change slightly after I moved a slider?

OKLCH, LCH and LAB can describe colors that no screen pixel can show. When a slider combination lands outside the sRGB range, the tool clips it to the nearest displayable color, so extreme chroma values may snap back once converted.

Will the color look the same in HSL?

Yes, pixel-identical, as long as the OKLCH value was within the sRGB gamut. If it was outside, the converter clips to the closest displayable color first, which is also what browsers do when rendering it.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the page keeps working offline once loaded.