What Is an HSL Color?

Learn how hue, saturation, and lightness describe color intuitively.

HSL components

Hue (0-360°): The color on the wheel. 0° = red, 120° = green, 240° = blue.

Saturation (0-100%): Vividness. 0% = gray, 100% = pure color.

Lightness (0-100%): Brightness. 0% = black, 50% = pure color, 100% = white.

Example: hsl(256, 90%, 65%) = A light, vivid purple

Why HSL is intuitive

To lighten a color, just increase lightness. To desaturate it, decrease saturation. No need to adjust three separate channels like RGB.

Limitations

HSL isn't perceptually uniform. Two colors with the same saturation/lightness can look very different. OKLCH solves this.