Color Theory

Colour Does a Job

In product design, colour is not decoration. It communicates: this is clickable, this succeeded, this is dangerous, this belongs to our brand. Good colour choices make interfaces easier to use. Poor ones make them confusing or, for some users, unusable.

---

The Colour Wheel

The colour wheel arranges hues in a circle. It helps you choose colours that work together.

• Complementary: opposite each other (orange and blue). High contrast and energetic. Good for a primary action against a calm background.
• Analogous: next to each other (orange, amber, red). Harmonious and calm.
• Triadic: three evenly spaced hues (red, yellow, blue). Vibrant, but hard to balance.
• Monochromatic: one hue in many lightnesses. Clean and safe, and the basis of most UI palettes.

Hue, saturation, lightness (HSL)

• Hue: the colour itself (0 to 360 degrees on the wheel)
• Saturation: how intense it is, from grey to vivid
• Lightness: how close to black or white

Designers often think in HSL because it makes tints and shades easy: keep the hue, change the lightness.

---

Building a UI Palette

A practical product palette has:

1. Primary (brand) colour with a range of shades, for example 50 to 900. Used for key actions and highlights.
2. Neutrals (greys) from almost-white to almost-black. These do most of the work: text, borders, backgrounds.
3. Semantic colours:
   • Success: green (transfer complete)
   • Warning: amber (low balance)
   • Error: red (incorrect PIN)
   • Info: blue (new feature)

Follow the 60-30-10 rule as a starting point: about 60% neutral background, 30% secondary surfaces, and 10% accent for actions.

---

Colour, Culture and Context

Colour meanings are not universal.

• Green signals money and success in many markets, and it is also strongly tied to Nigerian national identity. That is one reason so many Nigerian fintechs use green or teal.
• Red means error or loss in most interfaces, but good luck and celebration in China.
• White is associated with weddings in some cultures and mourning in others.

Research your users. A bank serving northern Nigeria, London and Nairobi should test its palette in all three places.

---

Accessibility and Contrast

About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Many more users read screens in bright sunlight or on low-quality displays.

WCAG contrast ratios

Contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white).

Buttons, icons and input borders need at least 3:1 against their background.

Never rely on colour alone

A red border alone does not tell a colour-blind user that a field has an error. Add an icon and a text message. Charts should use labels or patterns as well as colour.

A classic trap: white text on a bright orange or light green button often fails AA. Darken the button, or use dark text.

---

Try It in the Lab

The palette generator creates harmonious palettes from any brand colour using colour-wheel rules. The contrast checker calculates the real WCAG ratio for any text and background pair and shows AA/AAA results. Try making an orange button that passes AA with white text.