Colour palette

A palette is more than a list of brand colours. A usable web palette assigns jobs: which colour is for body text, which for backgrounds, which signals the main action, and which mean success, warning and error. Without those roles, colours get used at random and a site slowly loses consistency.

Colours chosen for a logo are often too bright or too pale for text and buttons. A web palette usually extends them with darker and lighter shades, recorded in the brand guidelines, so the brand stays recognisable while text stays readable.

How it works

Each colour is defined precisely, usually as a hex code such as #1A5F7A for screens, with print equivalents where needed. A typical web palette has one or two primary brand colours, an accent for actions, a range of neutrals from near-white to near-black, and functional colours for states. In code these become named values, often managed as design tokens, so a change in one place updates the whole site.

A common rule of thumb lets neutrals carry most of the page, a primary colour a smaller share and an accent only a little, often summarised as 60-30-10. It is a guideline, not a law, but it keeps the accent meaningful.

Before a palette is approved, every intended pairing is tested: body text on each background, button text on each button colour, links against surrounding text. Pairings that fail are either darkened or restricted, for example a bright accent allowed for large shapes and icons but never for small text. Functional colours also need a second signal, such as an icon or a word, so that people with colour vision deficiency, who may not tell red from green, still understand the message.

Example

A landscaping firm's logo is a bright lime green. Used for headings, links and buttons, it is hard to read on white and makes the site look loud. The new palette keeps the lime for small highlights, adds a deep forest green for headings and buttons, sets body text in a dark grey and uses warm off-white backgrounds. Every text and button pairing is checked for contrast before it is approved.

The palette is written up as a short table: each colour's hex code, its role and the pairings it may be used in. Lime is listed as decoration only, never for text, while forest green is approved for buttons with white text. When the firm later orders printed vans and flyers, the printer receives print equivalents of the same colours, so the green on the van matches the green on the website as closely as the materials allow.

Why it matters for your business

A consistent palette makes your business recognisable across the website, social posts, vans and invoices, and it saves time because nobody has to choose colours again for each new page or flyer. Getting it wrong has a cost: colours that fail colour contrast checks make text hard to read and can breach accessibility requirements. A palette may also need to work in dark mode and in print, so it is worth defining properly once.

Common mistakes

• Choosing colours by eye on one screen without checking contrast ratios.
• Using the brand's brightest colour for body text or small links.
• Relying on colour alone to show meaning, such as red for an error with no text or icon.
• Letting new shades creep in page by page instead of adding them to the defined palette.

Questions people ask

How many colours should a website palette have?

Most sites work well with one or two brand colours, one accent for actions, a range of neutral greys and a few functional colours for success, warning and error. That can mean ten or more defined values once shades are counted, but only a handful should be noticeable on any one page.

What is the 60-30-10 rule?

It is a rule of thumb from interior and graphic design: a dominant colour covers roughly 60 percent of a space, a secondary colour about 30 percent and an accent about 10 percent. On websites the dominant colour is usually a neutral background. It is a starting point for balance, not a requirement.

How do I choose colours for my brand?

Start from what the business needs to signal and who its customers are, then look at competitors so you do not blend in. Choose one or two core colours, build lighter and darker shades around them, and test every text and button pairing for contrast. Claims from colour psychology are often overstated, so judge colours with real content.