Colour Theory in Practice

Most beginners pick colours they like and then find places to use them. That produces a palette with no structure, and every new screen requires a fresh decision. The alternative is to list the jobs an interface needs colour to do, and only then choose values.

That's around ten values, and it covers a complete product. Name them by role — `--color-text-muted`, not `--color-grey-400` — because a role name still makes sense when the theme changes, and an appearance name produces the absurdity of a "grey" that's light blue in dark mode.

Contrast ratio is a measurement of the difference in luminance between two colours, from 1:1 (identical) to 21:1 (black on white). It's the difference between text that can be read and text that merely looks calm on your monitor.

Check ratios in your browser's dev tools, which report them on hover in the colour picker. Do it while choosing the palette, not during an accessibility review six months later — retrofitting contrast means changing values that every screen already depends on.

The most useful colour rule in interface design isn't about hue at all. It's about how much. A rough starting proportion: most of the screen neutral, a small share carrying secondary weight, and a very small share saturated.

Accent colour works because it's scarce. Applied to the primary button, the active nav item, and the link colour, it draws the eye exactly where you intended. Applied to eight elements on one screen, it stops meaning anything — the eye can't prefer everything.

Colour carries associations, and they're real but weaker and more context-dependent than popular writing suggests. Some are learned conventions strong enough to design around; others vary by culture, by industry, and by individual, and building a decision on them is guessing.

• Reliable — red for stop, destructive, or error, in most interface contexts; green for confirmed or complete. These are conventions users have practised for decades
• Reliable — a saturated colour against neutrals draws attention. That's a property of contrast, not of the hue
• Weak — "blue conveys trust." It's common in finance and technology largely because competitors use it, which is a convention, not a mechanism
• Weak — precise emotional claims about specific hues. Effects reported in the research literature are small and highly context-dependent

1. 01Write the role list firstBackground, surface, text, muted text, subtle text, line, accent. Seven names, no values yet.
2. 02Choose the neutralsPick a background and a text colour that reach at least 12:1. Derive the muted and subtle text from the text colour, checking each against 4.5:1.
3. 03Choose one accent, then test it as textMany brand colours pass as a button fill and fail as link text. When that happens, keep a darker variant specifically for text and borders.
4. 04Build the dark theme by swapping role values onlyIf the roles are named properly, this is a list of new values, not a redesign.
5. 05Check the whole thing in greyscaleIf the interface stops working, colour was doing a job that size, weight, and spacing should have been doing.