design hubs
On this page
Foundations
3 min read

What Colour Is

Colour is light made visible — a physical phenomenon translated by the eye and interpreted by the brain before any design decision begins.

Colour does not exist in objects. A red apple is not inherently red — it absorbs most wavelengths of light and reflects those in the 620–700nm range. Your eye detects those wavelengths, your brain interprets them as red. Change the light source and the apple changes colour. Colour is a transaction between light, surface, and perceiver — not a fixed property of things.

Colour is electromagnetic radiation

Visible light occupies a narrow band of the electromagnetic spectrum, sandwiched between ultraviolet (which we can’t see but can feel as sunburn) and infrared (which we feel as heat). Within that band, shorter wavelengths read as violet and blue, longer wavelengths as orange and red, with green in the middle. The full range from violet to red is roughly 380nm to 700nm.

This matters in practice because colour rendering changes with the light source. An object under incandescent light looks warmer than under fluorescent light, which looks different again from daylight. Photographers and cinematographers obsess over colour temperature for this reason. UI designers working with screen colour are somewhat insulated from this — screens emit their own light — but display calibration, ambient lighting, and the OS’s night mode all shift perceived colour.

The eye’s three channels

Human eyes contain three types of colour-sensitive cone cells, each tuned to respond most strongly to a different range of wavelengths — roughly red, green, and blue. This is why RGB works as a colour model: it mirrors the structure of human vision. When you specify rgb(255, 0, 0), you’re stimulating the red cones maximally, the others not at all.

Approximately 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly a reduced ability to distinguish red from green. This is not a rare edge case — it’s a substantial portion of your audience. Colour accessibility addresses how to design so that meaning doesn’t depend on colour alone.

Colour changes with context

Two identical colour swatches can appear different when placed on different backgrounds — this is simultaneous contrast, documented by Josef Albers in Interaction of Colour (1963). A mid-grey on a dark background looks lighter than the same grey on a light background. An orange on a blue background looks more vivid than the same orange on a red background.

This context-dependence means you cannot evaluate a colour in isolation. A swatch approved in a style guide may look completely different in context. Always review colours in the environment where they’ll appear: the actual interface, with actual surrounding content, on actual target hardware.

Why this matters for design

Understanding colour as a perceptual phenomenon rather than a fixed property makes you a better designer in two ways. First, you become skeptical of colour decisions made in isolation — colour must be tested in context. Second, you gain humility about “brand colour.” Your brand orange may look vivid and energetic on your MacBook Pro. On a 4-year-old Android phone with the default warm display setting, it may look muddy.

The principles in this hub — hue, saturation, and value, colour relationships, contrast — are tools for making deliberate decisions about this complex, context-dependent phenomenon.

One recurring tension: brand colours are often chosen at saturation levels that fail accessibility contrast requirements for text. The Conflict Matrix covers how to resolve it.

Practice

0 / 3

Keyboard shortcuts

Show shortcuts
?
Search
CtrlK
Previous article
Next article
Close
Esc