Enter a HEX code
Type the colour.
Code & Data Tool
HEX to HSL
Convert HEX colors to HSL values.
Loading workspace...
About this tool
What is HEX to HSL?
HEX to HSL converts hex colours to hue, saturation and lightness, which makes it easier to build lighter and darker shades.
Useful when you need to
- Create tints and shades of a colour
- Understand a colour's lightness
- Use HSL in CSS
How to use
How to use HEX to HSL
01 02 Convert
Read hue, saturation and lightness.
03 Adjust
Change lightness in your CSS to make shades.
04 Copy
Use the HSL value.
Tips
Get better results
- Hue is in degrees from 0 to 360.
- Rounding can make tiny differences when converting back.
FAQ
Frequently asked questions
Why use HSL?
It makes adjusting lightness and saturation intuitive.
Is it private?
Yes.
Is the conversion exact?
It is rounded, so round trips may differ slightly.
More practical guides · File handling and privacy · Report an incorrect instruction