HEX to HSL Converter
Convert HEX color codes to Hue, Saturation, and Lightness
Safe conversion with no data sent to server
Conversions
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)
Tailwindblue-500
CSS Var--color: #3B82F6;
What is HSL Color?
HSL stands for Hue, Saturation, and Lightness. Unlike RGB which represents colors by their red, green, and blue components, HSL represents colors in a way that is more intuitive to human vision.
- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
- Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
- Lightness is also a percentage; 0% is black, 100% is white, and 50% is normal.
Why use HSL?
HSL is particularly useful when creating color themes. By keeping the hue constant and adjusting the lightness, you can easily create variations of a single brand color (e.g., hover states, active states, backgrounds).