Free tools
Hex to HSL Converter
Free hex to HSL converter. Enter a hex color code and instantly get the hue, saturation, and lightness values with a live color preview.
CSS value:
hsl(14, 100%, 60%) Please enter a valid hex color (e.g. #FF5733 or #F53).
Convert Hex to HSL with Our Free Online Tool
Enter any hex color code and instantly see the equivalent HSL (hue, saturation, lightness) values. Results update live as you type and a color preview confirms the output.
What Is HSL?
HSL is a color model that describes colors in terms more intuitive than RGB. Hue is the angle on the color wheel (0–360°), Saturation is the intensity of the color (0–100%), and Lightness is how light or dark the color is (0–100%, where 50% is "normal").
Hex to HSL Conversion
The conversion works by first converting hex to RGB (dividing each channel by 255), then calculating:
- Find the max and min of the R, G, B values.
- Lightness = (max + min) / 2
- Saturation = delta / (1 − |2L − 1|), where delta = max − min
- Hue depends on which channel is the max.
Common Hex to HSL Conversions
| Hex | H (°) | S (%) | L (%) |
|---|---|---|---|
| #000000 | 0 | 0 | 0 |
| #FFFFFF | 0 | 0 | 100 |
| #FF0000 | 0 | 100 | 50 |
| #00FF00 | 120 | 100 | 50 |
| #0000FF | 240 | 100 | 50 |
| #FFFF00 | 60 | 100 | 50 |
| #FF00FF | 300 | 100 | 50 |
| #00FFFF | 180 | 100 | 50 |
| #808080 | 0 | 0 | 50 |
| #FF5733 | 14 | 100 | 60 |
| #3498DB | 204 | 70 | 53 |
| #2ECC71 | 145 | 63 | 49 |