Color Harmony Rules — Complete Guide to All 6 Types

Complementary, analogous, triadic, tetradic, split-complementary and monochromatic — when to use each, with real examples.

What Is Color Harmony?

Color harmony is the practice of selecting colors that work well together based on their relationships on the color wheel. The six standard harmony rules are geometric — they define angles between hues — and each produces a predictable visual effect.

Understanding these rules lets you build palettes intentionally rather than by trial and error. You can start from a base color and know that certain relationships will produce calm palettes, others vibrant, others dramatic.

1. Complementary Harmony

Geometry: Two colors 180° apart.

Examples: Blue and orange, red and green, yellow and purple.

Effect: Maximum contrast, maximum tension. The eye vibrates when the two colors meet.

Best for: Call-to-action buttons, alerts, sports branding, bold posters, anywhere attention must be grabbed.

Avoid for: Large areas of equal weight — the tension becomes exhausting over time.

2. Analogous Harmony

Geometry: Colors adjacent on the wheel, typically within 30-60° of each other.

Examples: Blue, blue-green, green; red, red-orange, orange; yellow, yellow-green, green.

Effect: Calm, cohesive, natural. Feels like it belongs together.

Best for: Wellness brands, nature-inspired designs, editorial layouts, backgrounds, smooth gradients.

Avoid for: UIs that need clear differentiation between interactive elements — you need a contrasting accent.

3. Triadic Harmony

Geometry: Three colors evenly spaced 120° apart.

Examples: Red, yellow, blue (the classic triad); or blue, magenta, green.

Effect: Vibrant, balanced, playful. No color dominates; all three compete for attention.

Best for: Playful brands, gaming interfaces, illustrations, data visualization with three series.

Avoid for: Minimalist designs — triadic palettes are inherently energetic.

4. Tetradic Harmony

Geometry: Four colors in two complementary pairs. Usually a rectangle (0°, 90°, 180°, 270°) or a square.

Examples: Blue, green, orange, red; or red, yellow, cyan, violet.

Effect: Rich, varied, complex. Feels like a coordinated set of multiple colors.

Best for: Complex dashboards, multi-series data visualization, illustration, gaming UIs with multiple factions.

Avoid for: Interfaces with more than one dominant color — tetradic palettes need clear 60-25-10-5 hierarchy to work.

5. Split Complementary Harmony

Geometry: Base color plus the two colors on either side of its complement (±30° from 180°).

Examples: Base blue plus red-orange and yellow-orange (instead of pure orange).

Effect: Strong contrast similar to complementary, but softer and easier to balance.

Best for: Modern UI design, logos, packaging, any design that wants contrast without harshness.

Avoid for: Minimal designs — it's still three colors and needs hierarchy.

6. Monochromatic Harmony

Geometry: One hue with variations in lightness (and optionally saturation).

Examples: Navy, medium blue, sky blue, pale blue — all hue 215°.

Effect: Elegant, minimal, calm, timeless.

Best for: Design systems (the 50-900 scale is monochromatic), minimalist UIs, editorial layouts, dark mode.

Avoid for: Designs that need variety across categories — you'll want to add an accent color.

How to Choose the Right Harmony

The choice depends on the design intent:

  • Need maximum attention? Use complementary.
  • Need calm and cohesion? Use analogous or monochromatic.
  • Need balance and vibrancy? Use triadic.
  • Need rich variety? Use tetradic.
  • Need contrast without harshness? Use split-complementary.
  • Need elegance and minimalism? Use monochromatic.

Hierarchy Matters for All Harmonies

Every harmony rule produces multiple colors, but no harmony rule produces equal-weight colors. You always need to assign roles:

  • Dominant (60%): Background, main brand color
  • Secondary (25%): Major UI elements, secondary text
  • Accent (10%): CTAs, interactive elements
  • Pop (5%): Attention-grabbing highlights

Without hierarchy, even a well-constructed palette becomes visually chaotic.

Test Every Palette for Accessibility

No harmony rule guarantees WCAG compliance. Always verify text/background pairs with a contrast checker before shipping. Beautiful palettes that fail accessibility are not "designer choices" — they are failures.

Explore All Harmonies Interactively

Frequently Asked Questions

Related Articles