Color theory basics: the wheel, harmonies and how to use them
Updated 2026-09-11 · by the ColorSwoop team
You do not need an art degree to use color well. You need three concepts, one wheel and six rules.
The three dimensions of a color
- Hue: where the color sits on the wheel (0° red, 120° green, 240° blue in HSL).
- Saturation (chroma): how vivid it is. Zero saturation is gray.
- Lightness: how close it is to white (100%) or black (0%).
Most palettes go wrong in the last two dimensions. A palette of four hues at the same saturation and lightness feels flat and loud; varying lightness gives hierarchy, and lowering saturation on supporting colors lets the accent breathe.
Warm and cool
Reds, oranges and yellows are warm: they advance and energize. Blues, greens and purples are cool: they recede and calm. Mixing one warm accent into a cool palette (or vice versa) is the simplest way to create a focal point. Browse warm and cool collections to feel the difference.
The six harmony rules
- Monochromatic: one hue, many lightness levels. See monochrome palettes.
- Analogous: two to four neighboring hues. Cohesive, low tension; most nature palettes are analogous.
- Complementary: two opposite hues. Vibrant; keep one as the accent.
- Split-complementary: a hue plus the two neighbors of its complement. Contrast with less clash.
- Triadic: three hues 120° apart. Playful and balanced; common in kids palettes.
- Tetradic (square): four hues 90° apart. Rich but demanding; let one dominate.
Color spaces: HSL vs OKLCH
HSL is easy to reason about but not perceptually uniform: a yellow and a blue with the same HSL lightness look wildly different in brightness. OKLCH fixes this, which is why ColorSwoop's palette generation runs in OKLCH and why its palettes have consistent visual weight. Modern CSS supports oklch() directly.
Psychology, briefly
Associations are cultural and contextual, but some are broad: blue for trust and technology, green for growth and health, red for urgency and appetite, purple for creativity and luxury, yellow for optimism, black for sophistication. Use them as a starting point, then test with your audience.
Putting it to work
Pick a hue, choose a harmony, vary lightness for hierarchy, desaturate the supporting colors, and check contrast. The generator does the first three; the palette pages do the last one.
FAQ
What is the difference between hue, saturation and lightness?
Hue is the color family (red, blue). Saturation is how pure or gray the color is. Lightness is how close it is to white or black. HSL and OKLCH describe colors with these three values.
What are complementary colors?
Colors opposite each other on the color wheel, like blue and orange or red and green. They create maximum contrast and vibrancy.
Why do designers use OKLCH?
OKLCH is perceptually uniform: equal steps in its values look like equal steps to the eye, unlike HSL where a 50% lightness yellow looks far brighter than a 50% lightness blue.