How to Choose a Website’s Colour Scheme That Converts

A visitor forms an opinion about a website within a fraction of a second, and colour drives most of that first judgement, long before anyone reads a headline or scrolls past the fold. A confused or clashing website’s colour scheme can quietly cost a small business enquiries it never even knew it lost. Getting a website’s colour scheme right isn’t a design nicety tacked on at the end of a build; it’s a decision that touches trust, readability, accessibility, and ultimately conversions.

This guide covers what a website’s colour scheme actually is, how the colour wheel and colour harmonies work, what colour psychology means for UK and Irish businesses specifically, how to apply the 60-30-10 rule to a website colour palette, and how to keep a colour scheme in web design accessible and consistent once the site is live. The website colour schemes covered here range from simple two-tone palettes to fuller, multi-role systems, but the underlying colour scheme in web design principles stay the same regardless of scale.

What Is a Website’s Colour Scheme?

A website’s colour scheme is the defined, limited set of colours applied consistently across a site: backgrounds, headings, body text, buttons, icons, and imagery all draw from the same small palette rather than each page picking its own shades. The point isn’t decoration; a clear colour scheme in web design reduces cognitive load for the visitor, reinforces brand identity at every touchpoint, and directs attention towards the actions a business wants people to take, whether that’s booking a call or adding an item to a basket.

Without a defined website colour palette, sites tend to drift. Different shades of the same “brand blue” turn up across pages, call-to-action buttons blend into the background instead of standing out, and headers clash with imagery. Visitors read that drift as an unfinished business, even if they couldn’t say exactly why. Most website colour schemes fail because nobody ever wrote the palette down in the first place, so a colour scheme in web design ends up drifting page by page rather than holding up consistently across every button, form, and error state.

The Colour Wheel: Primary, Secondary, and Tertiary Colours

Every colour decision on a website’s colour scheme traces back to the colour wheel, a circular model organising twelve colours by how they relate to one another. Understanding it makes every later colour combination a deliberate choice rather than a guess.

Red, blue, and yellow are the three primary colours. They can’t be created by mixing anything else, and every other colour on the wheel derives from some combination of the three. Mix two primaries and you get a secondary colour: red and blue make purple, blue and yellow make green, yellow and red make orange. Mix a primary with an adjacent secondary and you get one of six tertiary colours, such as red-orange or blue-green. Tertiary shades tend to be more muted and work well as accents rather than as the dominant brand colour.

Colour Harmonies for a Website Colour Palette

Once the wheel is understood, harmony rules explain which combinations sit well together and why, and they’re the difference between a website colour palette that feels deliberate and one that feels like guesswork.

A complementary scheme pairs two colours directly opposite each other on the wheel, such as blue and orange or red and green; the contrast is strong, which works well for a neutral brand colour paired with a punchy accent on a call-to-action button. An analogous scheme uses three colours sitting next to each other, like blue, blue-green, and green, feeling calm and cohesive, though it can lack contrast if handled carelessly. A triadic scheme spaces three colours equally around the wheel, giving variety with balance, provided one colour dominates and the other two stay supporting.

A split-complementary scheme takes a base colour plus the two shades adjacent to its complement, offering contrast with more flexibility than a straight complementary pairing. A tetradic scheme uses two complementary pairs, four colours in total; it’s rich but genuinely difficult to balance, and rarely the right starting point for a first-time brand palette.

None of these harmony types is inherently “better” than another. A financial services website’s colour scheme built on a complementary blue-and-orange pairing can work just as well as a wellness brand’s analogous green palette, provided the choice matches what the sector and audience expect.

The Psychology of Colour: What Your Palette Communicates

Colour psychology isn’t an exact science, and reactions vary by culture and personal experience. Even so, certain associations are consistent enough in UK and Irish markets to shape sensible website colour scheme decisions.

“Colour is one of the first brand signals a visitor encounters,” says Ciaran Connolly, founder of ProfileTree. “We’ve worked with businesses across Northern Ireland, Ireland, and the UK who invested heavily in strong copywriting and solid SEO, then lost conversions because their site palette sent the wrong message entirely. Getting colour right early saves a lot of remedial work later.”

That warning holds particularly true across UK and Irish sectors, where certain website colour schemes carry established associations of their own. NHS Blue has become shorthand for public trust and clinical reliability, which is one reason so many healthcare and financial services website colour schemes lean on similar tones. Monzo’s coral is the opposite approach: a deliberate disruptor signal that says “not a traditional bank” the moment it appears on screen. John Lewis and the BBC both lean on restrained, heritage-adjacent colour schemes that signal establishment rather than novelty.

None of this means a business must copy its sector’s default; a law firm that chooses warm, approachable tones instead of the standard navy and grey can use that departure deliberately, provided the rest of the brand experience backs it up and the decision is a conscious one rather than a template default nobody questioned. If a business is weighing that kind of departure, ProfileTree’s accessibility compliance guide for legal website design covers the sector-specific constraints worth knowing before making the call.

Building a Website Colour Palette: The 60-30-10 Rule

Knowing which colour communicates what only solves half the problem of a website’s colour scheme. How those colours are distributed across the site determines whether the result feels intentional or accidental, and this is where most website colour schemes actually fall apart in practice.

Applying the 60-30-10 Rule

The 60-30-10 rule is a distribution principle borrowed from interior design: 60% of the visual space goes to a dominant colour, usually a neutral such as white, off-white, or a pale tone of the brand colour; 30% goes to a secondary colour, typically the primary brand colour applied to headers, navigation, and structural elements; and 10% goes to an accent colour, used sparingly for call-to-action buttons, highlights, and the messages that matter most.

