Stop 02 · Design Principles & Visual DesignTopics · 2/11

Color Theory

In short

Colour is the first thing people notice and the easiest thing to get wrong. A small set of colours, used with a clear job each, beats a rainbow every time.

Understanding color relationships (complementary, analogous, triadic), contrast, and the emotional/functional meaning of color — used deliberately, not decoratively, in a strong interface.

The jaadu holds a pink cloth next to a green one in front of a mirror, looking pleased.

Think of it like this

Matching an outfit

A pink kurta with a green dupatta pops because they sit opposite each other. Three shades of blue feel calm and safe. Most good outfits use one main colour, one support and a small bright accent. Screens work the same way.

Watch it happen

Colour combinations on the wheel

Red

Orange

Yellow

Green

Blue

Purple

1/4Complementary: colours opposite each other, like red and green. High contrast, great for one thing that must pop.

The big ideas

What you need to know

Give each colour a job

Primary for main actions, red for errors, green for success, greys for text and borders. Don't mix the jobs.

Try 60-30-10

Roughly 60% neutral background, 30% secondary, 10% accent. It's a starting rule, not a law.

Contrast before beauty

A lovely colour that makes text hard to read fails. Check text contrast for every colour pair you use.

Never colour alone

About 1 in 12 men have some colour blindness. Pair colour with an icon or text, like a red border plus an error message.

See it in code

Walk through the code

json

1{2  "color": {3    "primary":   { "value": "#7E39FE" },4    "text":      { "value": "#1F1A2E" },5    "muted":     { "value": "#6B6578" },6    "surface":   { "value": "#FFFFFF" },7    "danger":    { "value": "#D92D20" },8    "success":   { "value": "#12805C" }9  }10}

1/3Primary is the brand colour, used for main buttons and links only.

A tiny colour palette written as design tokens. Each colour is named by its job, not its shade, so 'danger' can change without renaming anything.

Save yourself the pain

Common mistakes

Oops

Using five bright colours on one screen to make it 'lively'.

Do this instead

Keep most of the screen neutral and save bright colour for what needs attention.

Oops

Showing errors only by turning the field red.

Do this instead

Add an icon and a short message too, so colour-blind users and people in sunlight still get it.

Your mission

Build a five-colour palette

~30 min

Quick check

Your 'Delete' and 'Save' buttons are both bright red. What's the main problem?

Go deeper

1Build a simple color palette using a color wheel tool, choosing a relationship intentionally.
2Check your palette's contrast ratios against WCAG accessibility standards.
3Study how a brand you admire uses color functionally (e.g. red for errors, green for success).