Convert HEX color to HSL
Convert a hexadecimal color to HSL (hue, saturation, lightness), the most intuitive format for adjusting tones in CSS.
Processed on your device. Nothing is sent to any server.
HSL
hsl(173, 82%, 24%)
Convert a hexadecimal color to HSL (hue, saturation, lightness), the most intuitive format for creating lighter or darker variants of the same color.
Calculates hue (0-360 degrees), saturation and lightness from the RGB channels, following the standard HSL color model.
Use cases
- Creating variants of a color by adjusting only the lightness.
- Defining a CSS color system with hsl().
- Understanding the composition of a brand color.
How it works
- 1
Type the HEX code
Enter the hex code, with or without the hash.
- 2
Copy the HSL
The hsl(h, s%, l%) value is calculated instantly.
Frequently asked questions
- Why use HSL instead of HEX?
- HSL makes it easy to create lighter or darker shades of the same color by changing only the lightness value, which is hard to do by eye with HEX.
Related tools
- HSL to HEXConverts HSL to HEX with preview.
- HEX to RGBConverts HEX to RGB with preview.
- RGB to HEXConverts RGB to HEX with preview.
- Border Radius GeneratorCreates CSS border-radius with preview.
- Box Shadow GeneratorCreates CSS shadows with a live preview.
- Color PickerPick a color and get HEX, RGB and HSL.