How HSL colors work
HSL stands for hue, saturation and lightness. Hue chooses a position around the color wheel: 0° and 360° are red, 120° is green, and 240° is blue. Saturation controls color intensity from 0% gray to 100% vivid color. Lightness moves from black at 0% through the selected color around 50% to white at 100%.
Why designers use an HSL picker
HSL makes related interface colors easier to reason about. Keep hue and saturation steady while increasing lightness for a highlight, or reduce lightness for a pressed state. Reducing saturation produces a calmer variation without guessing new RGB channels.
Useful HSL examples
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) | #FF0000 |
| Yellow | hsl(60, 100%, 50%) | #FFFF00 |
| Green | hsl(120, 100%, 25%) | #008000 |
| Cyan | hsl(180, 100%, 50%) | #00FFFF |
| Blue | hsl(240, 100%, 50%) | #0000FF |
| Gray | hsl(0, 0%, 50%) | #808080 |
HSL picker questions
Why can different hues look identical?
At 0% saturation every hue is gray. At 0% or 100% lightness every hue is black or white.
Is HSL supported in CSS?
Yes. Modern browsers accept values such as color: hsl(210, 80%, 50%);.
How is this different from HSL to HEX?
This page is for exploring colors with synchronized sliders and multiple outputs. The HSL to HEX converter is focused on entering known HSL values to obtain a HEX code.