Color harmony: why some colours belong together

Color harmony is the sense that a group of colours belongs together. Designers usually build it in two ways: by choosing hues that sit in a known relationship on the colour wheel, such as neighbours or opposites, and by balancing everything else, meaning lightness, saturation and how much of each colour appears. Get the first right and the second wrong and the result still jars. Get both right and even unusual combinations feel calm and intentional.

The colour wheel and why it helps

The wheel arranges hues in a circle so that relationships become geometry. Neighbours share a lot of the same light and blend softly; opposites share none and push each other to look more intense. Every classic harmony is a shape laid over the wheel. If the wheel itself is new to you, start with the colour wheel.

The six classic color harmonies

Here is each scheme built from the same teal base, #30a69c, so you can see how the relationship changes the mood while the starting colour stays put.

A rough guide to choosing: the fewer and closer the hues, the easier harmony is to achieve. Monochromatic and analogous schemes almost look after themselves. Complementary, triadic and tetradic schemes give more energy but ask for more discipline in the next three areas.

Harmony is also lightness and saturation

Look at the triadic strip above. The hues are textbook, but at equal strength they look like a toy box. That is because the wheel only describes hue. Two other properties decide whether colours actually sit well together.

• Lightness: a harmonious set usually spans light, middle and dark values. Five colours of the same lightness blur into each other; a range gives the eye somewhere to rest and something to read.
• Saturation: keep most colours calm and let one stay vivid. When every colour is at full strength they compete, and the scheme reads as noise.
• Shared undertone: colours that all lean slightly warm, or all carry a trace of the same hue, look related even when they are far apart on the wheel. Adding a little of your main colour to the neutrals is the quickest way to do it.

To make these adjustments by number, use a format that separates lightness from hue. HSL is the familiar choice; OKLCH is better at keeping lightness even when you change hue, which makes balanced schemes much easier to build.

Proportion: let one colour lead

The single biggest difference between a harmonious design and a chaotic one is usually proportion, not hue. Equal amounts of two or three colours make the eye bounce between them. One dominant colour, a supporting one and a small accent give it a hierarchy to follow. The 60 30 10 rule is a useful starting split.

How to build a harmonious palette in practice

1. 1

   Start from one colour that means something

   A brand colour, a product, a place. Harmony is easier around a fixed point than from nothing.

2. 2

   Pick a relationship for the mood

   Analogous for calm, complementary or split complementary for energy, monochromatic for restraint.

3. 3

   Spread lightness and calm saturation

   Make a light, a middle and a dark version, then lower the saturation of everything except the accent.

4. 4

   Decide the proportions

   Name which colour covers most of the space, which supports and which appears only in small touches.

5. 5

   Test it with real words

   Place the palette on a real layout and check text contrast. Harmony that cannot carry a headline is not finished.

If you would rather start from a palette that has already been balanced, each Gradiently Mark is a finished living background whose colours, materials and light were composed together, and the Studio lays your words on it with auto ink choosing light or dark type per line. For generating your own from scratch, see colour palette generators.