How it works
The Hex to HSL Converter translates hexadecimal CSS color codes to HSL (Hue, Saturation, Lightness) format — showing hsl(11, 100%, 60%) for #FF5733. A color preview swatch shows the exact color both values represent.
HSL is the most intuitive color model for design work. Hue is the pure color (0–360°, where 0/360 = red, 120 = green, 240 = blue). Saturation is how vivid the color is (0% = gray, 100% = fully saturated). Lightness controls how bright it is (0% = black, 50% = pure color, 100% = white). This model makes it easy to create color variations: darken by reducing lightness, create a muted version by reducing saturation, generate a complementary color by rotating the hue by 180°.
How to use it: enter a hex color (with or without #, in 3 or 6 digit format). The HSL values appear immediately along with RGB for reference and a visual swatch. The output includes the CSS-ready hsl() function string.
Practical HSL applications in CSS: hsl(220, 80%, 50%) for a primary blue, hsl(220, 80%, 40%) for a darker hover state (only lightness changed), hsl(220, 20%, 50%) for a desaturated/muted version. Creating systematic color palettes by varying only one parameter at a time is much easier in HSL than in hex or RGB.
Frequently Asked Questions
- Hue (0–360°) is the color's position on the color wheel: 0/360 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta. Saturation (0–100%) is color intensity (0% = gray). Lightness (0–100%) is brightness (0% = black, 50% = pure color, 100% = white).
- HSL separates the three independent dimensions of color, making systematic variation trivial. To create a hover state: reduce Lightness by 5–10%. To create a disabled state: reduce Saturation to 20%. To find a complementary accent: add 180° to Hue.
- HSL's Lightness axis goes from black (0%) through pure color (50%) to white (100%). HSB/HSV's Brightness axis goes from black (0%) to pure color (100%). At 100% Lightness, HSL always produces white regardless of saturation. At 100% Brightness, HSV produces the pure saturated color.
- Yes. Use the companion HSL to Hex tool to convert in the other direction.