Color Harmony Schemes

Harmony schemes are formulas for combining colors that already work. Use them as starting points, not rigid rules.

Why Harmony Matters

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

• Predictable results. You know what you will get.
• Justifiable choices. "It is a split-complementary scheme" beats "I liked it."
• Systematic variations. Easy to swap an alternative within the same scheme.

Monochromatic

One hue, varied 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
• Hierarchy through lightness alone
• Great for minimalist designs

Weaknesses

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

Best For

• Corporate or professional interfaces
• Content-heavy sites (let the content do the work)
• Strict brand guidelines

: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

Two to four colors adjacent on the wheel, within 30 to 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
• 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
• Cohesion without monotony

Pro Tip: Vary Saturation and Lightness

Do not use the same saturation and lightness for all three:

: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
• Clear visual hierarchy
• Vibrant, attention-grabbing
• Great for CTAs and highlights

Weaknesses

• Jarring if overused
• Hard to balance equally
• Saturation needs careful handling

Best For

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

The 90/10 Rule

Never split 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 the two colors adjacent to its complement.

Instead of the direct opposite, use the two colors flanking it.

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

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 with less tension than complementary
• More nuanced and sophisticated
• Three distinct colors to work with
• Easier to balance than pure complementary

Weaknesses

• More complex to get right
• Requires careful proportion management

Best For

• When complementary feels too aggressive
• Designs that need more color variety
• Marketing materials and 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 staying harmonious

Weaknesses

• Can feel chaotic if all three are equally saturated
• Requires careful balancing
• Often too colorful for serious contexts

Best For

• Children's products
• Creative or 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 that form 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 and two cool colors

Weaknesses

• Hard to balance
• Easily looks chaotic
• Demands strong design judgement

Best For

• Detailed illustrations
• Data visualization (you need many distinct colors)
• When three colors are not 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 and 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 a light primary)
• 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 plus one accent. Add complexity only when the design asks for it.

Next: 05-color-psychology.md covers the emotional weight colors carry.