Colour for developers

A collection of attractive swatches is not yet a colour system. A system tells you which colour to use when a new button, link or status appears.

Hue is a position around a colour circle. Saturation moves between grey and a more intense colour; lightness moves toward black or white. Those are different decisions, and changing all three at once makes a palette hard to reason about.

A photograph already contains a palette. Large areas such as brick and timber establish its context; a small copper fitting or leaf can suggest an accent. The most common colour in the image does not have to become the strongest colour in the interface.

Most of an interface is background. A saturated page colour can dominate even when its small swatch looked harmless. Surface colours should help the content read as groups.

A colour is not “accessible” by itself. The same grey can work on one surface and disappear on another. A readable button fill also needs a readable label.

Colour has an amount as well as a value. A strong hue covering half a page makes a different impression from the same hue on one small action.

Two coloured dots might look different to you and still fail to communicate what they mean. Status needs a visible meaning that survives the loss of hue.

Apply the process to new content. The controls are familiar, but this page asks someone to reserve a workspace and understand which spaces are available. Its photograph is different from the guided café brief.