Working with colour

Colour sets the mood, draws attention, and shapes how a design feels — but it's also where beginners most often go wrong (too many colours, clashing choices, poor contrast). Understanding how to use colour purposefully transforms your designs. The secret is usually restraint.

Colour has meaning and emotion

Colours carry associations that affect how people feel about your design:

• Blue — trust, calm, professionalism (why so many brands and banks use it).
• Green — growth, health, money, "go".
• Red — urgency, energy, warning, passion.
• Yellow/Orange — warmth, optimism, attention.
• Black/grey — sophistication, neutrality, seriousness.

Choose colours that match the feeling you want. A calm, trustworthy service leans blue; an energetic sale might use red/orange. Colour isn't just decoration — it communicates before anyone reads a word.

Use colour with restraint

The most common colour mistake is using too many. Professional designs typically use a small palette — often one main colour, a neutral (grey), and maybe one accent:

The restrained version looks calmer and more professional. When starting out, limit yourself to one main colour plus neutrals (greys/black/white). You can add an accent later. Fewer colours, used consistently, almost always looks better than many.

The 60-30-10 rule

A classic, useful guideline for proportion: use your colours roughly 60% dominant (usually a neutral background), 30% secondary, and 10% accent (for highlights like buttons and links):

The neutral background dominates (60%), text provides the secondary tone (30%), and the accent colour appears sparingly (10%) — exactly where you want attention (the button). Using your boldest colour sparingly makes it powerful; using it everywhere makes it noise. Let neutrals carry most of the design and save your accent for what matters.

The mistake beginners make

Using too many colours, and using bright colours too much (so nothing stands out and it feels chaotic). Restraint wins: one main colour plus neutrals, with the accent used sparingly (the 60-30-10 idea). Also, choosing colours that clash or don't suit the mood. And — critically — poor contrast between text and background (covered in an upcoming lesson), which hurts readability. Start with a limited palette, let neutrals dominate, save bold colour for accents, and always check text contrast.

Your turn

This design uses too many colours. Restrain it — pick one main colour plus greys, and use the bold colour only for the button:

Your turn

1. Choose colours purposefully — matching the emotion/mood you want (blue = trust, red = urgency, etc.).
2. Use restraint: one main colour plus neutrals (grey/black/white); add an accent sparingly.
3. Apply the 60-30-10 proportion — mostly neutral, with your accent colour used only where attention belongs.

Key points

• Colour communicates emotion (blue = trust, green = growth, red = urgency) — choose to match the feeling you want.
• Restraint wins: start with one main colour plus neutrals (greys); too many colours looks chaotic.
• 60-30-10: ~60% dominant neutral, 30% secondary, 10% accent — use bold colour SPARINGLY so it stays powerful.
• Let neutrals carry most of the design; save your accent for what matters (buttons, links, highlights).