A cylindrical-coordinate representation of colors. Unlike the RGB model, which is based on how hardware mixes light, HSL is designed to be perceptually intuitive, mimicking how humans actually describe color.
The Three Components of HSL
Hue (H)
- Definition: The type of color or its position on the color wheel.
- Measurement: Represented in degrees from 0° to 360°.
- 0° / 360°: Red
- 120°: Green
- 240°: Blue
- Intuition: Changing the Hue cycles you through the rainbow.
Saturation (S)
- Definition: The intensity or purity of the color.
- Measurement: Represented as a percentage from 0% to 100%.
- 0%: Grayscale (a shade of gray).
- 100%: Full, vibrant color.
- Intuition: Lowering saturation washes out the color toward gray.
Lightness (L)
- Definition: The amount of white or black mixed into the color.
- Measurement: Represented as a percentage from 0% to 100%.
- 0%: Absolute Black.
- 50%: The pure version of the color (at 100% Saturation).
- 100%: Absolute White.
- Intuition: Increasing lightness moves the color toward white; decreasing it moves it toward black.
HSL vs. HSLA
HSLA is the same model with an added Alpha (A) channel. This controls Transparency (Opacity), usually measured from 0.0 (fully transparent) to 1.0 (fully opaque).
| Format | Syntax Example |
| HSL | hsl(200, 100%, 50%) |
| HSLA | hsla(200, 100%, 50%, 0.5) |
Why Use HSL?
- Readability: It is much easier to identify a color from
hsl(0, 100%, 50%)(Red) than from HEX code#FF0000. - Color Palettes: To create a cohesive palette, 1he Hue the same and adjust Lightness to create shadows and highlights.
- Programmatic Control: In web development (CSS), HSL makes it trivial to calculate hover states (e.g., Take the base color and decrease Lightness by 10%).
