Every color you see on a screen can be described with three plain ideas: hue, saturation and lightness. Once you know them, picking colors stops being guesswork.
Hue: where the color sits on the wheel
Hue is the "family" of a color: red, orange, yellow, green, blue, purple. On a color wheel it is measured in degrees from 0 to 360. Red sits at 0°, green at 120° and blue at 240°. Because the wheel is a circle, 360° brings you back to red.
Saturation: how vivid it is
Saturation runs from 0% (a grey with no color at all) to 100% (the purest version of the hue). Lowering saturation makes a color calmer and more grown-up, which is why most interiors and brand palettes use muted colors with one saturated accent.
Lightness: how close to white or black
Lightness runs from 0% (black) to 100% (white), with the pure hue at 50%. Adding white gives a tint, adding black gives a shade. A good palette almost always mixes light, medium and dark values, so text stays readable and nothing looks flat.
Using the wheel to match colors
- Complementary: two colors opposite each other (180° apart). Strong contrast, good for a call-to-action button.
- Analogous: neighbors within about 30°. Calm and natural, like a sunset or a forest.
- Triadic: three colors 120° apart. Playful and balanced if one color leads.
- Split-complementary: one color plus the two neighbors of its opposite. Contrast with less tension.
You don't have to calculate any of this. Our Complementary Colors tool draws the wheel for you and shows each scheme.