How to Choose Website Colours — Branding, Contrast and Psychology

Colour is one of the most powerful tools in web design, yet it’s often chosen based on personal preference rather than strategic thinking. The right colour palette reinforces your brand identity, guides visitors’ attention to the right places, creates the emotional tone you want to set, and meets accessibility requirements that affect a significant portion of your audience.

Here’s how to choose website colours that work on all four fronts.

Start With Your Brand, Not a Trend

Your website colours should reflect and reinforce your brand — not whatever is fashionable in web design this year. Begin with your existing brand assets: your logo, any printed materials, your social media presence. If you already have a brand colour palette, your website should use it consistently. Introducing entirely different colours online creates dissonance and undermines brand recognition.

If you’re starting from scratch, think about the emotional associations your colours should carry. Colour psychology is not a precise science, but broad associations are well established and worth considering: blue conveys trust and professionalism (widely used in financial services and healthcare); green suggests growth, health, and sustainability; red creates urgency and energy; orange is friendly and accessible; purple suggests creativity or luxury; black and charcoal read as premium and authoritative.

Your industry context matters too. A funeral director using bright orange would be jarring; a children’s activity centre using muted greys would be equally wrong. Look at how established, trusted brands in your sector use colour — not to copy them, but to understand the conventions your audience likely expects.

Building a Practical Website Colour Palette

Most effective website colour palettes use three to five colours: a primary brand colour, a secondary or accent colour, a neutral for backgrounds and large areas (white, off-white, or light grey), a dark neutral for body text, and sometimes an additional highlight colour for CTAs or alerts. Fewer colours used consistently looks more professional than many colours used sporadically.

Your call-to-action colour deserves special consideration. It should stand out from the rest of your palette — not clash with it, but create enough contrast to draw the eye. If your primary brand colour is blue, a warm accent (amber, orange, or coral) often works well for CTAs. The goal is that a visitor scanning the page can immediately see what they’re supposed to click.

Tools like Adobe Colour, Coolors, and Canva’s colour palette generator make it easy to build harmonious palettes from a starting colour. The Xpose team in Norwich often starts from a client’s primary brand colour and uses these tools to find complementary shades that work well on screen. Document your chosen colours as hex codes and use them consistently across your entire site.

Contrast, Accessibility, and Colour Blindness

One of the most common colour mistakes on websites is insufficient contrast between text and its background. Light grey text on a white background may look elegant in a design mockup but is genuinely difficult to read for a significant proportion of users — and fails WCAG 2.1 accessibility standards at anything less than a 4.5:1 contrast ratio for normal text.

Use a free contrast checker (WebAIM’s Contrast Checker is the most widely used) to verify every text and background combination in your palette before finalising it. This is particularly important for your body text colour on your page background, your light-coloured text on your primary brand colour, and any text overlaid on images.

Consider colour blindness, which affects approximately 1 in 12 men and 1 in 200 women in the UK. Red-green colour blindness is the most common form — if your design relies on red and green to convey different meanings (for example, in a form validation system showing errors in red and success in green), add a secondary indicator such as an icon or text label so the distinction is clear without relying on colour alone.