The 5 color harmony rules every designer should know

Color harmony is geometry on a wheel

Every color harmony rule is a spatial relationship on the HSL color wheel. The wheel maps hue from 0° to 360°, where 0° is red, 120° is green, and 240° is blue. Harmony types are defined by the angle between selected hues. No mystery, no subjective hand-waving — just degrees.

This article walks through the five canonical harmonies, shows the HSL offset for each, and finishes with a single JavaScript helper that generates every palette from a base color. If you want to skip the math, the Color Palette Generator does it live.

1. Complementary: the 180° opposite

The math

Given a base hue H, the complement is (H + 180) % 360. Saturation and lightness stay constant. So hsl(220, 80%, 50%) (a saturated blue) pairs with hsl(40, 80%, 50%) (an amber-gold).

When to use it

Complementary pairs produce maximum contrast. Blue against orange, red against cyan, purple against yellow — these combinations vibrate against each other because they share no hue component. That tension makes them effective for:

• Primary CTA buttons sitting on a non-CTA surface. The complement grabs the eye.
• Two-category data viz: positive vs. negative, current vs. previous period. Two clearly distinct series.
• Sports, gaming, or entertainment branding where visual energy is the goal.

Watch out for

Visual fatigue. Two high-saturation complements at equal weight compete for attention. The standard fix is the 60/30/10 rule: one color covers 60–70% of the surface, the complement takes 10–20% as accents, neutrals fill the rest.

2. Analogous: staying in the neighborhood

The math

Analogous palettes select three hues within a 60° arc, typically at H − 30, H, and H + 30. From hsl(150, 70%, 45%) (medium green), the neighbors are hsl(120, 70%, 45%) (yellow-green) and hsl(180, 70%, 45%) (teal).

When to use it

Analogous palettes feel cohesive and calm — nature uses them constantly. Use them when you want the user focused on content:

• Dashboards and reading apps where chrome should recede.
• Sequential data viz (e.g. a heat map of low → medium → high). The hue progression naturally reads as a gradient of intensity.
• Illustration that should feel unified rather than energetic.

Watch out for

Low contrast between adjacent hues. Three similar greens won’t differentiate UI elements like tabs or tags on their own. Vary lightness to create the distinction — pair hsl(150, 70%, 25%) with hsl(180, 70%, 85%) and the hue relationship still reads, but elements become visually separable.

3. Triadic: the equilateral triangle

The math

Three colors at equal 120° intervals: H, (H + 120) % 360, (H + 240) % 360. From a red base at hsl(0, 75%, 50%), the triad is red, green, and blue.

When to use it

Triadic schemes are balanced and vibrant. The equal spacing means no single hue pair dominates, so the palette has energy without the push-pull tension of complements. Common uses:

• Children’s brands, education products, game UIs — places where visual playfulness is part of the identity.
• Three-category legends (e.g. “to-do / in progress / done”) where no category should feel more important than the others.
• Illustration with a limited palette — three distinct hues give enough variation to describe a scene.

Watch out for

Three vivid colors at full saturation overwhelm the eye. Pick one hue as the lead and desaturate the other two. A dark navy hsl(240, 60%, 25%) paired with muted coral hsl(0, 50%, 75%) and soft sage hsl(120, 30%, 80%) reads as triadic without screaming.

4. Tetradic (rectangular): four colors, two complement pairs

The math

Four colors spaced at 90° intervals — two complementary pairs. Starting at hsl(30, 70%, 50%) (orange): hsl(120, 70%, 50%), hsl(210, 70%, 50%), hsl(300, 70%, 50%). Orange, green, blue, magenta.

When to use it

Tetradic is the richest of the standard harmonies. Four distinct hues are useful when you genuinely need categorical distinction:

• Status systems with four states (success / warning / error / info).
• Multi-series charts where four categories need to stay distinguishable at a glance.
• Navigation color-coding in apps with distinct top-level sections.

Watch out for

Complexity. Four colors at full saturation look chaotic. Pick one dominant and treat the other three as supporting cast. Adjust saturation and lightness independently — the dominant might be saturated and dark, while the three accents stay lighter or more muted.

5. Monochromatic: one hue, many values

The math

Hold H and S constant; vary L from 10% to 95%. From hsl(250, 65%, 50%) (purple): hsl(250, 65%, 95%), hsl(250, 65%, 75%), hsl(250, 65%, 50%), hsl(250, 65%, 30%), hsl(250, 65%, 10%).

When to use it

Monochromatic palettes are inherently harmonious — every swatch shares the same hue, so nothing clashes:

• Corporate and editorial design where restraint and elegance matter.
• Design-system primary scales (blue-50, blue-100, ..., blue-900) where a single hue powers backgrounds, borders, and text.
• Accessible contrast by construction: a minimum lightness delta of ~45 points between foreground and background usually clears WCAG AA.

Watch out for

Monotony. Five shades of blue become indistinguishable at small sizes or for users with low vision. Monochromatic works best when the palette maps to hierarchy (heading / body / caption) rather than categories. When you need categorical distinction, reach for a different harmony or layer an accent color on top of the monochromatic base.

The cheat sheet

Every harmony type is a function of hue offset. Given a base hue H (in degrees):

• Complementary: H, (H + 180) % 360
• Analogous: (H − 30 + 360) % 360, H, (H + 30) % 360
• Triadic: H, (H + 120) % 360, (H + 240) % 360
• Tetradic: H, (H + 90) % 360, (H + 180) % 360, (H + 270) % 360
• Monochromatic: same H and S; vary L from 10% to 95%

The + 360) % 360 wrap handles the case where subtraction goes below zero. One helper covers every harmony type:

type HSL = { h: number; s: number; l: number };

function rotate(base: HSL, degrees: number): HSL {
  return { ...base, h: (base.h + degrees + 360) % 360 };
}

const base: HSL = { h: 220, s: 80, l: 50 };

const complementary = [base, rotate(base, 180)];
const analogous     = [rotate(base, -30), base, rotate(base, 30)];
const triadic       = [base, rotate(base, 120), rotate(base, 240)];
const tetradic      = [base, rotate(base, 90), rotate(base, 180), rotate(base, 270)];
const monochromatic = [10, 30, 50, 75, 95].map((l) => ({ ...base, l }));

Combining harmonies in practice

Real-world palettes rarely use a single harmony type in isolation. Two patterns recur:

Complementary brand + monochromatic scales. Start with a complementary pair for the primary brand colors, then fill in the scale with monochromatic variants of each. Your indigo primary at hsl(220, 80%, 50%) spawns a 10–95% lightness scale. Your amber accent gets its own. The full design-system palette is grounded in complementary contrast but rich enough for complex interfaces.

Analogous base + complementary accent. Use an analogous trio (e.g. green / teal / blue) for the main UI, then pick the complement of the middle hue (orange, the complement of teal) for alerts, badges, and destructive actions. The analogous palette sets a calm baseline; the complement commands attention precisely because it breaks the pattern.

Try it yourself

Theory only goes so far. Pick a color you like, plug it into the Color Palette Generator, and cycle through the five harmony types. The generator exports each palette as CSS custom properties, Tailwind extend.colors config, SCSS variables, or raw JSON — pick whichever format matches your workflow and paste it straight in.