Warm, cool and neutral
Warm colours (red, orange, yellow) advance and energise; cool colours (blue, green, purple) recede and calm; neutrals (white, grey, black, beige) carry the structure. Most good schemes are neutral-dominant with one warm or cool primary and a single accent. This site is white and navy with an orange accent for exactly that reason.
Colour and brand recognition
The website is the most-seen surface of a brand, so its colours should be the brand's colours, applied with restraint. If the brand palette does not yet exist, choose it with the site in mind; the brand colour guide covers that decision.
The five steps
1. Choose the base colour
The brand primary, or the colour that carries the feeling you want. It will appear in headings, key sections and perhaps the header. Check it against competitors so the site does not blend in.
2. Build tints and shades
From the base, generate a scale of lighter and darker steps (a tool such as Paletton or Tailwind's palette generator helps). Light tints become backgrounds and hover states; dark shades become text and borders. One hue, ten steps, most of the site.
3. Apply the 60-30-10 rule
Roughly 60% neutral background, 30% primary and its tints, 10% accent reserved for actions: buttons, links, highlights. The accent should appear nowhere decorative, so that wherever it appears means "click here".
4. Check contrast
Body text at 4.5:1 or better against its background, large text at 3:1, under WCAG. Test every text and background pairing, including muted text and text on the accent colour. Many brand colours fail as text; use a darker shade for text and the brand colour for surfaces. The colour tools list has the checkers.
5. Let imagery carry the rest
Photos and illustrations add colour of their own. A restrained scheme gives them room; a loud one fights them. If your photography is colourful, pull the interface further toward neutral.
| Role | Example on this site |
|---|---|
| Background | White, off-white sections |
| Primary | Navy (top bar, links) |
| Accent | Orange (buttons only) |
| Text | Near-black, muted grey |
| Highlight | Peach panels |
Common questions
- How many colours should a website use?
- One primary, one accent and a set of neutrals. Semantic colours for success and error states on top. Sites with more hues than that usually look unfinished.
- What is the 60-30-10 rule in web design?
- A proportion guide: about 60% of the visible surface in the dominant neutral, 30% in the primary colour and its tints, 10% in an accent reserved for actions. It keeps the page calm and the calls to action visible.
- Should the button colour be the brand colour?
- Only if it contrasts strongly with the rest of the page and passes text contrast. Often the brand colour becomes the primary and a complementary or warmer colour becomes the accent for buttons.
