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 |
Frequently Asked Questions
What is HSL?
HSL stands for Hue, Saturation, Lightness. It's an intuitive way to describe colors: Hue is the color type (0-360° on the color wheel), Saturation is the intensity (0% = gray, 100% = vivid), and Lightness is the brightness (0% = black, 100% = white). HSL makes it easier to create color variations than HEX.
How do I convert hex to HSL?
Enter your hex color code (with or without the # symbol) in the input field. The tool instantly converts it to HSL values and shows a live preview. You can copy the HSL values for use in CSS or design applications.
Why convert to HSL instead of keeping hex?
HSL is more intuitive for adjustments. Want a lighter version? Increase lightness. Want it more vibrant? Increase saturation. Want a different shade but same brightness? Just change hue. With hex, these adjustments require trial and error or a color picker.
Do I need the # symbol in hex codes?
No, both formats work. Enter
#7C3AED or just 7C3AED — the tool recognizes either. The output is always shown with the # for clarity since that's the standard CSS format.Can I see a preview of the color?
Yes. As you type, a live color preview updates instantly. You can see both the original hex color and how the HSL values represent it. This helps verify your conversion is correct before using the values.