HEX to HSL
Convert any HEX color into the HSL format that's easy to tweak by hue, saturation and lightness.
About the hex to hsl
HSL stands for hue, saturation and lightness. Designers love HSL because adjusting the lightness value gives you instant tints and shades of the same hue, which makes building consistent color systems much easier.
HEX values like #4F46E5 can be converted into HSL via RGB as an intermediate step. The result is hsl(243, 75%, 59%).
Frequently asked questions
What does HSL mean?+
HSL stands for Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). It's a more intuitive way of thinking about color than RGB or HEX.
Why use HSL in CSS?+
HSL makes it easy to generate variations of a color: lower the lightness for a darker shade, raise it for a tint, or rotate the hue for a complementary color.
Is HSL supported in all browsers?+
Yes — hsl() and hsla() are supported in every modern browser and have been for years.
Does converting HEX to HSL lose information?+
Tiny rounding may occur because HSL uses percentages, but the visible color is identical when you convert back.
Color converter tools
Use a focused converter when you already know the input and output format.