Colours That Work: Simple Colour Tips for Your Slides, Posters and Websites
You don’t need to be a designer to use colour well. Simple rules for choosing colours, building a palette and making text easy to read — with free tools to help.
Have you ever seen a presentation with yellow text on a white background, or a poster using every colour in the rainbow? We’ve all made those mistakes. The good news: a few simple rules can make your slides, posters, invitations and websites look clean and professional.
🎨 Rule 1: Use the 60-30-10 Rule
Interior designers have used this rule for years, and it works on screens too:
- 60% — a main, calm colour (often white, off-white or a light grey) for backgrounds.
- 30% — a secondary colour for headers, panels or sections.
- 10% — an accent colour for buttons, highlights and the things you want people to notice.
On this website, for example, the background is light, text is dark navy, and red is the accent for buttons and links.
🌈 Rule 2: Build a Palette, Don’t Pick Random Colours
Colours that sit in a planned relationship look good together:
- Monochromatic: lighter and darker versions of one colour — calm and elegant.
- Analogous: neighbours on the colour wheel, like blue, teal and green — natural and pleasing.
- Complementary: opposites, like blue and orange — bold and energetic. Use one as the main colour and the other only as an accent.
My free Palette Generator creates all of these from any colour you pick, and Shades & Tints gives you lighter and darker versions instantly.
👓 Rule 3: Contrast Is Everything for Text
Beautiful colours are useless if people can’t read the words. The web accessibility guidelines (WCAG) recommend a contrast ratio of at least 4.5 : 1 for normal text and 3 : 1 for large headings.
- ✅ Dark text on a light background, or white text on a dark background.
- ❌ Light grey on white, yellow on white, red on green.
Check any combination in my Contrast Checker — it even suggests a nearby colour that passes.
🧠 Rule 4: Colours Carry Meaning
- Red — urgency, energy, warning (also festive and auspicious in Indian culture).
- Green — success, growth, health, money.
- Blue — trust and calm — which is why so many banks and tech companies use it.
- Orange/Yellow — warmth, optimism, attention.
Pick colours that match your message. A health poster in calm greens feels very different from one in loud reds.
🖼️ Rule 5: Borrow Colours From a Photo
If you have a beautiful photo — a sunset, a festival, your brand logo — pull your palette straight from it. Upload it to my Image Colour Picker and click to grab exact colour codes.
“Good design is not about using more colours. It’s about using the right few.”
✅ A Quick Checklist
- One main colour, one secondary, one accent.
- Text passes the contrast check.
- No more than 3–4 colours on one slide or page.
- Important buttons use the accent colour — and only the important ones.
- Colours match the mood of your message.
Want a background with style? Try the Gradient Generator and copy the CSS straight into your website.
Software engineer by skill, storyteller by soul. I write about life, health, money and technology from my own experience — and build free tools you can use every day.
