Complementary vs Analogous: Picking the Right Color Harmony
A "color harmony" is a recipe for picking colors that work together. The seven classics - complementary, split-complementary, analogous, triadic, tetradic, square, and monochromatic - all derive from the geometry of the color wheel.
This article explains when each one shines, with examples drawn from interfaces you already know.
Complementary: maximum contrast
Two colors directly opposite on the wheel (180 degrees apart). Red + cyan, blue + orange, yellow + purple. Complementary pairs create the highest possible visual contrast and feel "energetic".
Use it for: call-to-action buttons that must dominate, sports/gaming brands, holiday marketing. Avoid for: extended body text (the vibration is fatiguing).
Analogous: calm and cohesive
Three colors next to each other on the wheel (within ~60 degrees). Blue + teal + green. Analogous palettes feel quiet and deliberate because there is no high-contrast tension.
Use it for: meditation/health apps, photography portfolios, editorial sites. Always pick one as the dominant color and use the others as supporting accents - 60/30/10 is a good starting ratio.
Triadic and tetradic: balanced variety
Triadic uses three colors evenly spaced (120 degrees apart) - think red/yellow/blue. Tetradic uses four (90 degrees) - think red/yellow/green/blue. Both feel vibrant and balanced.
Use these when you need a system that can stretch across many UI elements without one color dominating. Material Design and many illustration systems lean on triadic.
Split-complementary, square, monochromatic
Split-complementary picks one color and the two colors next to its complement (a softer version of complementary). Square is tetradic with all four spaced evenly. Monochromatic uses one hue at multiple lightness/saturation levels.
Monochromatic is the safest harmony for first-time designers - it is impossible for the colors to clash because there is only one hue.
Picking a harmony for your project
- Marketing site that needs to convert: complementary or split-complementary.
- Productivity app for long sessions: analogous or monochromatic.
- Dashboard with many data categories: triadic or tetradic.
- Brand expression with one hero color: monochromatic with an accent.
- Editorial / news site: analogous with one complementary accent for links.
Try the related tools
Frequently asked questions
Which harmony is best for accessibility?
Complementary by default - opposite colors have maximum lightness contrast on average. But always check actual WCAG ratios; harmony does not guarantee 4.5:1.
Can I mix harmonies in one design?
Yes. Most production designs use a monochromatic base (UI surfaces) plus a complementary accent (brand actions). The harmony name describes the relationship between dominant colors only.
How many colors should be in my palette?
5-7 covers most needs: 1-2 brand, 1 accent, 3-4 neutrals. More than 8 starts to feel chaotic without strong rules.