# Color harmony: why some colours belong together

[Canonical HTML page](https://gradiently.design/guide/color-harmony)

The colour wheel gives you six classic schemes. They help, but they are only half of harmony. The other half is lightness, saturation and how much of each colour you use.

## The short version

- Color harmony is the quality of a set of colours that look as if they belong together.
- The six classic harmonies are monochromatic, analogous, complementary, split complementary, triadic and tetradic, each defined by positions on the colour wheel.
- Hue relationships alone do not guarantee harmony: colours also need a sensible spread of lightness and controlled saturation.
- One dominant colour with smaller amounts of the others almost always looks more harmonious than equal amounts of every colour.
- Colours that share an undertone, such as a hint of warmth or of the same hue, tend to look related even when they are far apart on the wheel.

**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](https://gradiently.design/guide/color-wheel).

A colour wheel: `conic-gradient(from 0deg, #e64545, #e6a645, #c8e645, #45e66a, #45e6d4, #4596e6, #6a45e6, #d445e6, #e64545)`

Hues at moderate strength around a circle. Every harmony below is a pattern of points on this ring.

## 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.

- Monochromatic: `linear-gradient(90deg, #d7f4f1 0% 25%, #88ddd6 25% 50%, #30a69c 50% 75%, #1d635d 75% 100%)`
- Analogous: `linear-gradient(90deg, #30a661 0% 33.3%, #30a69c 33.3% 66.6%, #3075a6 66.6% 100%)`
- Complementary: `linear-gradient(90deg, #30a69c 0% 50%, #a6303a 50% 100%)`
- Split complementary: `linear-gradient(90deg, #30a69c 0% 33.3%, #a63075 33.3% 66.6%, #a66130 66.6% 100%)`
- Triadic: `linear-gradient(90deg, #30a69c 0% 33.3%, #9c30a6 33.3% 66.6%, #a69c30 66.6% 100%)`
- Tetradic: `linear-gradient(90deg, #30a69c 0% 25%, #6130a6 25% 50%, #a6303a 50% 75%, #75a630 75% 100%)`

Each strip shows the scheme's hues at equal saturation. Notice how much louder the schemes get as the hues spread out.

| Harmony | Hues on the wheel | Feels | Hardest part |
| --- | --- | --- | --- |
| Monochromatic | One hue, many lightness steps | Calm, refined, unified | Avoiding flatness |
| [Analogous](https://gradiently.design/guide/analogous-colors) | Three neighbours, about 30 degrees apart | Natural, warm or cool, easy | Getting enough contrast |
| [Complementary](https://gradiently.design/guide/complementary-colors) | Two opposites, 180 degrees apart | Bold, energetic | Stopping the colours from fighting |
| Split complementary | One base plus the two neighbours of its opposite | Lively but softer than complementary | Choosing which colour leads |
| [Triadic](https://gradiently.design/guide/triadic-colors) | Three hues, 120 degrees apart | Playful, balanced | Looking childish at full strength |
| [Tetradic](https://gradiently.design/guide/tetradic-colors) | Two complementary pairs | Rich, complex | Holding four colours together |

Each scheme has its own article with codes and examples.

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.

- Teal white #edf3f2: #edf3f2
- Light teal #88ddd6: #88ddd6
- Teal #30a69c: #30a69c
- Teal ink #122b29: #122b29
- Coral accent #e0525d: #e0525d

A complementary scheme tamed: the teal leads in four lightness steps, the neutrals carry a trace of teal, and the red opposite becomes a single coral accent.

To make these adjustments by number, use a format that separates lightness from hue. HSL is the familiar choice; [OKLCH](https://gradiently.design/guide/oklch-explained) 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](https://gradiently.design/guide/60-30-10-rule) is a useful starting split.

### Clashes

- Equal areas of each colour
- Every colour at full saturation
- All colours at the same lightness
- Pure grey neutrals next to warm colours
- Opposites touching along long edges

### Harmonises

- One colour clearly dominant
- One vivid accent, the rest calmer
- A spread from light to dark
- Neutrals tinted with the main hue
- Opposites separated by space or a neutral

An Instagram portrait post announcing a ceramics open studio on Saturday, on a gradient background

One Mark: notice which colour leads, how much of the frame it covers, and where the words rest.

The same open studio post on a second gradient background with a different colour family

A second Mark with the same words. The colour relationship changes the mood; the message stays the same.

## How to build a harmonious palette in practice

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. **Pick a relationship for the mood** Analogous for calm, complementary or split complementary for energy, monochromatic for restraint.
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. **Decide the proportions** Name which colour covers most of the space, which supports and which appears only in small touches.
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](https://gradiently.design/guide/color-palette-generator).

## FAQ

### What is color harmony?

It is the quality of colours that look as if they belong together, usually achieved through hue relationships on the colour wheel combined with balanced lightness, saturation and proportion.

### What are the types of color harmony?

The classic six are monochromatic, analogous, complementary, split complementary, triadic and tetradic.

### Which color harmony is easiest to use?

Monochromatic and analogous schemes, because their hues are close together and rarely clash. They need a good spread of lightness to avoid looking flat.

### Why do my complementary colours clash?

Usually both are at full saturation and in equal amounts. Let one dominate, calm the other into an accent, and separate them with a neutral.