How to Choose a Website Colour Scheme (Step-by-Step Guide)

Your website's colour scheme shapes how visitors feel before they read a single word. Research by the Institute for Color Research suggests that people make a subconscious judgement about a product within 90 seconds of initial viewing, and up to 90% of that assessment is based on colour alone. Choosing the right palette is one of the highest-leverage decisions in web design.

This guide walks you through a practical, repeatable process — whether you're building your first site or refreshing an existing brand.

Step 1: Define Your Brand Personality

Before you open a colour picker, write down three to five adjectives that describe how you want your brand to feel. Examples:

• Trustworthy, calm, professional → blues, navy, clean whites
• Energetic, bold, youthful → orange, red, saturated hues
• Natural, organic, earthy → greens, terracotta, warm neutrals
• Luxurious, minimal, premium → black, gold, deep purple

These words become your filter. When you're deciding between two colours later, ask which one better matches your three adjectives.

Step 2: Understand the 60-30-10 Rule

The most reliable framework for colour allocation in web design is 60-30-10:

• 60% — Dominant colour (backgrounds, large surfaces)
• 30% — Secondary colour (headers, navigation, large text blocks)
• 10% — Accent colour (CTAs, links, highlights, icons)

This ratio prevents visual chaos. If you use your accent colour everywhere, it stops being an accent — it's just noise. Reserve it for the actions you most want users to take.

Step 3: Choose Your Primary (Accent) Colour

This is the colour that appears on your main CTA buttons, links, and brand highlights. It should:

• Reflect your brand personality (see Step 1)
• Stand out against your background at WCAG AA contrast (4.5:1 ratio minimum)
• Be distinctive in your industry — not generic

Start with a hue you're drawn to, then use a tool like our Brand Colour Palette Generator to generate a full system of tints and shades from it.

Step 4: Build Your Supporting Palette

A complete web colour palette needs more than one hero colour. You typically need:

• Background colour — usually pure white or a very light tint of your brand hue
• Surface colour — for cards, panels, and components (slightly different from background)
• Text colour — very dark (not pure black — try #111 or #1a1a1a)
• Muted text — for captions, labels, secondary content
• Border colour — subtle lines to separate sections
• Semantic colours — green for success, red for errors, amber for warnings

Step 5: Check Contrast for Accessibility

WCAG 2.1 accessibility guidelines require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). This isn't just about compliance — it directly improves readability for all users.

Always check:

• Text colour on your background colour
• Button text on your button background colour
• Link colour against the surrounding text and the page background

Use our Contrast Checker to verify any colour pair before committing.

Step 6: Test in Context

Colours look different on screens. A swatch that looks perfect in your design tool may appear too bright on a high-saturation display or too muddy on a low-contrast screen. Tips for real-world testing:

• View your palette on multiple devices (laptop, phone, tablet)
• Check it in both light and dark rooms
• Show it to someone who is colour-blind (or use a colour-blind simulation tool)
• Print it if your brand appears in printed materials

Step 7: Lock It Down as CSS Variables

Once you're happy with your palette, encode it as CSS custom properties at the root of your stylesheet. This creates a single source of truth and makes future updates instant:

Common Mistakes to Avoid

• Too many colours. More than 4–5 distinct colours creates visual noise. Fewer is almost always better.
• Low-contrast text. Light grey text on a white background fails accessibility and frustrates users.
• Ignoring industry context. Bold red works for a food brand; it signals danger in a healthcare context.
• Choosing colours you like, not colours your audience responds to. Brand research and competitor analysis should inform your palette — not personal preference alone.

Choosing a colour scheme is an iterative process. Don't expect to get it perfect on the first try. Generate a few options, test them with real users, and refine. The tools on this site are built to make that iteration fast.