Colour Theory & Application

Colour is not a property of objects alone. It is the result of light, a surface and an observer. Visible light is a band of electromagnetic wavelengths. A surface absorbs some of them and reflects others, and the eye responds to what arrives.

The human eye has three kinds of cone cells that respond most to long, medium and short wavelengths, often described as red, green and blue sensitive. The brain compares their signals to produce the experience of hue. This three part system is why screens can reproduce a wide range of colours with only three kinds of light.

Screens mix light, which is additive: combining red, green and blue light moves toward white. Print mixes pigments, which is subtractive: each ink absorbs more light, moving toward dark. This is why the same colour can look different on a screen and on paper, and why the two need different colour models.

Colour perception also changes with the light source. A fabric under warm indoor light and under daylight can look noticeably different. Designers who work with physical products need to check colour under the light in which it will be seen.

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

Value does most of the work in a design. A layout that holds together in greyscale will hold together in colour. Many readability and hierarchy problems come from colours that differ in hue but are too similar in value, so they vibrate or merge when viewed together.

Saturation controls energy and tone. Highly saturated colours feel loud and playful, while desaturated colours feel calm, serious or sophisticated. Most professional palettes use a small amount of saturated colour against mostly muted neutrals, so the bright colour has somewhere to stand out.

When refining a palette, change one attribute at a time. Adjust value first, then saturation, then hue. This method makes the effect of each decision clear, and avoids chasing a result by random trial.

Colour schemes are starting structures based on relationships on a colour wheel. A monochromatic scheme uses one hue with variations of value and saturation. An analogous scheme uses neighbouring hues. A complementary scheme pairs hues opposite each other. Triadic and split complementary schemes use three hues spread around the wheel.

Each structure has a typical character. Analogous palettes feel calm and cohesive. Complementary palettes feel energetic and have strong contrast. Monochromatic palettes feel restrained and elegant. These characters are tendencies and context changes them.

Use schemes as scaffolds. Pick a base structure, then adjust proportions. A common 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.

Remember that harmony is not the same as usefulness. A harmonious palette that lacks contrast between text and background fails the reader. Check scheme and legibility together, not in sequence.

A colour never appears alone. Its neighbours change how it looks. This effect, called simultaneous contrast, means that a grey square on a red ground looks slightly greenish and on a dark ground looks lighter than on a light ground.

Josef Albers built an entire teaching practice on this idea. His exercises showed that two different colours can be made to look alike, and that one colour can look like two different colours, by changing what surrounds them. The lesson for designers is that swatches in isolation are unreliable.

Contrast also comes in several kinds. Contrast of value, of hue, of saturation, of temperature and of extent all create different effects. A small area of a strong colour can balance a large area of a quiet one, which is contrast of extent in use.

Always judge colour in place. Put candidate colours in the real layout, at the real size, next to the real neighbours and under the real conditions. Adjust there, not on a separate swatch page.

Every output medium has a gamut, the range of colours it can reproduce. Screens in RGB have a wider gamut for bright saturated colours than standard four colour CMYK print. A vivid screen blue or green may have no direct CMYK equivalent and will print duller.

Different colour spaces exist for different needs. sRGB is the common standard for the web. Wider spaces such as Display P3 are available on newer screens. CMYK describes process inks. Spot inks, such as Pantone colours, are premixed and can reach colours that process inks cannot.

Plan the output early. If a project will be printed, choose and proof colours in the print space, or at least preview with a soft proof. If it will appear on many devices, accept that colour will vary and rely on contrast and relationships, not exact values.

Communicate colour precisely. Provide values for each medium: hex for screen, CMYK and a spot reference for print. Attach a physical sample where colour is critical. Leaving this to the printer or developer invites mismatch.

Colours carry associations, but those associations are not universal. White is linked with weddings in some cultures and with mourning in others. Red can suggest luck, danger or passion depending on context. Treat colour meaning as a hypothesis to check with the audience, not as a fixed dictionary.

Accessibility is a practical dimension of colour. 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 for many people.

Contrast between text and background is also a legibility requirement. The Web Content Accessibility Guidelines set minimum contrast ratios, for example 4.5 to 1 for normal text and 3 to 1 for large text at the AA level. These are measurable and should be checked, not guessed.

A reliable approach is to never rely on colour alone. Pair colour with an icon, a label, a pattern or position. Test palettes with a colour blindness simulator and a contrast checker, and review meaning with people from the target culture.