Choosing brand colours for your website is a strategic process that defines how visitors perceive your business before they read a single word. Colour communicates personality, builds recognition, and directly influences whether a visitor trusts you enough to stay. The industry frameworks that guide this process, including the 60-30-10 rule and WCAG accessibility standards, give small business owners a reliable structure to follow. This guide walks through each step practically, from defining your brand personality to validating your palette for accessibility and real-world use.
How to choose brand colours for your website: start with personality
The single most important step in selecting a website colour scheme is defining your brand personality before you open a colour picker. Colour is a visual expression of character. Without a clear character to express, you end up choosing colours that look pleasant but communicate nothing specific.
A practical method is to write down three words that describe how you want customers to feel when they interact with your brand. The words might be “calm, trustworthy, and approachable” for a financial adviser, or “bold, creative, and energetic” for a branding studio. These three words become your filter for every colour decision that follows.
- Write your three personality words. Be specific. “Professional” is too broad. “Quietly confident” or “warmly authoritative” gives you a much clearer direction.
- Map each word to a colour family. Calm maps to cool blues and soft greens. Bold maps to saturated reds, oranges, or deep purples. Approachable maps to warm neutrals and soft yellows.
- Check your industry for colour clichés. Finance firms default to navy blue. Health brands default to green. Competitor colour audits reveal which hues are overused in your sector, giving you the information you need to differentiate.
Pro Tip: Before finalising any colour direction, screenshot the websites of five direct competitors and place them side by side. If they all share the same dominant hue, choosing a neighbouring colour on the wheel will make your brand immediately more distinctive without abandoning the emotional territory of your industry.
Business owners frequently default to colour clichés rather than selecting colours that reflect their unique positioning. The audit step is what separates a generic palette from one that genuinely represents your brand.
What does colour psychology actually tell us about branding?
Colour psychology is the study of how specific hues influence human emotion and behaviour. It is a useful starting point for choosing colours for branding, but it is not a rulebook. Colour meanings shift depending on industry context, cultural background, and the specific shade used. Red signals urgency in e-commerce but signals passion in hospitality. Green means health in wellness brands but means money in financial services.
The more reliable framework is colour harmony, which describes how colours relate to each other on the colour wheel. Four primary harmony types shape the mood and contrast of any palette:
- Complementary: Two colours directly opposite on the wheel, such as blue and orange. These create strong contrast and visual energy, making them effective for call-to-action elements.
- Analogous: Three or four colours sitting adjacent on the wheel, such as teal, green, and yellow-green. These produce a calm, cohesive feel and work well for brands emphasising trust or wellbeing.
- Triadic: Three colours evenly spaced around the wheel. This combination adds vividness and visual interest without the tension of complementary pairings.
- Split-complementary: A base colour paired with the two colours adjacent to its complement. This balances contrast and harmony, making it a forgiving choice for small business owners new to colour theory.
Once you understand harmony types, you can select a primary colour that expresses your dominant personality word, a secondary colour from a harmonious relationship, and an accent colour for interactive elements. Most brands use three core colours plus two or three neutrals. Expanding beyond that dilutes brand recognition rather than strengthening it.
The warning here is worth stating plainly. Colour psychology gives you a direction, not a destination. A teal that reads as “calm and professional” in one context reads as “clinical and cold” in another. Your three personality words, not a generic colour meanings chart, should make the final call.
How do you balance a colour palette using the 60-30-10 rule?
The 60-30-10 rule is the industry standard for balanced web palettes. It distributes colour across three roles to create visual hierarchy without overwhelming the visitor.
- 60% dominant colour. This is typically a neutral or near-neutral background colour. White, off-white, warm grey, or a very light tint of your brand colour all work well. The dominant colour sets the overall tone and gives the eye somewhere to rest.
- 30% secondary colour. This is your primary brand colour. It appears in navigation bars, section backgrounds, headings, and key content blocks. Thirty percent is enough to establish strong brand presence without creating visual fatigue.
- 10% accent colour. This is your highest-contrast, most energetic colour. Reserve it exclusively for call-to-action buttons, links, and critical highlights. Because it appears sparingly, it draws the eye precisely where you want it.
The table below shows how this distribution maps to common website elements.
| Colour role | Percentage | Typical website elements |
|---|---|---|
| Dominant (neutral) | 60% | Page backgrounds, whitespace, card backgrounds |
| Secondary (brand) | 30% | Headers, navigation, section dividers, body icons |
| Accent (action) | 10% | CTA buttons, links, badges, notification indicators |
Accessibility is the second validation layer. WCAG standards require a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text. These ratios ensure legibility for visitors with low vision or colour deficiency. Free tools such as WebAIM Contrast Checker and the browser-based Colour Contrast Analyser let you test any colour pairing against these thresholds in seconds. Avoiding common UI design mistakes at this stage saves costly revisions after launch.
Pro Tip: Test your palette on a mobile screen in direct sunlight and on a monitor set to night mode. Colours that pass contrast checks on a calibrated desktop display can fail completely under real-world conditions. This single test catches more accessibility problems than any automated tool.
For responsive design contexts, also check that your accent colour remains distinguishable when rendered at small sizes on lower-resolution screens.
How do you test and refine your palette before launch?
Testing a colour palette in isolation is one of the most common mistakes small business owners make. Colours look entirely different when placed on a real webpage with real content, real photography, and real typography. Palettes created without context consistently fail to deliver the intended brand impression.
The practical testing process involves four steps:
- Build a homepage mock-up. Apply your palette to a realistic layout including a hero section, navigation bar, a content block, and a call-to-action button. This reveals whether your 60-30-10 distribution actually works at scale.
- Test across devices and lighting. Dark backgrounds behave differently from light ones. Dark grey works better than pure black for most body backgrounds, and accent colours typically need lighter tints when placed on dark surfaces.
- Gather feedback from real people. Show your mock-up to five people who represent your intended customers and ask one question: “What kind of business do you think this is?” Their answers reveal whether your colours communicate your intended personality. User feedback at this stage is the most reliable signal you have.
- Audit for consistency. Check that your palette works across every key page type, including product pages, blog posts, contact forms, and error pages. Inconsistency across page types erodes brand recognition.
Pro Tip: If testers consistently describe your brand as something other than your three personality words, the problem is almost always the dominant colour, not the accent. Swap the 60% background tone first before making any other changes.
Avoid the mistake of finalising a palette based solely on how it looks in a design tool. Design software renders colours differently from web browsers, and web browsers render colours differently across operating systems. Always make your final judgement in a live browser environment. For UI design inspiration during this stage, studying how established brands apply their palettes across multiple page types provides a reliable reference point.
Key takeaways
Choosing brand colours for a website requires defining brand personality first, then applying colour harmony, the 60-30-10 rule, and WCAG contrast standards to build a palette that is both distinctive and accessible.
| Point | Details |
|---|---|
| Start with personality words | Write three words describing desired customer feelings before selecting any colour. |
| Use colour harmony frameworks | Complementary, analogous, triadic, and split-complementary pairings each create distinct moods. |
| Apply the 60-30-10 rule | Distribute colours as 60% neutral background, 30% brand colour, and 10% accent. |
| Meet WCAG contrast ratios | Body text needs a 4.5:1 contrast ratio; large text requires a minimum of 3:1. |
| Test in real contexts | Show mock-ups to real users and ask what kind of business they think it is. |
Why most small businesses get their brand colours wrong
The most common error I see is business owners choosing colours they personally like rather than colours that serve their audience. Personal preference and brand strategy are not the same thing. A founder who loves deep burgundy may be running a children’s education business where that colour signals formality rather than warmth.
The second error is skipping the competitor audit entirely. I have worked with businesses that spent weeks refining a palette, only to discover it was nearly identical to the dominant player in their market. That is not differentiation. That is camouflage. Spending thirty minutes auditing competitor websites before touching a colour wheel saves weeks of rework.
The third error is treating accessibility as optional. WCAG contrast requirements are not a design preference. They are a legal and ethical baseline in the UK under the Equality Act 2010. A palette that fails contrast checks excludes a meaningful portion of your potential customers. Accessibility and good design are not in conflict. The constraint of a 4.5:1 ratio consistently produces cleaner, more legible websites than unconstrained colour choices do.
My honest recommendation is this: if your three personality words are clear, your colour choices will almost always follow logically. The difficulty is not picking colours. The difficulty is doing the brand thinking first. Commit to that step, and the rest of the process becomes significantly more straightforward. You can read more about building brand identity online to strengthen the foundation before you start choosing colours.
— Ian Rickard
How MedwayWebDesign helps you build a colour-led brand online
Selecting the right colour palette is one decision within a much larger web design process. MedwayWebDesign works with small business owners to translate brand personality into complete visual identities, from colour selection through to fully built, accessible websites that perform in search results.
The team at MedwayWebDesign combines user-centred design with market research to ensure every colour and layout decision connects to measurable business outcomes. Whether you are starting from scratch or refining an existing site, the small business web design guide is a practical starting point. For a tailored consultation on your brand colours and website design, contact MedwayWebDesign directly to discuss your specific goals.
FAQ
What is the 60-30-10 rule in web design?
The 60-30-10 rule is the industry standard for distributing colour across a website. It allocates 60% to a neutral background, 30% to the primary brand colour, and 10% to an accent colour used for calls to action.
How many colours should a brand website use?
Most brands use three core colours plus two or three neutrals. Using more than that dilutes brand recognition and creates visual inconsistency across pages.
What contrast ratio do I need for accessible web text?
WCAG standards require a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text. Free tools such as WebAIM Contrast Checker let you test any colour pairing instantly.
How do I know if my brand colours are communicating the right message?
Show a homepage mock-up to five people who represent your intended customers and ask what kind of business they think it is. If their answers match your three personality words, your palette is working.
Should I follow colour psychology rules strictly when choosing colours for branding?
Colour psychology is a useful starting point, not a strict rulebook. Colour meanings shift depending on industry context and cultural background, so your brand personality words should guide the final decision rather than generic colour associations.