HEX to HSL converter
Get the hue, saturation and lightness of any HEX colour — the format that makes tints, shades and themes easy.
| HEX | #D94F8C |
|---|---|
| RGB | rgb(217, 79, 140) |
| HSL | hsl(333, 64%, 58%) |
| CMYK | cmyk(0%, 64%, 35%, 15%) |
How to convert HEX to HSL
- Convert HEX to RGB and divide each channel by 255.
- Lightness L = (max + min) ÷ 2.
- Saturation S = (max − min) ÷ (1 − |2L − 1|); 0 if max = min.
- Hue: depends on which channel is largest — e.g. if red is max, H = 60 × ((G − B) ÷ (max − min)) mod 360.
Worked example
#D94F8C → rgb(217, 79, 140) → .851, .310, .549
L = (.851 + .310) ÷ 2 = 58%
S = .541 ÷ (1 − |1.161 − 1|) = 64%
H = 60 × ((.310 − .549) ÷ .541) + 360 = 333° → hsl(333, 64%, 58%)Good to know
- In CSS, hsl(333 64% 58%) (space-separated) and hsl(333, 64%, 58%) are equivalent.
- HSL lightness is not perceptual: hsl(60, 100%, 50%) yellow looks far lighter than hsl(240, 100%, 50%) blue. For perceptual scales use OKLCH, shown in the picker.
- Rounding HSL to whole numbers can shift the HEX by one step when converting back.
Need the colour from an image first? Use the colour picker from image — it shows all formats at once.
HSL is a colour wheel with two dials
Hue is the angle around the wheel (0° red, 120° green, 240° blue). Saturation is how far from grey, and Lightness runs from black (0%) through the pure colour (50%) to white (100%). That’s why designers like HSL: “same colour, 10% lighter” is one number.
hsl(330, 80%, 45%) = rgb(207, 23, 115)
Common colours: HEX and HSL reference
Basic web colours and a few popular named shades.
| Colour | HEX | HSL |
|---|---|---|
| White | #FFFFFF | hsl(0, 0%, 100%) |
| Black | #000000 | hsl(0, 0%, 0%) |
| Red | #FF0000 | hsl(0, 100%, 50%) |
| Lime | #00FF00 | hsl(120, 100%, 50%) |
| Blue | #0000FF | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | hsl(300, 100%, 50%) |
| Silver | #C0C0C0 | hsl(0, 0%, 75%) |
| Grey | #808080 | hsl(0, 0%, 50%) |
| Maroon | #800000 | hsl(0, 100%, 25%) |
| Olive | #808000 | hsl(60, 100%, 25%) |
| Green | #008000 | hsl(120, 100%, 25%) |
| Purple | #800080 | hsl(300, 100%, 25%) |
| Teal | #008080 | hsl(180, 100%, 25%) |
| Navy | #000080 | hsl(240, 100%, 25%) |
| Orange | #FFA500 | hsl(39, 100%, 50%) |
| Coral | #FF7F50 | hsl(16, 100%, 66%) |
| Gold | #FFD700 | hsl(51, 100%, 50%) |
| Tomato | #FF6347 | hsl(9, 100%, 64%) |
| Hot pink | #FF69B4 | hsl(330, 100%, 71%) |
| Indigo | #4B0082 | hsl(275, 100%, 25%) |
| Chocolate | #D2691E | hsl(25, 75%, 47%) |
| Slate grey | #708090 | hsl(210, 13%, 50%) |
| Sky blue | #87CEEB | hsl(197, 71%, 73%) |
Questions people ask
Why use HSL instead of HEX?
Because it matches how people think about colour. To make a button hover state 8% darker you change one number (lightness), instead of recalculating three hex pairs.
What is HSL vs HSB/HSV?
Both use hue and saturation, but HSB (used by Photoshop and Figma’s picker) measures brightness, where 100% is the pure colour; in HSL, 100% lightness is always white and the pure colour sits at 50%.
What is the HSL of pure red?
hsl(0, 100%, 50%). Pure green is hsl(120, 100%, 50%) and pure blue is hsl(240, 100%, 50%).