Color Harmony: Complementary, Analogous, Triadic & More
Color harmonies are geometric relationships on the color wheel that reliably produce coherent palettes. They're not laws — they're proven starting points that you then tune with value and saturation.
| Harmony | Geometry | Character | Best for |
|---|---|---|---|
| Complementary | 2 colors, 180° apart | Maximum contrast, energy | CTAs, sports, food |
| Analogous | 3–5 neighbors within ~60° | Serene, natural, cohesive | Landscapes, wellness, editorial |
| Triadic | 3 colors, 120° apart | Vibrant but balanced | Playful brands, children, creative |
| Split-complementary | Base + the 2 neighbors of its complement | Contrast with less tension | Beginner-safe bold palettes |
| Tetradic (rectangle) | 2 complementary pairs | Rich, complex | Editorial, illustration |
| Square | 4 colors, 90° apart | Maximal variety | Dashboards, categorical data |
| Monochromatic | 1 hue, varied value/chroma | Disciplined, elegant | Minimal UI, luxury |
Making harmonies actually work
Unequal roles: pick one dominant color and demote the rest to accents — equal parts of a triad look like a carnival. Mute strategically: full-saturation complements vibrate; drop one side's chroma. Fix values separately: harmony handles hue; you still need light/dark hierarchy (see color theory). Test accessibility: harmonious ≠ legible — run text pairs through the contrast checker.
Generate all of these instantly in the palette generator — pick a base color and switch between harmony modes with locking and export.