The three parts
- Hue, 0 to 360 degrees: 0 is red, 120 green, 240 blue.
- Saturation, 0% to 100%: from grey to the full colour.
- Lightness, 0% to 100%: from black through the pure colour at 50% to white.
An example
hsl(217, 91%, 60%) is the same colour as #3B82F6 and rgb(59, 130, 246). Lower the lightness to 45% for a darker version and the hue stays the same. Convert any colour in the Color Converter.
Why designers like it
Building a palette from one hue by changing lightness is more intuitive than guessing RGB numbers. In CSS, hsl() is supported in every current browser.
Common misunderstanding
Equal lightness values do not look equally bright: yellow at 50% lightness looks much lighter than blue at 50%. Check readability with the Contrast Checker. See RGB for the other common format.