HSL to OKLCH Converter
Convert HSL color values to OKLCH format instantly. OKLCH perceptual uniformity makes it an upgrade from HSL for CSS manipulation, accessible color scale design, and modern design systems.
name, hex, rgb, hsl, hwb, cmyk, ncol
| Format | Value | |
|---|---|---|
| OKLCH | oklch(73.5% 0.1665 37.54) | |
| Name | — | |
| Hex | #ff7e57 | |
| RGB | rgb(255, 126, 87) | |
| HSL | hsl(14, 100%, 67%) | |
| HWB | hwb(14, 34%, 0%) | |
| CMYK | cmyk(0%, 51%, 66%, 0%) | |
| NCol | R23, 34%, 0% |
Lighter / Darker:
oklch(95.4% 0.0233 37.38)
oklch(87.7% 0.0669 36.82)
oklch(80.5% 0.1139 37.45)
oklch(74.1% 0.1614 37.64)
oklch(68.9% 0.2042 36.80)
oklch(65.3% 0.2354 33.88)
oklch(56.3% 0.2015 34.20)
oklch(47.0% 0.1661 34.70)
oklch(37.2% 0.1285 35.63)
oklch(26.9% 0.0868 38.60)
oklch(15.6% 0.0421 48.44)
Pick a Color:
Related Color Converters
How to Use This Tool
Enter an HSL value in hsl(h, s%, l%) syntax. The tool converts it to OKLCH — a perceptually uniform color format built for modern CSS. Unlike HSL, adjusting OKLCH lightness looks visually consistent regardless of hue, making it ideal for accessible color ramps. Output uses oklch() CSS syntax. Click to copy any value. The shade bar displays OKLCH values for each tint and shade so you can build a uniform palette in one place.