Color Harmony Schemes

Color harmony schemes are proven formulas for combining colors that work well together. Use them as starting points, not rigid rules.

Why Harmony Matters

Random color combinations often clash. Harmony schemes use the color wheel's geometry to create intentional relationships:

• Predictable results - Know what you'll get before you start
• Justifiable choices - "It's a split-complementary scheme" beats "I liked it"
• Systematic variations - Easy to create alternatives within the same scheme

Monochromatic

One hue, multiple values of saturation and lightness.

Hue: 220° (Blue)

┌──────────────────────────────────┐
│  hsl(220, 90%, 20%)  Dark        │
│  hsl(220, 80%, 35%)  Medium-dark │
│  hsl(220, 70%, 50%)  Base        │
│  hsl(220, 60%, 65%)  Medium-light│
│  hsl(220, 50%, 80%)  Light       │
│  hsl(220, 30%, 95%)  Very light  │
└──────────────────────────────────┘

Strengths

• Always harmonious (same hue = no conflict)
• Clean, sophisticated look
• Easy to create hierarchy through lightness
• Great for minimalist designs

Weaknesses

• Can feel monotonous
• Hard to create strong visual distinctions
• May lack energy or excitement

Best For

• Corporate/professional interfaces
• Content-heavy sites (let content shine)
• When brand guidelines are strict

:root {
  --brand-hue: 220;

  --color-50:  hsl(var(--brand-hue), 30%, 97%);
  --color-100: hsl(var(--brand-hue), 40%, 92%);
  --color-200: hsl(var(--brand-hue), 50%, 85%);
  --color-300: hsl(var(--brand-hue), 55%, 70%);
  --color-400: hsl(var(--brand-hue), 60%, 55%);
  --color-500: hsl(var(--brand-hue), 70%, 45%);
  --color-600: hsl(var(--brand-hue), 75%, 35%);
  --color-700: hsl(var(--brand-hue), 80%, 25%);
  --color-800: hsl(var(--brand-hue), 85%, 18%);
  --color-900: hsl(var(--brand-hue), 90%, 12%);
}

Analogous

2-4 colors adjacent on the wheel (within 30-60° of each other).

        ┌─────┐
        │ 190°│ ← Analogous
    ┌───┤     ├───┐
    │   └─────┘   │
┌───┴───┐     ┌───┴───┐
│  220° │     │  250° │
│ BASE  │     │Analog.│
└───────┘     └───────┘

Formula

:root {
  --base: 220;

  --analogous-1: hsl(calc(var(--base) - 30), 70%, 50%);  /* 190° */
  --analogous-2: hsl(var(--base), 70%, 50%);              /* 220° - base */
  --analogous-3: hsl(calc(var(--base) + 30), 70%, 50%);  /* 250° */
}

Strengths

• Naturally harmonious (colors are neighbors)
• More variety than monochromatic
• Creates smooth, cohesive feel
• Easy to balance

Weaknesses

• Low contrast between colors
• Can lack a focal point
• Needs a neutral or accent to pop

Best For

• Nature-inspired designs
• Illustrations and graphics
• When you want cohesion without monotony

Pro Tip: Vary Saturation and Lightness

Don't use the same saturation/lightness for all:

:root {
  --primary:   hsl(220, 80%, 50%);  /* Vivid base */
  --secondary: hsl(190, 60%, 45%);  /* Slightly muted */
  --tertiary:  hsl(250, 40%, 55%);  /* More muted, lighter */
}

Complementary

Two colors directly opposite on the wheel (180° apart).

      ┌─────┐
      │ 220°│ Base (Blue)
      │     │
      └──┬──┘
         │
    180° │
         │
      ┌──┴──┐
      │ 40° │ Complement (Orange)
      │     │
      └─────┘

Formula

:root {
  --base: 220;
  --complement: calc(var(--base) + 180);  /* 40° */

  --primary: hsl(var(--base), 70%, 50%);
  --accent: hsl(var(--complement), 70%, 50%);
}

Strengths

• Maximum contrast and energy
• Creates clear visual hierarchy
• Vibrant and attention-grabbing
• Great for CTAs and highlights

Weaknesses

• Can be jarring if overused
• Hard to balance equally
• Needs careful handling of saturation

Best For

• Call-to-action buttons
• Highlighting important elements
• Sports, entertainment, high-energy brands
• Small accent applications

The 90/10 Rule

Never use complementary colors 50/50. Use one as dominant (90%) and the other as accent (10%):

.hero {
  background: hsl(220, 70%, 50%);  /* Dominant blue */
}

.cta-button {
  background: hsl(40, 80%, 50%);   /* Accent orange - pops! */
}

Split-Complementary

One base color plus two colors adjacent to its complement.

Instead of using the direct opposite, use the two colors on either side of it.

           ┌─────┐
           │ 220°│ Base
           └──┬──┘
              │
         ┌────┴────┐
         │         │
      ┌──┴──┐   ┌──┴──┐
      │ 10° │   │ 70° │  Split complements
      └─────┘   └─────┘  (not 40°, but 40°±30°)

