Color HSL
Hue, Saturation, Lightness – the most intuitive color model
What Is the HSL Color Model?
HSL stands for Hue, Saturation, and Lightness. Unlike RGB, which mixes light channels, HSL describes colors in terms that match how humans naturally think about color:
- Hue (0–360°) — The base color on the color wheel. 0° = red, 120° = green, 240° = blue.
- Saturation (0–100%) — How vivid the color is. 0% = gray, 100% = pure color.
- Lightness (0–100%) — How bright. 0% = black, 50% = normal, 100% = white.
Interactive HSL Mixer
#6B61FFhsl(244, 100%, 69%)
HEX#6B61FF
RGB107, 97, 255
HSL244°, 100%, 69%
The Hue Wheel
Hue is measured as an angle on the color wheel. It cycles through all visible colors:
Hue Strip (0°–360°)
0° Red60° Yellow120° Green180° Cyan240° Blue300° Magenta360°
Why HSL Is More Intuitive Than RGB
With RGB, creating a lighter blue requires increasing R and G while keeping B high — not intuitive. With HSL, you simply increase the Lightness. Want a muted version? Lower the Saturation. Want a different hue entirely? Rotate the Hue. Each property maps to a distinct perceptual quality.
Design tip: HSL makes it easy to create color palettes. Keep the same hue, then vary saturation and lightness for consistent, harmonious color schemes.
Common HSL Colors
| Color | Swatch | H | S | L | CSS |
|---|---|---|---|---|---|
| Red | 0° | 100% | 50% | hsl(0, 100%, 50%) | |
| Orange | 30° | 100% | 50% | hsl(30, 100%, 50%) | |
| Yellow | 60° | 100% | 50% | hsl(60, 100%, 50%) | |
| Lime | 120° | 100% | 50% | hsl(120, 100%, 50%) | |
| Cyan | 180° | 100% | 50% | hsl(180, 100%, 50%) | |
| Blue | 240° | 100% | 50% | hsl(240, 100%, 50%) | |
| Purple | 270° | 100% | 50% | hsl(270, 100%, 50%) | |
| Magenta | 300° | 100% | 50% | hsl(300, 100%, 50%) | |
| Pink | 330° | 100% | 72% | hsl(330, 100%, 72%) | |
| Brown | 30° | 59% | 41% | hsl(30, 59%, 41%) | |
| Gray | 0° | 0% | 50% | hsl(0, 0%, 50%) | |
| Navy | 240° | 100% | 25% | hsl(240, 100%, 25%) |
Try It — CSS hsl() Syntax
Live Editor
.element {
background-color: hsl(210, 80%, 55%);
color: #ffffff;
}hsl(210, 80%, 55%)