Using brand colours on a website: screen values, contrast, tints and the action colour
Using brand colours on a website is rarely a matter of pasting in the hex codes from the guidelines. Print colours shift on screen, many brand colours fail contrast as text or behind white labels, and a palette of five equal colours has no hierarchy. The job is to pick one colour for actions, adjust it until it passes, and turn the rest into quiet tints.
From print values to screen values
Brand guidelines often list a Pantone reference, a CMYK mix, an RGB value and a hex code. They aren't always consistent with each other, because printed ink and screen light have different ranges: some vivid screen colours can't be printed, and some print colours, especially spot colours, can't be shown exactly on screen. For the web, start from the guideline's hex or sRGB value if one is given. If only CMYK or Pantone exists, use the publisher's own conversion, then check it on several real screens next to a printed sample. Adjust by eye; the aim is that it reads as the same brand, not that it measures the same.
Contrast decides how each colour can be used
| Brand colour against white | Can be used for | Shouldn't be used for |
|---|---|---|
| 4.5:1 or more (deep navy, forest green, brick red) | Body links, button fills with white labels, headings | Large background areas, where it can feel heavy |
| 3:1 to 4.5:1 (mid blues, teals, oranges) | Large headings, icons, button borders and large text | Normal-size text, or white labels on a filled button |
| Under 3:1 (yellow, light green, pastel pink) | Backgrounds behind dark text, illustrations, decorative bands | Text, icons that carry meaning, or anything that must be seen to be used |
The ratios come from WCAG 2.2 level AA: 4.5:1 for normal text, 3:1 for large text and for the visible parts of controls. A bright yellow brand doesn't have to disappear from the site. It can fill a band behind black text, which can reach a very high ratio, while a darker version of the same yellow, or a neutral, handles text and links.
Choosing the action colour
- List the brand colours and check each against the site's background.
- Pick the one most associated with the brand that can also pass 4.5:1 with a white or dark label. If none passes, darken the closest one until it does, and record the new value as the web version.
- Use it only for actions: primary buttons, key links and the focus outline. That's what visitors will learn to click.
- Give secondary brand colours non-action roles: an illustration, a section band, a badge. If they look clickable, people will try.
- Write the decision down in the site's style guide, with the exact screen values, so the next page doesn't drift.
Tints and shades for surfaces
Most of a page should be neutral, but neutrals can carry the brand subtly. Mix a little of the brand colour into the background or surface colour, such as a very pale blue-grey for a navy brand or a warm cream for a red one, so the whole page feels related without using the brand colour itself at full strength. CSS color-mix() makes this easy to express, for example mixing 6% of the brand colour into white for a card surface. Check that muted text still passes against each tinted surface. For more on building palettes this way, see semantic colour tokens.
Dark themes need their own values
A brand colour chosen for a white page often fails on a dark one. A deep navy that passed easily on white has almost no contrast on charcoal. Each brand colour needs a separate dark-theme value, usually lighter and slightly less saturated. Dark mode colour palette covers the adjustment.
Common mistakes
- Using every brand colour equally, so the page has no hierarchy.
- Putting white text on a light brand colour because that's how the logo looks.
- Using the brand colour for headings, icons, borders and buttons, so nothing stands out.
- Relying on colour alone to show errors or selected states, which fails WCAG 1.4.1.
- Treating the guideline hex as fixed even when it fails contrast. Guidelines can usually grant a web variant.
Brand colours in Anticode
Anticode gives each site one action colour, from eight values: red, orange, gold, green, teal, blue, pink and black. Each has a light-theme and a dark-theme version, and the light-theme versions all reach at least about 5.4:1 against white, so they can carry white button labels. Pick the one closest to the brand in the visual editor. If the brand needs its exact value, the code editor in Pro mode lets you tune the colour tokens in the page's :root, including the action colour, the ground and the surface, and those edits map back to the project.
Questions people ask
What if my brand colour fails contrast?
Use it where contrast doesn't matter, such as backgrounds behind dark text or illustrations, and create a darker web variant for text, links and buttons.
Should a website use all the brand colours?
Not equally. One colour for actions, neutrals for most of the page, and secondary brand colours in small, non-clickable roles keeps the hierarchy clear.
Is it acceptable to change a brand colour for the web?
Usually, yes. Many brand guidelines already include a screen variant; if yours doesn't, a slightly adjusted value that passes contrast is better than one that fails.