Formula

:root {
  --base: 220;

  --primary: hsl(var(--base), 70%, 50%);                     /* 220° */
  --split-1: hsl(calc(var(--base) + 150), 70%, 50%);         /* 10° */
  --split-2: hsl(calc(var(--base) + 210), 70%, 50%);         /* 70° */
}

Strengths

• High contrast but less tension than complementary
• More nuanced and sophisticated
• Three distinct colors to work with
• Easier to balance than pure complementary

Weaknesses

• More complex to implement well
• Requires careful proportion management

Best For

• When complementary feels too aggressive
• Designs needing more color variety
• Marketing materials, creative sites

Triadic

Three colors equally spaced (120° apart).

        ┌─────┐
        │ 220°│ Base
        └──┬──┘
           │
      120° │
     ┌─────┴─────┐
     │           │
  ┌──┴──┐     ┌──┴──┐
  │ 340°│     │ 100°│
  └─────┘     └─────┘

Formula

:root {
  --base: 220;

  --triadic-1: hsl(var(--base), 70%, 50%);               /* 220° Blue */
  --triadic-2: hsl(calc(var(--base) + 120), 70%, 50%);   /* 340° Pink */
  --triadic-3: hsl(calc(var(--base) + 240), 70%, 50%);   /* 100° Green */
}

Strengths

• Vibrant and balanced
• Three distinct colors
• Works well for playful designs
• Good variety while maintaining harmony

Weaknesses

• Can feel chaotic if all colors are equally saturated
• Requires careful balancing
• May be too colorful for some contexts

Best For

• Children's products
• Creative/artistic sites
• When you need three distinct but harmonious colors

Pro Tip: Desaturate Two Colors

:root {
  --primary:   hsl(220, 80%, 50%);   /* Vivid - dominant */
  --secondary: hsl(340, 40%, 50%);   /* Muted */
  --tertiary:  hsl(100, 30%, 50%);   /* Most muted */
}

Tetradic (Rectangle)

Four colors forming a rectangle on the wheel.

Two complementary pairs that are analogous to each other.

      ┌─────┐         ┌─────┐
      │ 220°│─────────│ 40° │
      └──┬──┘         └──┬──┘
         │               │
         │               │
      ┌──┴──┐         ┌──┴──┐
      │ 280°│─────────│100° │
      └─────┘         └─────┘

Formula

:root {
  --base: 220;

  --color-1: hsl(var(--base), 70%, 50%);               /* 220° */
  --color-2: hsl(calc(var(--base) + 60), 70%, 50%);    /* 280° */
  --color-3: hsl(calc(var(--base) + 180), 70%, 50%);   /* 40° */
  --color-4: hsl(calc(var(--base) + 240), 70%, 50%);   /* 100° */
}

Strengths

• Rich color palette
• Lots of variety
• Two warm + two cool colors

Weaknesses

• Hard to balance
• Can easily look chaotic
• Requires strong design skills

Best For

• Complex illustrations
• Data visualization (need many distinct colors)
• When three colors aren't enough

Square

Four colors equally spaced (90° apart).

           ┌─────┐
           │ 220°│
           └──┬──┘
              │
    ┌─────┐   │   ┌─────┐
    │ 130°├───┼───┤ 310°│
    └─────┘   │   └─────┘
              │
           ┌──┴──┐
           │ 40° │
           └─────┘

Formula

:root {
  --base: 220;

  --square-1: hsl(var(--base), 70%, 50%);               /* 220° */
  --square-2: hsl(calc(var(--base) + 90), 70%, 50%);    /* 310° */
  --square-3: hsl(calc(var(--base) + 180), 70%, 50%);   /* 40° */
  --square-4: hsl(calc(var(--base) + 270), 70%, 50%);   /* 130° */
}

Similar to tetradic but with equal spacing. Same strengths/weaknesses - use sparingly.

Harmony Schemes Comparison

Practical Recommendations

For Most UI Projects

Start with monochromatic or analogous for your base, then add one complementary accent:

:root {
  /* Monochromatic base */
  --primary-50:  hsl(220, 30%, 97%);
  --primary-100: hsl(220, 40%, 90%);
  --primary-500: hsl(220, 70%, 50%);
  --primary-900: hsl(220, 80%, 15%);

  /* Complementary accent for CTAs */
  --accent: hsl(40, 80%, 50%);
}

The 60-30-10 Rule

• 60% - Dominant color (usually neutral or primary light)
• 30% - Secondary color (primary or secondary brand color)
• 10% - Accent color (complementary, for highlights)

.page {
  background: var(--neutral-100);      /* 60% */
}

.sidebar, .header {
  background: var(--primary-500);      /* 30% */
}

.cta-button {
  background: var(--accent);            /* 10% */
}

Summary

Start simple. Most successful interfaces use monochromatic + one accent. Add complexity only when needed.

Next: 05-color-psychology.md - The emotional impact of color