Most people first meet color on the web as a HEX code — six characters like #3B82F6 that feel more like a serial number than a color. The trouble is that HEX tells you almost nothing useful when you want to adjust a color. To make a blue slightly lighter, which of those six characters do you change, and by how much? HSL answers that question directly.
The three properties
Every color can be described by three independent properties:
- Hue — the position on the color wheel, from 0 to 360 degrees. Red sits near 0, green near 120, blue near 240.
- Saturation — how vivid the color is, from a flat gray at 0% to fully intense at 100%.
- Lightness — how close the color is to black (0%) or white (100%), with the pure hue at 50%.
Because these three move independently, editing becomes obvious. Want a darker shade? Lower the lightness. Want a calmer version? Lower the saturation. The hue stays put, so the color still reads as “the same blue,” just adjusted.
Why this matters for palettes
Harmonies are simply rotations of hue. A complementary color is 180 degrees away; a triad splits the wheel into three. Once you think in degrees, generating a balanced palette is arithmetic rather than guesswork — which is exactly what the palette generator does under the hood.
Try it
Open the color wheel, pick a hue, then nudge saturation and lightness. Watching the HEX value change as you move tells you far more about color than memorizing codes ever will.