A color palette is the short list of colours a website or brand commits to using, and nothing else. Each colour has a role: one for backgrounds, one for body text, an accent for buttons and links, and a few for states like errors or success. Sticking to the list is what makes a site look designed rather than assembled.
How a working website palette is structured
A practical palette for a small-business site usually has:
- Neutrals. A background, a surface colour for cards, a border grey and a dark text colour. These cover most of the screen.
- A primary or brand colour. Often from the logo, used for headers or highlights.
- An accent. The colour reserved for actions such as "Book now", so buttons stand out.
- Feedback colours. Red for errors, green for success, sometimes amber for warnings.
Each colour is recorded as a precise value, usually a hex code or RGB value, and often in light and dark tints. In code, these become CSS variables or Tailwind theme colours so a change in one place updates the whole site.
Building a palette from a green logo
A landscaper's logo is deep green. The palette becomes off-white backgrounds, near-black text, the logo green for headings and the footer, and a warm orange used only on quote buttons. Because orange appears nowhere else, visitors learn instantly where to click. Errors on the quote form show in red, which is kept distinct from the orange.
Ways people pick palettes
Common methods follow the colour wheel: complementary colours sit opposite each other, analogous ones sit side by side. In practice, most good small-business palettes are one or two brand colours plus generous neutrals. Tools like Coolors and Adobe Color help generate options, but always test them on a real page.
When it matters, and the accessibility rule
Your palette must leave text readable. WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A pretty pastel accent with white button text often fails this.
Palette mistakes
- Too many brand colours. Five equal colours compete; nothing stands out.
- Using the accent everywhere. If headings, icons and buttons are all orange, buttons stop looking clickable.
- Relying on colour alone. Pair a red error with a message, since some visitors cannot tell red from green.
- Not writing values down. "Our blue" drifts into six different blues across the site and print.
Related terms
- Hex code: the usual way palette colours are written.
- RGB: the screen colour model behind those codes.
- Brand guidelines: the document a palette belongs in.
- WCAG: the contrast rules a palette must pass.