Color Harmony: Complementary, Analogous and Triadic, Explained
"Color harmony" sounds like taste. Mostly it is geometry. The classic schemes are rules about how far apart to place hues on the color wheel, and each spacing produces a predictable feeling.
Complementary: 180° apart
Two hues on opposite sides of the wheel. This is the maximum-tension pairing — it is what you want when one thing must stand out against everything else, which is why so many call-to-action buttons are the complement of the page's dominant color. Used at equal weight across a large area it becomes exhausting, so the usual discipline is a heavy dominant and a small accent, not a 50/50 split.
Analogous: 30° apart
Three neighbouring hues. Because no pair is far apart, nothing competes: the result reads as calm, cohesive, and slightly monotonous if you are not careful. Analogous schemes are the natural choice for backgrounds, illustrations and anything atmospheric. They need a deliberate outsider — a small complementary accent, or a strong neutral — to give the eye somewhere to land.
Triadic: 120° apart
Three hues evenly spaced around the wheel. This keeps a lot of the vibrancy of a complementary pair while giving you a third voice, which is why it turns up so often in playful, illustrative and children's-product design. It is also the easiest scheme to overdo: at full saturation, three equally strong hues will fight. Pick one to lead and let the other two support at lower saturation or smaller area.
The part that actually matters
Hue spacing gets all the attention, but the thing that makes a palette look designed rather than assembled is holding saturation and lightness constant while you rotate the hue. Colors that share an S and L value read as members of the same family regardless of how far apart their hues are. Colors picked one at a time, each with its own saturation and lightness, look like a collection of unrelated decisions — even when the hues are textbook-correct.
This is what the palette generator does: it converts your base color to HSL, rotates only the hue, and leaves S and L alone. Change the base and the whole family moves together.
The 60-30-10 habit
A scheme tells you which colors. It does not tell you how much of each, and proportion is where most palettes go wrong. The old interior-design heuristic — about 60% dominant, 30% secondary, 10% accent — survives because it encodes something true: the accent only reads as an accent if it is rare. A "triadic palette" applied in equal thirds is not a triadic palette, it is a flag.
Once you have a set you like, check the pairs you intend to put text on with the contrast checker. A harmonious palette that fails 4.5:1 is not finished.
