How to build a brand colour palette for your website (that passes contrast checks)
Choose brand colours that work on a real website: four roles, a full shade scale for each, WCAG contrast that passes, and tokens your developers can use.
A logo needs one or two colours. A website needs a system: colours for buttons, links, backgrounds, borders, hover states and alerts, in both light and dark mode, all readable. Here's how to build a palette that holds up on a real site.
Give every colour a role
Start with four roles rather than a list of favourite colours:
- Primary: your signature colour, used for the main action (buttons, links).
- Secondary: supports the primary: cards, highlights, quieter sections.
- Accent: a spark for small moments that need attention: badges, "new", sale.
- Neutral: backgrounds, body text and borders. Most of the page.
As a rough guide, aim for about 60% neutral, 30% secondary, 7% primary and 3% accent. The primary works because it's rare; if every element is the brand colour, nothing stands out.
Turn each colour into a full scale
One hex code per role isn't enough. You need lighter shades for backgrounds and hover states and darker ones for text and pressed states. The common approach is an 11-step scale from 50 (almost white) to 950 (almost black), with your brand colour sitting on the step that matches its lightness.
Build the scale in a perceptual colour space such as OKLCH rather than by mixing with white and black. The steps then look evenly spaced to the eye, and the colour doesn't turn grey or muddy at the ends.
Check contrast, using real numbers
The Web Content Accessibility Guidelines (WCAG 2.2) set the rules most sites follow. At level AA:
- Normal text needs a contrast ratio of at least 4.5:1 against its background.
- Large text (roughly 24px regular or 19px bold and above) needs 3:1.
- Interface parts and meaningful graphics, like input borders and icons, need 3:1.
The classic mistake is using the brand colour itself for link text on white. Many bright brand colours fail 4.5:1. The fix isn't a new brand colour; it's using a darker step of the same scale for text, and keeping the bright one for fills.
Pick your backgrounds deliberately
Pure white isn't the only option. A slightly warm or cool off-white (often the 50 step of your neutral) feels more designed and is easier on the eyes. For dark mode, a very dark neutral usually looks better than pure black. Whichever you choose, recheck your text colours against it. Contrast depends on both colours.
Hand it over as tokens
Developers shouldn't have to copy hex codes out of a PDF. Export the palette as design tokens: CSS custom properties, a Tailwind theme or a JSON token file. Name them by role and step, like --primary-700, so the code stays readable when the brand colour changes.
Common mistakes
- Pure grey neutrals next to a warm brand colour. Tint the neutrals slightly towards the brand.
- Three accent colours. One is plenty.
- Checking contrast only in light mode.
- Colour as the only signal. Errors also need an icon or text, not just red.
Try it on your own brand
The free DevTrust brand colour kit does all of this in the browser. Start from colours that are popular in current website builds, get every shade with its code, run the contrast checks, preview it on a mock website in light and dark, and export CSS, Tailwind or JSON. No sign-up. For the full system (logo, voice, type and components), see brand guidelines your team will actually use.