What is HSL Color?
HSL Color (Hue, Saturation, Lightness) is a cylindrical color model that represents colors in a way that is more intuitive for humans to understand and manipulate than RGB. It separates color into three components: hue (the color itself), saturation (color intensity), and lightness (brightness).
Quick Facts
| Full Name | Hue Saturation Lightness Color Model |
|---|---|
| Created | 1970s (HSL model) |
| Specification | Official Specification |
How HSL Color Works
HSL was designed to be more intuitive than RGB for color selection and manipulation. Hue is represented as an angle on a color wheel (0-360°), where 0° is red, 120° is green, and 240° is blue. Saturation ranges from 0% (gray) to 100% (full color). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure color. HSL makes it easy to create color variations - you can lighten or darken a color by adjusting lightness, or create pastel versions by reducing saturation. HSLA adds an alpha channel for transparency.
Key Characteristics
- Hue: color angle on wheel (0-360°)
- Saturation: color intensity (0-100%)
- Lightness: brightness level (0-100%)
- More intuitive than RGB for color selection
- Easy to create color variations and palettes
- HSLA adds alpha channel for transparency
Common Use Cases
- Creating color palettes and themes
- Adjusting color brightness and saturation
- CSS styling and theming
- Color picker interfaces
- Generating complementary colors
Example
HSL Color Examples:
Color HSL RGB Equivalent
Red hsl(0, 100%, 50%) rgb(255, 0, 0)
Green hsl(120, 100%, 50%) rgb(0, 255, 0)
Blue hsl(240, 100%, 50%) rgb(0, 0, 255)
Yellow hsl(60, 100%, 50%) rgb(255, 255, 0)
Cyan hsl(180, 100%, 50%) rgb(0, 255, 255)
Color Variations (same hue):
hsl(0, 100%, 25%) /* Dark red */
hsl(0, 100%, 50%) /* Pure red */
hsl(0, 100%, 75%) /* Light red */
hsl(0, 50%, 50%) /* Desaturated red */
hsl(0, 0%, 50%) /* Gray */
CSS Usage:
.element {
color: hsl(210, 100%, 50%);
background: hsla(0, 100%, 50%, 0.5);
}
Color Wheel:
0° = Red
60° = Yellow
120° = Green
180° = Cyan
240° = Blue
300° = Magenta