How to choose a website color scheme that matches your brand

A common starting point goes like this: the logo is red and gold, so the website becomes red and gold everywhere. Red headings, gold buttons, red footer, gold borders. It matches the brand, technically, yet the result is tiring to read and nothing stands out. Choosing a website color scheme is less about finding pretty colours and more about giving a few colours clear jobs. This guide shows how to turn brand colours into a working palette and check it against real content.

Begin with the colours you already own

Most businesses have some colour identity already: a logo, a shop signboard, uniforms, packaging or delivery vehicles. Customers recognise these, so the website should connect with them rather than invent something new.

Collect the exact values first. Ask whoever designed your logo for the brand colour codes in HEX (for screens) and, if available, CMYK or Pantone (for print). If nobody has them, open the original logo file in a design tool and use the colour picker. Avoid sampling colours from a compressed JPEG or a WhatsApp image, as compression can shift shades slightly.

You will often end up with one or two strong colours. That is fine. A usable website palette needs more than brand colours alone, and the next step fills the gaps.

Give each colour a role

A working palette is built from roles rather than favourites. Three roles cover almost every small business site.

Primary colour

This is your main brand colour. Use it for the header or key section backgrounds, headings in moderation, and elements that should feel “on brand”. It sets the overall mood.

Accent colour

The accent is reserved for things you want people to act on: primary buttons, important links, highlights on key numbers. It should contrast clearly with the primary colour. If your brand is deep blue, a warm orange or yellow accent will pull the eye to calls to action. The rule to protect: if the accent appears everywhere, it stops working as a signal.

Neutral colours

Neutrals do most of the work, even though nobody notices them. You need a background (white or a very light tint), a dark text colour (near-black or dark grey rather than pure black is often easier on the eyes), a mid grey for secondary text, and a light grey for borders and dividers. Many brands add a very pale tint of the primary colour as an alternate section background.

Some sites also need status colours: green for success, red for errors, amber for warnings. Pick versions that do not clash with your primary and accent choices.

Balance the palette with the 60-30-10 rule

The 60-30-10 rule is borrowed from interior design and is a helpful starting point rather than a law. Roughly:

• 60% of the visible page uses the dominant colour, usually your neutral background.
• 30% uses a secondary colour, often the primary brand colour in headers, section bands and cards.
• 10% uses the accent, on buttons, links and highlights.

The owner with the red and gold logo from the opening might end up with a white and light-grey page (60%), deep red in the header, footer and one feature band (30%), and gold only on buttons and key icons (10%). Same brand, far more readable.

Filling gaps when your brand has one colour

If your identity is built on a single colour, create variations rather than bringing in unrelated hues. Tints (mixed with white) work for backgrounds, and shades (mixed with black) work for hover states and dark sections. For the accent, look at colours roughly opposite on the colour wheel, or choose a strong neutral like charcoal paired with a bright brand colour for buttons.

Free palette tools can generate harmonious options from a starting HEX code. Treat their output as suggestions and test them, because a palette that looks balanced as five swatches may behave differently on a busy page.

Check contrast before you commit

Colour choices must pass basic readability. The WCAG 2 AA guideline asks for a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (around 24px regular or about 19px bold) and for important interface elements like button borders and form field outlines.

Brand colours often fail when used as text. Light yellow, bright orange and pale green are common culprits. The fix is usually to keep the bright colour for backgrounds and shapes, and use a darker shade of it, or plain dark grey, for text. Free contrast checkers and the Accessibility section of Lighthouse will flag failing combinations.

Test the website color scheme on real content

Swatches can mislead. Before approving a palette, apply it to real pages with real text, photos and buttons. Follow these steps:

1. Build one mock-up of your homepage and one of a service or product page using the palette.
2. Use your actual photos. Warm-toned product images may clash with a cool palette, or blend into a similar one.
3. Check that the primary button is the first thing your eye lands on in each section.
4. View the pages on a mid-range Android phone outdoors in daylight. Low-contrast choices become obvious quickly.
5. Look at the pages in greyscale (many screenshot tools and design apps can do this). If you cannot tell headings, buttons and body text apart, contrast is too weak.
6. Ask two or three customers or staff which element they would click first.

Write the palette down and move to build

Once tested, record every colour with its HEX code and its role, including hover and disabled variants for buttons. A one-page palette sheet saves endless small decisions later and keeps designers, developers and whoever makes social posts working from the same values.

If you are planning a new site or refresh and want a palette built around your existing brand, our website design and development team can take care of it as part of the project, or you can explore our recent work to see how different brands have been translated to the web.

Frequently asked questions

How many colours should a website have?

Most business websites work well with one primary colour, one accent, and three or four neutrals, plus status colours if you have forms or an online store. Adding more tends to weaken the visual signal of each.

Does colour psychology matter when choosing brand colours?

Associations exist, such as blue often feeling calm or dependable, but they vary by culture and context. Clarity, contrast and consistency with your existing brand matter far more than picking a colour for its supposed emotional effect.

Should my website use the exact same colours as my logo?

Use the logo colours as the base, but adjust shades where needed for readability. A slightly darker version of a brand colour for text is normal and still reads as on-brand.

Can I use a dark background for a business website?

Yes, especially for brands in entertainment, technology or luxury. Keep body text light and large enough, check contrast carefully, and avoid long paragraphs of light text on dark backgrounds where possible.