OKLCH to HSL
Convert OKLCH color values to HSL instantly. Paste any OKLCH value into the free Color Converter and get the HSL equivalent (plus RGB, HSL, HSV, OKLCH and CMYK) with one click — all in your browser, nothing uploaded.
Convert any color →Example
oklch(58% 0.22 27)→hsl(0, 72%, 51%)
OKLCH to HSL on common colours
The same conversion run on colours from across the wheel, black and white included — the ends of the range are where formats differ most. Click a name for that colour’s full breakdown.
| Colour | OKLCH | HSL |
|---|---|---|
| Black | oklch(0% 0 0) | hsl(0, 0%, 0%) |
| White | oklch(100% 0 90) | hsl(0, 0%, 100%) |
| Slate 500 | oklch(55% 0.04 257) | hsl(215, 16%, 47%) |
| Red 500 | oklch(64% 0.21 25) | hsl(0, 84%, 60%) |
| Lime 500 | oklch(77% 0.2 131) | hsl(84, 81%, 44%) |
| Green 500 | oklch(72% 0.19 150) | hsl(142, 71%, 45%) |
| Violet 500 | oklch(61% 0.22 293) | hsl(258, 90%, 66%) |
| Pink 500 | oklch(66% 0.21 354) | hsl(330, 81%, 60%) |
About the formats
OKLCH. OKLCH is a modern, perceptually-uniform CSS color space (Lightness, Chroma, Hue).
HSL. HSL = Hue (0–360°), Saturation and Lightness (0–100%) — intuitive for tweaking colors.
Other conversions
HEX → RGBHEX → HSLHEX → HSVHEX → CMYKHEX → OKLCHRGB → HEXRGB → HSLRGB → HSVRGB → CMYKRGB → OKLCHHSL → HEXHSL → RGBHSL → HSVHSL → OKLCHHSL → CMYKHSV → HEXHSV → RGBHSV → HSLHSV → CMYKHSV → OKLCHCMYK → HEXCMYK → RGBCMYK → HSLCMYK → HSVCMYK → OKLCHOKLCH → HEXOKLCH → RGBOKLCH → HSVOKLCH → CMYK
Browse popular colors →