Colour Theory Explained

The three properties of any colour

Every colour can be described by three independent properties. Almost all colour problems come down to confusing them.

• Hue is the family — red, blue, yellow. It is the position on the wheel.
• Saturation is purity, from vivid to muted. It decides intensity.
• Value is lightness, from black to white. It decides legibility.

Beginners tend to adjust hue when the real problem is value. If two elements need to look different, changing their lightness will almost always work harder than changing their hue.

Value does most of the work

Turn any good design greyscale and you will find the hierarchy still intact: the heading is darker than the body, the body is darker than the caption, the disabled state is lighter than both. The colours were decoration on top of a structure that was already built from value.

The test is worth running on your own work. If the layout collapses into grey mush, the hierarchy was being carried entirely by hue, and it will fail for anyone who cannot distinguish those hues — around one in twelve men and one in two hundred women.

Temperature, and why it is relative

Warm colours — reds, oranges, yellows — tend to advance toward the viewer and feel active. Cool colours — blues, greens, violets — recede and feel calm. This is a reliable enough rule to build on, with one caveat: it only holds in comparison.

A yellow-green looks cool beside orange and warm beside blue. There is no absolute temperature, only a relationship. That is why a palette can feel warm as a whole even when it contains blues — the blues are cool relative to the other members, not to the page.

Saturation: the most abused property

Full saturation on a screen is a very strong signal. On a small area it reads as confidence; on a large area it becomes exhausting. Almost every “my design looks cheap” problem is a saturation problem.

A practical rule: the larger the area, the lower the saturation. Large backgrounds should sit around five to fifteen per cent. Accents and small elements can go to eighty or ninety. The intermediate range — a big block at sixty per cent saturation — is where things begin to look unconsidered.

Contrast, and the difference between contrast and legibility

Contrast is the measurable difference in luminance between two colours, expressed as a ratio. Legibility is whether a human can comfortably read the result. They overlap but they are not the same measurement.

A pair can reach 4.5:1 and still be uncomfortable: thin weights at small sizes, highly saturated pairs that appear to vibrate, or text over a busy photograph. Conversely, near-black on off-white at around 15:1 is technically below the maximum of 21:1 and is much easier on the eye than pure black on pure white.

Use the contrast checker for the number, then look at the result and decide whether it is actually readable.

Simultaneous contrast, and why neutrals are not neutral

A colour is never seen in isolation. A mid grey placed on white looks darker; the same grey on black looks lighter. This is simultaneous contrast, and it is the reason a palette that looks balanced in isolation can look wrong once it is on the page.

The practical consequence is that you should always judge a colour in its final context, not on a swatch sheet. It also explains why a warm grey next to a cool grey makes both look more extreme than either would alone.

Harmony in one paragraph

Harmony schemes are just fixed angular relationships on the wheel. Complementary is 180 degrees and gives maximum contrast; analogous is about 30 degrees and gives calm; triadic is 120 degrees and gives balanced variety. The angles tell you which colours belong together; they say nothing about proportion, which you still have to decide. The harmony guide covers all six in detail.

Colour in everyday choices

The same three properties apply outside design. When people ask which hair colour suits them, the useful question is usually about temperature and value: warm or cool, light or deep, relative to skin and eyes. A warm golden blonde and an ash blonde are the same hue family but sit on opposite sides of the temperature line, and they flatter different people.

Clothing works the same way. A monochromatic outfit — one hue at several values — is almost impossible to get wrong, which is why it is the standard advice for building a capsule wardrobe. Analogous combinations add interest without risk. Complementary combinations need one colour to dominate, otherwise the outfit reads as a costume.

A short checklist

1. Does the hierarchy survive in greyscale?
2. Is the largest area also the lowest saturation?
3. Is there exactly one accent colour per screen?
4. Does every text and background pair pass AA?
5. Are warm and cool colours doing different jobs, or arguing?
6. Does the palette still make sense next to real content?

If you can answer those six, the theoretical part is finished. The rest is judgement, and judgement only improves by looking at a lot of work — which is much easier with the colour wheel open beside it.