How to choose brand colours for a website - Zephyra Studio

A website palette is made of three to five colours: one primary, one or two secondary, one accent, and neutral shades for text and backgrounds. Instead of hunting for the perfect hue, decide first what impression the brand should leave, because a colour means nothing on its own without the context it appears in. The second rule is legibility: text and background need enough contrast, and that is not an aesthetic preference but the condition for text to be readable by everyone, including people with weaker eyesight. The third is consistency, meaning the same colours in the logo, on the site, in e-mail and on the invoice. This article covers choosing, distributing and testing a palette, rather than listing colour meanings that do not hold up in practice.

What one palette needs to contain

The primary colour carries recognition and is used for the most important elements: the button that leads to an enquiry, the headline on the home page, the icon in the browser tab. It appears most often, so it is the most visible and the hardest to change later.

Secondary colours separate sections, distinguish store categories and colour the charts in reports. Their job is to carry meaning rather than decoration, so they should not be sprinkled at random across pages.

Neutral shades are in fact most of the site: background, text, borders and input fields. Three or four are enough, for example a near-white background, two greys for text and borders, and a dark tone for headings. Without them every palette looks loud and untidy.

Status colours are a separate group, for confirmation and for error. They must never rely on hue alone, because some people cannot tell red from green, so a text label or an icon has to accompany them.

How to choose the primary colour

The most useful starting point is not a palette found online but an answer to how the brand should be perceived against its competitors. If everyone in the field uses the same blue, the same blue does not set you apart, and a different shade may be all the difference needed.

If a logo already exists, the colour is drawn from it, because that is the cheapest route and avoids reprinting existing material. If the brand is new, start from the photography and materials the company actually uses, since a palette that exists in reality is more convincing than one picked on a screen.

The chosen shade is then tested in context rather than in a colour wheel. That means looking at it on a phone, on a light and a dark background, and together with the typeface that will really be used. A shade that looks good in a palette often loses its character on a small button.

Contrast and legibility

Contrast is measured as the ratio between text colour and background colour. For ordinary text the recommended ratio is at least four and a half to one, and for large headings and interface elements three to one. These values come from accessibility guidelines and are checked with free tools in seconds.

A practical rule is to avoid pure black on pure white. The combination is tiring over long reading, and dark grey on near white is enough, which is what most sites use.

The check does not cover only the main text. Links have to differ from ordinary text, buttons have to stay legible in every state, and input fields need a visible border. That is why a palette is also reviewed in greyscale, because the grey scale exposes the places where contrast is too weak.

• A ratio of four and a half to one for text, three to one for large headings and interface elements
• Never carry a meaning by colour alone, always with a text label or an icon
• Review in greyscale, because it shows contrast without the comfort of hue
• Review with a colour blindness simulator, especially where red and green meet
• Input fields and borders must be visible in both light and dark presentation

How many colours, and where

The distribution that has worked best in practice is sixty, thirty, ten. Neutral shades cover about sixty per cent of the surface, the primary colour thirty, and the accent ten. If the primary colour is everywhere, no button stands out.

The accent colour is used sparingly and it is the one colour allowed to be loud: the enquiry button, the phone number, one highlight in a heading. When the same colour appears in five places, the eye has nowhere to go.

If the site has a dark mode, the palette is not simply inverted but built separately. Neutrals are swapped, and the primary colour often has to be lighter, because a dark tone on a dark background loses contrast.

In print the shade shifts, so the logo and core material use the recommended print value, while the screen version uses the screen value. Both are stored in one place, in a document everyone producing brand material can reach.

How to test the choice before it is locked in

The first test is on someone else's device. Open a page using the palette on a cheap phone, outdoors, because a screen in sunlight reveals differences that an office monitor hides. If text on that screen is hard to read, the contrast is not sufficient, even if the measurement says it passes.

The second test is with people. Show the palette to five people from the target group and ask what they notice first and what the colour reminds them of. Their answers are not the decision, but they reveal associations you cannot see yourself.

The third test is in use, not in a logo. Apply the colour to a real page with a heading, body text, a button and a form, then look at it as a whole. If it still changes afterwards, the change is far cheaper when the colour is defined in one place in the code as a value that gets swapped, rather than copied by hand in twenty places.

Our logo design and branding service covers choosing the palette together with the typography, and the accessibility rules are covered more widely in our article on website accessibility, where contrast and text sizes are treated as one system rather than a single decision.

Source

Key takeaways

• A palette has one primary colour, one or two secondary, one accent and a few neutral shades.
• The primary colour is chosen from the brand's positioning and its difference from competitors, not from momentary inspiration.
• Contrast is a condition, not a matter of taste: at least four and a half to one for text.
• A sixty, thirty, ten distribution stops every element from competing for attention.
• Test the palette on a real page, on a cheap phone, and with people from the target group.

Conclusion

Colours are easiest to choose once the decision is reduced to three questions: what the brand should express, how it differs from competitors, and whether the text is readable for everyone. If the shade still changes after launch, the change is cheap when the palette is defined in one place and expensive when the colour has been copied by hand across pages. If you are rebranding or just starting, we build the logo together with the palette and the basic usage rules, so the colour does not change with every later edit to the site.