Color harmony has a reputation for being mystical. It is not. Every classic harmony scheme is a rule for picking hue angles off a circle, and you can do the arithmetic in your head. What the rules cannot tell you is which scheme suits the thing you are building, or how to stop a technically-correct palette from looking cheap. That part takes judgement, and this guide is mostly about that.

The wheel, and what the rules actually say

Start from the hue axis of HSL: a circle from 0 to 360 degrees. Every harmony scheme is a set of offsets from wherever your base color sits.

  • Complementary — base and base + 180°. Maximum separation, maximum tension.
  • Analogous — base, base ± 30°. Neighbours on the wheel; naturally calm.
  • Triadic — base, +120°, +240°. Three evenly spaced hues; vivid and balanced.
  • Split complementary — base, +150°, +210°. The tension of complementary without the head-on collision.
  • Tetradic — two complementary pairs, typically base, +60°, +180°, +240°. Four strong hues and the most ways to go wrong.
  • Monochromatic — one hue, varied by saturation and lightness. Technically not a hue scheme at all.

The palette generator applies exactly this arithmetic, and the color wheel lets you watch the angles move. Neither is doing anything you could not do with a calculator — the value is in seeing the result immediately.

Why a correct palette can still look wrong

Here is the failure everyone hits. You take a strong brand blue, ask for its complement, get a strong orange, put them side by side at full saturation, and the result is unusable. The edge between them shimmers. Neither color feels like it is in front.

Nothing is wrong with the arithmetic. The problem is that harmony rules only tell you which hues get along. They say nothing about saturation and lightness, and those two decide whether a palette reads as considered or as a fairground.

The fix is hierarchy. In almost every palette that works, one color dominates, one supports, and one accents — and they are not the same strength. A widely used starting ratio is roughly 60% dominant, 30% secondary, 10% accent. The accent is the only color that needs to be loud, because it is the only one carrying an action.

Applied to that blue and orange: keep the blue as a large, moderately saturated surface, drop the orange's saturation and use it sparingly for a call to action. Same two hues, entirely different result.

Choosing a scheme for what you are actually building

Analogous is the safest choice and the right default for content-heavy interfaces — dashboards, documentation, editors — where color should organise rather than shout. Because neighbouring hues share undertones, it is very hard to make an analogous palette clash. The risk is the opposite one: everything blends, nothing stands out. Reserve a single out-of-scheme accent for the primary action.

Complementary suits interfaces built around one decision. A landing page with one signup button, a pricing table with one recommended tier. The tension is the feature: it draws the eye to the odd one out. Use it when you have exactly one thing you want people to notice.

Split complementary is the compromise most product teams should reach for first. You keep the contrast of an opposing hue but gain a second supporting color, and the near-miss is far more forgiving than a direct opposite. If complementary feels too aggressive and analogous too flat, this is usually the answer.

Triadic is bold and works well for products with genuinely distinct categories — three plan tiers, three status states, three departments. Keeping all three at full strength is a mistake; pick one to lead.

Monochromatic is underrated. One hue with a well-built lightness ramp, plus a proper neutral grey scale, produces interfaces that look deliberate and are trivially easy to keep accessible. Many of the cleanest products you can think of are effectively monochromatic with a single accent.

Tints, shades and tones — the working part of a palette

Harmony picks your hues. The ramp is what you actually ship. Three operations turn one color into a usable set:

  • A tint mixes toward white — raise lightness. Tints become page backgrounds, hover fills, table stripes, disabled states.
  • A shade mixes toward black — lower lightness. Shades become borders, pressed states, text on light surfaces, dark-mode panels.
  • A tone mixes toward grey — lower saturation. Tones are how you calm a color that is too loud for a large area without changing which color it is.

The tint, shade and tone generators each build one of these ramps from a single input. For front-end work the Tailwind color generator produces the whole 50–950 scale at once, which is the same idea packaged for a config file.

One practical warning about naive ramps: interpolating straight through RGB toward white tends to wash out and shift hue slightly on the way. Working in HSL, or better in a perceptual space, keeps the family recognisable. If a light step looks anaemic or a dark step looks muddy, nudge saturation back up at the extremes — that single correction fixes most ugly ramps.

Neutrals are not an afterthought

Most of a real interface is not brand color. It is text, borders, backgrounds and dividers, and those are neutrals. Pure grey — equal R, G and B — is technically correct and usually looks slightly dead next to a colored brand.

The trick is a tinted neutral: take your brand hue, drop saturation to somewhere between 3% and 10%, and vary lightness. You get a grey scale that quietly belongs to the same family. On a blue brand this gives greys with a faint cool cast; against a warm brand they lean warm. Nobody consciously notices, and the whole interface feels more coherent.

Check it before you commit

A palette is not finished when it looks good on a moodboard. Two checks, both quick:

First, contrast. Every text-on-background pair you plan to ship needs to clear the WCAG thresholds — 4.5:1 for body text at level AA. Run the pairs through the contrast checker now, while changing a color is free. The accessible color guide covers what the numbers mean.

Second, color vision. Roughly one in twelve men has some form of color-vision deficiency, and red-green confusion is the common case — which is precisely the pairing that complementary and triadic schemes love to produce. Push your palette through the color blindness simulator and look for two colors that collapse into the same shade. If your only distinction between "success" and "error" is hue, it is not a distinction at all for a meaningful share of your users.

A workflow that holds up

Start from a real color you have to honour — a brand HEX, or a shade lifted from a photograph with the image color detector. Pick a scheme based on how much tension the product needs. Build the lightness ramp before choosing more hues, because most of what you need is already inside the color you have. Add a tinted neutral scale. Check contrast, then check color vision. Ship three or four colors, not eight.

Palettes fail from having too many colors far more often than too few.