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.
What do the HSL numbers represent exactly?
Why is HSL useful for design systems?
What is the difference between HSL and HSB/HSV?
Can I convert back from HSL to hex?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.