Website Color Palette Guide: How to Choose Colors That Convert

Website colour palette selection shapes how visitors perceive your brand before they read a word of your content. Colour communicates trust, energy, warmth, authority, and innovation — and it communicates these qualities immediately, at a level below conscious processing. A healthcare website with a brash orange primary colour, or a luxury brand with a fast-food red, creates cognitive dissonance that undermines the message before it begins. In the US, UK, Canada, and Australia, the businesses with the strongest converting websites have colour palettes that are not necessarily beautiful in isolation — they are precisely matched to the positioning, audience, and conversion goals of the business.

This guide covers how to build a website colour palette that supports your brand positioning, passes accessibility requirements, and works across all the contexts your brand appears.

What Does Colour Communicate on a Website?

Colour communicates at two levels simultaneously:

Cultural and psychological associations: Broadly consistent within the US, UK, Canada, and Australia, though with regional variations.

• Blue: trust, calm, authority, reliability (most widely used in financial services, healthcare, technology)
• Green: health, growth, sustainability, safety (healthcare, environment, finance)
• Red: urgency, passion, excitement, danger (promotions, food, energy, warnings)
• Orange: energy, warmth, creativity, approachability (consumer brands, creative services, food)
• Purple: luxury, creativity, spirituality, royalty (premium brands, beauty, spirituality)
• Yellow: optimism, energy, attention (warnings, food, children's products)
• Black: sophistication, luxury, authority, exclusivity (premium fashion, luxury goods, high-end professional services)
• White: purity, clarity, simplicity, medical (healthcare, minimalist tech, premium consumer)
• Navy: authority, stability, trustworthiness (finance, legal, military, corporate professional services)

Brand context: The same colour communicates differently depending on what it is paired with, the typeface it accompanies, and the industry context. Navy communicates financial authority on a bank website; the same navy on a design studio website communicates a particular kind of understated premium.

What Are the Three Layers of a Website Colour Palette?

A well-constructed website colour palette has three layers:

1. Primary colour (brand colour): The dominant colour used for headings, key UI elements, and brand identification. Used sparingly — 20–30% of the visual space. For most businesses, this is a single well-chosen colour that represents the brand's personality.

2. Neutral base: The background and default text colour. Typically white, off-white, light grey, cream, or dark navy/charcoal (for dark-mode palettes). Takes up 60–70% of the visual space. The neutral must have sufficient contrast with both body text and the primary colour.

3. Accent colour: A secondary colour used for CTA buttons, highlights, links, and emphasis. Must contrast strongly with the neutral base. Often a complementary or analogous colour to the primary — but frequently a contrasting colour chosen specifically to make CTAs visually distinct.

A simple, effective example: Primary — navy (#1a2744), Neutral — white/off-white (#fafafa), Accent — warm orange (#e8622a). The orange CTA buttons immediately distinguish themselves from the navy elements on the white background.

How Should CTA Button Colours Be Chosen?

CTA button colour is the most commercially important colour decision on the website. The button colour should:

1. Not appear elsewhere on the page as a background or design element — uniqueness makes it immediately recognisable as an action trigger
2. Create high contrast against the page background — minimum 3:1 contrast ratio, preferably higher
3. Be visually distinct from the primary brand colour — if the brand colour is navy, a navy CTA button blends into the brand elements and loses its action signal

Research on CTA button colour shows orange, green, and red CTAs consistently outperform blue and grey CTAs on pages with blue/neutral brand palettes — primarily because of contrast and uniqueness. But the principle is contrast and uniqueness, not a specific colour prescription.

See call to action design guide for the full CTA design framework.

What Are the Accessibility Requirements for Website Colour?

WCAG 2.1 AA — the accessibility standard required by most UK, US, Canadian, and Australian government and regulated industry websites — specifies:

Normal body text (under 18px or 14px bold): Minimum 4.5:1 contrast ratio between text colour and background colour.

Large text (18px+ or 14px+ bold): Minimum 3:1 contrast ratio.

Non-text elements (icons, form borders, CTA buttons): Minimum 3:1 contrast ratio against adjacent colours.

Practical implications:

• Dark grey (#595959) on white (#ffffff) passes at 7:1 ✓
• Light grey (#767676) on white (#ffffff) fails at 4.48:1 ✗
• Small text #999 on white fails — this is one of the most common violations on business websites
• Blue #1a73e8 on white passes for large text but fails for small body text

Use the Colour Contrast Checker at webaim.org to verify every text/background combination before publishing.

What Colour Palettes Work for Different Industries?

Legal and financial services: Navy, charcoal, deep burgundy — authority, stability, trustworthiness. Avoid bright or playful palettes.

Healthcare and medical: Blue, white, green, sage — clinical credibility paired with calm. Warmer tones (cream, sage) for wellness-oriented practices. See web design for healthcare.

Technology and SaaS: Dark mode (near-black + bright accent), or clean light palette with a bold primary. Blues and teals remain dominant.

Professional services: Restrained palettes — navy or charcoal primary, white neutral, single accent. Signals competence and seriousness.

Ecommerce and consumer: More latitude. Brand personality drives palette choice. See web design for ecommerce.

Creative agencies and studios: Palettes that demonstrate design sensibility. Often a distinctive primary (deep terracotta, forest green, aubergine) with high-contrast neutrals.

Restaurants and hospitality: Warm palettes (terracotta, cream, deep burgundy) for premium dining. Brighter, more energetic palettes for casual. See web design for restaurants.

What Are the Most Common Website Colour Mistakes?

Mistake 1: Too many colours. A palette with five or more distinct colours across UI elements creates visual chaos. Three is the maximum for most business websites: primary, neutral, accent.

Mistake 2: Low contrast grey text. Light grey body text on white is the most common accessibility failure on business websites — and a direct readability problem. #999 grey on white fails WCAG AA for body text.

Mistake 3: CTA button same colour as brand elements. A navy CTA button on a navy brand website is invisible as an action trigger. The CTA must contrast with everything around it.

Mistake 4: Inconsistent colour application. Using three different shades of blue for different sections, with no systematic relationship, creates an amateurish appearance. Define specific hex values for each role and apply them consistently.

Mistake 5: Colour that contradicts the brand positioning. A luxury brand using fast-food red, a healthcare practice using neon green, a law firm using playful pastels — colour that contradicts the implicit promise of the brand positioning creates credibility confusion that the strongest content cannot fully overcome.

See website typography guide for how typography and colour work together as the foundation of a website's visual identity.