HSL to OKLCH
Convert HSL color values to OKLCH instantly. Paste any HSL value into the free Color Converter and get the OKLCH equivalent (plus RGB, HSL, HSV, OKLCH and CMYK) with one click — all in your browser, nothing uploaded.
Convert any color →Example
hsl(221, 83%, 53%)→oklch(55% 0.22 263)
HSL to OKLCH 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 | HSL | OKLCH |
|---|---|---|
| Black | hsl(0, 0%, 0%) | oklch(0% 0 0) |
| White | hsl(0, 0%, 100%) | oklch(100% 0 90) |
| Slate 500 | hsl(215, 16%, 47%) | oklch(55% 0.04 257) |
| Red 500 | hsl(0, 84%, 60%) | oklch(64% 0.21 25) |
| Lime 500 | hsl(84, 81%, 44%) | oklch(77% 0.2 131) |
| Green 500 | hsl(142, 71%, 45%) | oklch(72% 0.19 150) |
| Violet 500 | hsl(258, 90%, 66%) | oklch(61% 0.22 293) |
| Pink 500 | hsl(330, 81%, 60%) | oklch(66% 0.21 354) |
About the formats
HSL. HSL = Hue (0–360°), Saturation and Lightness (0–100%) — intuitive for tweaking colors.
OKLCH. OKLCH is a modern, perceptually-uniform CSS color space (Lightness, Chroma, Hue).
Other conversions
HEX → RGBHEX → HSLHEX → HSVHEX → CMYKHEX → OKLCHRGB → HEXRGB → HSLRGB → HSVRGB → CMYKRGB → OKLCHHSL → HEXHSL → RGBHSL → HSVHSL → CMYKHSV → HEXHSV → RGBHSV → HSLHSV → CMYKHSV → OKLCHCMYK → HEXCMYK → RGBCMYK → HSLCMYK → HSVCMYK → OKLCHOKLCH → HEXOKLCH → RGBOKLCH → HSLOKLCH → HSVOKLCH → CMYK
Browse popular colors →