Colour is the part of design that feels the most personal and the least learnable. In practice a small number of ideas explain most of what goes right and wrong with colour in real work. This guide covers them in the order you will use them.

Colour is light, surface and observer

Colour is not a property of an object alone. It comes from light, a surface that absorbs some wavelengths and reflects others, and an observer. The eye has three kinds of cone cells, and the brain compares their signals to produce hue. Screens mix light, which is additive, and print mixes pigment, which is subtractive. This is why the same colour can look different on a screen and on paper.

Hue, value and saturation

Any colour can be described by three attributes. Hue is the family, such as red or blue. Value is how light or dark it is. Saturation is how pure or muted it is.

Value does most of the work. A layout that holds together in greyscale will hold together in colour. Many problems come from colours that differ in hue but are too similar in value, so they merge. Convert your design to greyscale as a quick check.

When refining a palette, change one attribute at a time. Adjust value first, then saturation, then hue.

Schemes as starting structures

Schemes are built from relationships on a colour wheel. A monochromatic scheme uses one hue with variations. An analogous scheme uses neighbouring hues and feels calm. A complementary scheme pairs opposite hues and feels energetic. Triadic and split complementary schemes use three hues spread around the wheel.

Treat them as scaffolds, not rules. A reliable guideline is a dominant colour for most of the area, a secondary colour for support and a small accent for emphasis. Equal amounts of competing colours usually feel unresolved.

Context changes colour

A colour never appears alone. A grey square looks lighter on a dark ground than on a light one. This effect, called simultaneous contrast, was explored in depth by Josef Albers in Interaction of Color. The practical lesson is to judge colour in place, in the real layout, at the real size and next to the real neighbours, not on an isolated swatch page.

Colour and accessibility

Roughly one in twelve men and a smaller share of women have some form of colour vision deficiency. Information carried by colour alone, such as red for error and green for success with no other cue, is lost to many people. Pair colour with an icon, a label or a pattern.

Text contrast is measurable. The Web Content Accessibility Guidelines set minimum ratios, for example 4.5 to 1 for normal text and 3 to 1 for large text at the AA level. Check them with a contrast tool instead of guessing.

Meaning is cultural

Colour associations are not universal. White is linked with weddings in some cultures and with mourning in others. Treat colour meaning as a hypothesis to check with your audience, not as a fixed dictionary.

Go deeper

Our course on Colour Theory and Application covers the physics and biology of colour, harmony, context effects, screen and print workflows and accessibility, with exercises. It pairs well with Visual Hierarchy and Visual Perception.

Further reading: Josef Albers, Interaction of Color; Johannes Itten, The Art of Color.