How to convert HEX to HSL
- Paste a hex color code.
- Copy the HSL value from the highlighted row. The shades strip below shows the same hue at different lightness levels.
How HSL is calculated
First convert hex to RGB and divide each channel by 255. Lightness is the average of the largest and smallest channel. Saturation is their difference divided by (1 − |2L − 1|). Hue is the angle on the color wheel (0° red, 120° green, 240° blue), found from which channel is largest. For #0D9488: RGB is (13, 148, 136); max 0.580 and min 0.051 give L = 31.6%, S = 84%, and green being largest gives H ≈ 175°, so hsl(175, 84%, 32%).
| HEX | HSL |
|---|---|
| #FF0000 | hsl(0, 100%, 50%) |
| #00FF00 | hsl(120, 100%, 50%) |
| #0000FF | hsl(240, 100%, 50%) |
| #FFFFFF | hsl(0, 0%, 100%) |
| #000000 | hsl(0, 0%, 0%) |
| #808080 | hsl(0, 0%, 50%) |
| #FFA500 | hsl(39, 100%, 50%) |
| #800080 | hsl(300, 100%, 25%) |
| #1E90FF | hsl(210, 100%, 56%) |
| #0D9488 | hsl(175, 84%, 32%) |
HSL is easier to work with than hex when you want variations: keep the hue and saturation and change only the lightness to get hover states, borders and backgrounds that match. CSS supports hsl() everywhere, and the modern space-separated syntax hsl(175 84% 32%) works too. For perceptually even steps, use OKLCH (also listed).
FAQ
What does HSL stand for?
Hue, saturation and lightness.
How do I make a color lighter in HSL?
Increase the lightness percentage and keep hue and saturation the same.
Why does HSL lightness look uneven between colors?
HSL is not perceptually uniform: yellow at 50% looks much brighter than blue at 50%. OKLCH fixes that.