What is HSL? Working with hue, saturation and lightness

HSL describes a color with three values: Hue, Saturation and Lightness. Hue is an angle from 0–360°, while saturation and lightness are expressed as 0–100%.

Changing only the hue shifts the tone; lowering saturation moves toward gray, and raising lightness moves toward white. This is close to how people intuitively adjust color, which makes it handy for building palettes.

For example, stepping only the lightness of a color produces a natural shade-and-tint palette. The palette tool above uses exactly this principle.