HSL to OKLCH Converter

About the HSL to OKLCH Converter

What is HSL to OKLCH conversion?

HSL and OKLCH look like cousins — both have a hue angle and a lightness — but they behave very differently. HSL's numbers are simple geometry over RGB, so hsl(60, 100%, 50%) yellow and hsl(240, 100%, 50%) blue claim the same lightness while one glows and the other broods. OKLCH fixes exactly that: its L tracks perceived brightness, so equal numbers finally mean equal-looking colors. This tool converts any hsl() value to its true oklch() equivalent.

It's built for the migration many CSS codebases are making right now. Keep using the H, S and L sliders you're used to, and read off the modern value on the right — along with HEX, RGB, LCH, LAB, HWB and CMYK. As with all our color tools, the math runs in your browser and nothing is uploaded.

How to Use This Tool

1. Dial in your HSL color. Drag Hue, Saturation and Lightness or type the exact numbers from your stylesheet.
2. Read the OKLCH value. It heads the results list, formatted for CSS, and updates live.
3. Note the differences. Watch how OKLCH's L differs from HSL's L across hues — that gap is why palettes drift.
4. Copy or keep exploring. Every format has one-click copy, and the swatch sections let you branch into shades and harmonies.

Common Use Cases

• Migrating design tokens: Upgrade an hsl()-based system to OKLCH without changing how any color renders.
• Fixing uneven palettes: Scales that looked lumpy in HSL become smooth once rebuilt around OKLCH lightness.
• Debugging brightness: See what a pair of same-L HSL colors actually differ by in perceived lightness.
• Learning OKLCH: Converting familiar HSL values is the fastest way to build intuition for the new numbers.
• Staying consistent: Hand teammates oklch() values while your source material is still HSL.

Need the reverse? Use the OKLCH to HSL converter, go via HEX, or browse all our free color tools.

Frequently Asked Questions

Why convert HSL to OKLCH?

Because HSL lightness doesn't match perception: two HSL colors with identical L can look wildly different in brightness. OKLCH's lightness is perceptually uniform, so palettes, hover states and dark-mode adjustments behave the way the numbers suggest.

Do the hue angles match between HSL and OKLCH?

No. Both are degrees around a wheel, but the wheels are calibrated differently; an HSL hue of 240 lands near 264 in OKLCH. The converter handles the remapping exactly, so never copy a hue across formats by hand.

Does the color itself change during conversion?

Not at all. The conversion is exact and the pixel your users see is identical; only the way the color is described changes. Rounding in the displayed digits is fine-grained enough to round-trip perfectly.

Which browsers support oklch()?

Chrome and Edge 111+, Safari 15.4+, and Firefox 113+, which is all evergreen browsers since roughly mid-2023. For anything older, keep an hsl() or hex fallback on the previous line.

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.