Color · Converter
Hex to HSL converter.
Type a hex code and get hue, saturation and lightness. Edit the HSL side and the hex follows. Shorthand and 8 digit alpha hex are supported.
Convert both ways
All formats
Enter a color to see every format.
How HEX to HSL works
The steps
- Hex to RGB. Read each pair as base 16. #FF5733 is 255, 87, 51; divide by 255 to get 1.000, 0.341, 0.200.
- Max, min, lightness. max = 1.000, min = 0.200, and lightness L = (max + min) ÷ 2 = 0.600, which is 60%.
- Saturation. With d = max − min = 0.800, saturation S = (max − L) ÷ min(L, 1 − L) = 0.400 ÷ 0.400 = 1, which is 100%. (Black, white and greys have S = 0.)
- Hue. The largest channel decides the formula. Here red is largest, so H = (G − B) ÷ d = 0.1765, times 60 is 10.6 degrees, which rounds to 11. If green is largest add 2 before multiplying, and if blue is largest add 4. When red is largest and green is less than blue, add 6 first so the hue stays positive.
So #FF5733 is hsl(11, 100%, 60%). This is the rgbToHsl sample code in CSS Color 4, section “Converting sRGB Colors to HSL”.
Rounding. This tool shows hue, saturation and lightness as whole numbers, the way most color pickers do. That is why converting the HSL back can land one step away from the original hex (hsl(11, 100%, 60%) returns #FF5833). The hex side is always the exact one.
Sources
- CSS Color Module Level 4, W3C Candidate Recommendation Draft (retrieved October 16, 2026).
Cite this page: TNAADO Tools, “Hex to HSL Converter,” tools.tnaado.ca/color/hex-to-hsl/, formulas from the W3C CSS Color specifications, retrieved October 16, 2026.
20 common colors
Click Use to load a row into the converter. The names are CSS color names; CMYK is the simple screen formula described above.
| Color | HEX | RGB | HSL | CMYK | Load |
|---|---|---|---|---|---|
| black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) | |
| white | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) | |
| red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) | |
| lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) | |
| blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) | |
| yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) | |
| cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | cmyk(100%, 0%, 0%, 0%) | |
| magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | cmyk(0%, 100%, 0%, 0%) | |
| gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) | |
| silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | cmyk(0%, 0%, 0%, 25%) | |
| maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | cmyk(0%, 100%, 100%, 50%) | |
| olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | cmyk(0%, 0%, 100%, 50%) | |
| green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | cmyk(100%, 0%, 100%, 50%) | |
| purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | cmyk(0%, 100%, 0%, 50%) | |
| teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | cmyk(100%, 0%, 0%, 50%) | |
| navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | cmyk(100%, 100%, 0%, 50%) | |
| orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) | |
| pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | cmyk(0%, 25%, 20%, 0%) | |
| brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | cmyk(0%, 75%, 75%, 35%) | |
| gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | cmyk(0%, 16%, 100%, 0%) |
Hex to HSL FAQ
How do I convert hex to HSL?
Convert the hex to red, green and blue, then work out the largest and smallest channel. Lightness is their average, saturation is the spread relative to lightness, and hue is the angle on the color wheel set by the largest channel. #FF5733 is hsl(11, 100%, 60%).
What do the three HSL numbers mean?
Hue is the angle around the color wheel in degrees, from 0 to 360 (0 is red, 120 green, 240 blue). Saturation is how vivid the color is, 0% grey to 100% full color. Lightness runs from 0% black through the pure color at 50% to 100% white.
Why does my hex change by one when I convert back?
HSL is shown as whole numbers, which is a coarser grid than the 16.7 million hex colors, so a round trip can be off by a step on one channel. Hex to HSL and then back is not guaranteed to return the same hex.
What is the hue of a grey?
Greys have no hue, so the tool shows 0. Saturation is 0% for black, white and every grey, and the lightness alone sets the shade.
Does it handle transparency?
Yes. An 8 digit hex such as #FF573380 gives hsla(11, 100%, 60%, 0.5). The alpha is the last pair divided by 255.
Is anything I type sent to a server?
No. The conversion runs in your browser and nothing is uploaded or stored.
What this does, and what it does not
This converts between written forms of sRGB colors, the color space browsers use for CSS by default. It does not convert to other color spaces such as Display P3 or Lab. Everything runs in your browser; nothing you type is sent anywhere.