Color Harmony Guide
Complete guide to all six color harmony types.
The Six Harmonies
- Complementary (180°) — maximum contrast, attention-grabbing
- Analogous (±30-60°) — calm, cohesive, nature-inspired
- Triadic (120°) — balanced, vibrant, playful
- Tetradic (90°) — rich variety, complex designs
- Split-complementary (150°/210°) — softer contrast than complementary
- Monochromatic — one hue, many shades, elegant
Open Color Harmonies Reference →
Which Harmony to Choose
- Want maximum contrast? Complementary
- Want calm cohesion? Analogous
- Want balance and vibrancy? Triadic
- Want rich variety? Tetradic
- Want strong contrast without harshness? Split-complementary
- Want elegance and minimalism? Monochromatic
The 60-30-10 Rule
Every harmony benefits from hierarchy:
- 60% — dominant color (backgrounds, surfaces)
- 30% — secondary color (major UI, cards)
- 10% — accent color (CTAs, highlights)
Testing Harmonies
Test each combination with our contrast checker. Pure complementary pairs usually fail WCAG for text — use darker shades of the complements instead.