Harmony rules are the closest thing colour has to training wheels: fixed geometric relationships on a wheel that reliably produce something coherent. They are also routinely oversold. This guide covers what each of the eight rules does, when to reach for it, why the HSL numbers lying to you matters more than any of them, and how to turn five pleasant colours into something a product can actually be built from.
A wheel places hues in a circle, with the property that opposite sides differ maximally and neighbouring positions differ minimally. A harmony rule is just a fixed set of angular offsets from a starting hue. Analogous takes ±30°. Triad takes 0°, 120°, 240°. That is all.
Which means the rules are geometry, not perception. Nobody measured that 120° is inherently pleasant; the conventions come out of centuries of painting practice and they persist because they work often enough to be useful. Treat them as starting positions, not as answers — and treat any palette that scores well on a generator but fails on real screens as unfinished.
The default for a reason. Nothing clashes, so it is very hard to make something ugly, and it suits anything text-heavy: documentation, dashboards, editorial layouts. The weakness is monotony — with no opposing hue, nothing draws the eye. The usual remedy is one accent from outside the arc, used sparingly.
Maximum tension on the wheel, which makes it the natural answer when exactly one element must win: the primary button, the active tab, the single metric that matters. It fails through overuse. If everything is complementary, the emphasis cancels out and you are back to no hierarchy, just louder.
The base plus the two hues flanking its opposite. You keep most of the complementary punch while losing the optical vibration that makes pure complements uncomfortable in large areas. If you have ever used a complementary pair and felt it was slightly too aggressive, this is the fix.
Balanced and energetic, and it holds together at lower saturation than most rules. It is also the easiest to get wrong, because three hues of equal visual weight fight each other. The reliable approach is to let one hue cover most of the surface and treat the other two as accents — which, notably, is what the 60-30-10 rule is describing.
Four hues in a square. Rich, and genuinely useful when you need four genuinely distinct categories — chart series, departmental tags, product lines. It collapses the moment all four get equal area, so it depends more than any other rule on one colour dominating.
Sometimes called a softened split. It offers more variety than analogous with less shouting than a straight complement, which makes it a good fit for long marketing pages that need several distinct sections without five different brand colours.
The accessibility workhorse. Because every step differs in luminance rather than hue, contrast becomes predictable: you can reason about which step works for text and which for surfaces without measuring surprises. It is also the safest foundation for dark mode, where hue relationships shift in ways that surprises nobody expects.
How neutral ramps get built. The greys in a well-made design system are almost never neutral; they carry a few degrees of the brand hue, which is why they feel related to the brand colours instead of merely near them. A shade ramp is also the cheapest way to get eleven usable values out of one decision.
HSL lightness is arithmetic: 50% is the midpoint between black and white for that hue. Perception disagrees. Yellow at 50% lightness is far brighter than blue at 50% lightness, because the eye weights green heavily and blue barely at all. Two colours with identical HSL lightness can have wildly different contrast ratios, which is why a palette that looks evenly stepped in HSL can produce text that passes on one swatch and fails on the neighbour. Measure the ratio; do not trust the L value.
This is the gap between generator output and something usable. Five hues will get you through a mockup. They will not get you through hover states, disabled states, focus rings, borders, subtle section backgrounds, text on a tinted panel, and the dark-mode variant of all of it.
What real systems use is a ramp: each hue stepped across roughly nine to eleven lightness values, with the steps chosen so that specific ones have known contrast behaviour. Step 600 for text on white. Step 100 for a tinted background. Step 900 for a heading. Once the ramp exists, the design decisions become "which step" rather than "which new colour", and the scheme stays coherent because every step shares one hue.
Practically, this is why the lightness ladders are more valuable than the base palette. Pick the five hues, then build the ladder under each one, and you have fifty-odd values that all belong together.
In most interfaces, ninety percent of what is on screen is neutral: backgrounds, borders, dividers, secondary text, disabled controls. A palette of five saturated hues with no neutral ramp will look like a toy no matter how well the hues harmonise, because there is nothing to set them against.
The fix is duller than it sounds. Take your base hue, drop saturation to somewhere between five and fifteen percent, and build a ramp on it. Those near-greys will read as neutral while still belonging to the same family as your brand colour — and because they carry a few degrees of hue, they will not fight it.
A rule of thumb borrowed from interior design: roughly 60% of a surface in a dominant colour, 30% in a secondary, 10% in an accent. It is imprecise and it works. Applied to interfaces, the dominant colour is usually a neutral surface, the secondary is a brand or structural colour, and the accent is reserved for the one thing you want noticed.
Its real value is as a check. If your design is roughly equal parts of three saturated colours, no amount of harmony rule will save it — the eye has nowhere to rest. If a palette feels chaotic, the problem is usually distribution, not hue selection.
Notice what is not on that list: choosing between triad and tetradic. The rule you use to pick the initial hues matters far less than the ramps you build underneath them and the measurements you take at the end. Harmony gets you to a starting point worth testing. Measurement is what makes it shippable.