The dominant colour needs to be calm enough not to fatigue the eye over a long read. The accent colour only works because it’s rare; using it everywhere dilutes the effect entirely, and a visitor stops noticing it as a signal to act. Businesses that skip this ratio tend to drench the whole site in the brand colour, so nothing stands out, or reuse the accent so often that it stops registering as a signal to act.

A Step-by-Step Process for Choosing a Palette

A straightforward process beats trying to settle every decision at once. Start by writing down three adjectives describing how the brand should feel, then pick one lead colour that fits those adjectives and suits the sector. Build a harmony around that lead colour using a tool such as Adobe Colour or Coolors, generating a complementary or analogous website colour palette rather than guessing. Assign roles using the 60-30-10 ratio before applying anything to a live design, test every text-and-background combination for contrast, and document the exact hex codes once the palette is set; there’s no such thing as “close enough” once a brand is live across multiple channels.

Accessibility and Website Colour Palette Compliance

A website colour palette that looks polished but fails basic contrast checks isn’t a finished website’s colour scheme; it’s one that actively excludes part of its own audience, and in the UK that’s increasingly a legal question as well as a design one. Accessibility touches every part of a colour scheme in web design, from the text-and-background pairings used throughout the page to how the palette behaves once a visitor’s device switches to a different display mode.

Contrast Ratios That Matter

The Web Content Accessibility Guidelines set a minimum contrast ratio of 4.5:1 for standard text against its background, and 3:1 for large text. That’s not a suggestion for public sector or service-providing sites in the UK; accessibility compliance is a genuine legal consideration, not just good practice. The difference between passing and failing is often smaller than it looks on screen: light grey text on a white background might sit around 2.1:1, which fails outright, while switching to a deep navy on the same white background can push that ratio past 7:1.

WebAIM’s Contrast Checker makes it straightforward to test any combination before committing to it, and doing this when the website colour palette is first assigned saves reworking a finished template later.

Designing for Colour-Blindness

Around one in twelve men and a much smaller proportion of women have some form of colour vision deficiency, most commonly difficulty distinguishing red from green. A colour scheme that relies purely on colour to communicate a state, a red error message with no icon or text label, will simply fail for that audience; pairing colour with a second signal (an icon, an underline, explicit wording) fixes this without touching the overall aesthetic. Sites that get their information architecture right in other ways too tend to score better on accessibility overall; this guide to accessible navigation covers the structural side of that work.

Contrast and colour-blind accessibility aren’t the end of the picture for a website’s colour scheme, either; the same palette also has to hold up once a visitor’s device settings change how it’s displayed, which is where dark mode comes in.

Adapting a Colour Scheme for Dark Mode

System-wide dark mode is now a standard expectation rather than a niche preference, and a website colour palette that only works on a white background is incomplete. Inverting a brand without losing its identity usually means keeping the same hue relationships (the same blue, the same accent) while adjusting lightness and saturation so text stays readable against a dark canvas; a pure white background dropped straight to pure black rarely works, whereas a dark charcoal or deep navy renders brand colours more accurately and causes less eye strain.

Darker palettes also genuinely draw less power on OLED screens, a small but growing consideration for sustainability-conscious businesses, and testing a colour scheme in both light and dark mode before launch catches problems that only show up in one context, such as an accent colour that disappears against a dark background.

Keeping a Colour Scheme Consistent Across Every Channel

A website’s colour scheme only delivers its full value once it’s applied consistently everywhere a customer meets the brand, not just on the website. The palette should map directly onto social media graphics, email templates, printed materials, and any paid advertising running alongside the site. When a customer moves from an Instagram post to the website to a printed leaflet, each touchpoint should read as the same website colour scheme. Inconsistency signals a brand that’s still finding its feet, which creates a small but real seed of doubt in a customer’s mind.

A consistent website colour scheme applied across every channel is also one of the cheapest ways a small business can look established, regardless of actual size, and it reinforces the same website colour palette a visitor first saw on the homepage.

For smaller teams without a dedicated designer, Canva remains a practical way to keep graphics on-brand without constant oversight. Setting up a brand kit inside it, locking in hex codes, fonts, and logo files, makes it far harder for the palette to drift; this breakdown of Canva’s AI features covers how to get more from the platform day to day. If a logo refresh is on the table, it’s worth reading alongside a guide to getting a logo right. The same applies to tone: a palette and a consistent brand voice should tell the same story, and a wider look at brand storytelling shows how the visual and verbal sides of a brand work together.

ProfileTree works with businesses across Northern Ireland, Ireland, and the UK on web design and development projects where colour and accessibility are treated as part of the brief from day one, not an afterthought fixed post-launch.

Choosing a Colour Scheme That Works for the Business

The theory matters, but the practical decision on a website’s colour scheme usually comes down to four questions. What does the business need visitors to feel: trust, excitement, calm, ambition? What does the existing logo and brand already use, since a website colour palette that contradicts an established logo creates friction at every touchpoint? What does the sector typically use, and is departing from that convention a genuine differentiation strategy or just guesswork? And finally, does the colour combination actually pass a contrast check, because none of the first three questions matter if the text is unreadable.

Answering those four questions properly, then documenting the result, is what separates a considered website’s colour scheme from one picked in an afternoon and never revisited.

Get in touch with ProfileTree if a colour and accessibility review of an existing site, or a fresh website colour palette for a new build, would help.

Frequently Asked Questions