← Go Back

Color Palette

What is a colour palette?

A colour palette is a defined set of colours your product uses consistently for brand, UI, and meaning. It usually includes primary and secondary colours, neutrals (greys, background), and semantic colours (e.g. success, error, warning). When used as design system tokens, the palette ensures consistency and supports accessible colour contrast.

Use it when: you’re defining or evolving UI design, design systems, or brand. A palette reduces ad-hoc colour choices and makes contrast checks manageable.

Copy/paste checklist (minimum palette)

  • [ ] Primary – Main brand/UI colour (e.g. buttons, links). Include light and dark variants if needed.
  • [ ] Neutrals – Background(s), border, and text (e.g. text-primary, text-secondary, background, border). Enough steps for hierarchy and contrast.
  • [ ] Semantic – Success (e.g. green), error (e.g. red), warning (e.g. amber). Use for feedback, not decoration.
  • [ ] Contrast – Every text/background pair you use meets WCAG AA (4.5:1 normal, 3:1 large). See accessible colour contrast.
  • [ ] Documented – Names and hex/HSL; which pairs are approved for text and UI. In design system or tokens.

Why colour palettes matter

  • Consistency – Same colours across screens and products so the experience feels coherent.
  • Brand – Primary and secondary colours reinforce identity.
  • Accessibility – A defined palette lets you check and document accessible colour contrast once, then reuse.
  • Efficiency – Design and code use tokens (e.g. primary-500, text-secondary) instead of random hex values.

What a good colour palette includes

Checklist

  • [ ] Limited set – 1–2 primaries, neutrals (e.g. 5–8 steps), 3–4 semantic; avoid dozens of one-off colours.
  • [ ] Contrast checked – All text/background combinations you allow meet WCAG AA; document approved pairs.
  • [ ] Tokens – Colours exposed as tokens (e.g. color-primary, color-text, color-error) in design system and code.
  • [ ] Semantic use – Error/success/warning used for feedback only; not for decoration.
  • [ ] No colour-only meaning – Important info isn’t conveyed by colour alone (e.g. error = colour + icon or text). See accessibility.

Common formats

  • Primary + secondary + neutrals: Brand colours plus greys for text and background. Use for most products.
  • Semantic: success, error, warning, info. Use for feedback and status.
  • Scale per colour: e.g. primary-100 to primary-900 for tints and shades. Use when you need variants (hover, disabled, etc.).
  • Light/dark: Separate or computed values for dark mode so contrast is maintained.

Examples

Example (the realistic one)

Primary: #0066cc (buttons, links). Neutrals: #111 (text-primary), #666 (text-secondary), #f5f5f5 (background), #e0e0e0 (border). Semantic: #b31d1d (error), #0d8050 (success), #b38600 (warning). You run a contrast checker: #111 and #666 on #fff and #f5f5f5 pass WCAG AA. You document “Body text: text-primary on background; secondary text: text-secondary on background” in the design system. New UI uses only these tokens so contrast stays valid.

Common pitfalls

  • Too many colours: Dozens of swatches with no clear role. → Do this instead: Keep a small set; add only when you have a defined use and contrast check.
  • No contrast check: Palette looks good but text fails WCAG. → Do this instead: Check every text/background pair; document approved combinations.
  • Colour-only meaning: “Red = error” with no icon or text. → Do this instead: Use semantic colour plus icon or label so it’s accessible.
  • No tokens: Colours are hardcoded in design and code; they drift. → Do this instead: Define tokens and use them in design system and code.
  • Semantic colours overused: Everything is green or red. → Do this instead: Reserve semantic colours for feedback and status; use neutrals and primary for layout and actions.
  • Palette vs design system: Design system includes the palette as tokens plus components and guidelines; the palette is the colour subset.
  • Palette vs contrast: Contrast and accessible colour contrast are requirements you satisfy by choosing and documenting palette pairs.
  • Palette vs typography: Typography uses palette colours for text; ensure text colours are in the palette and contrast-checked.

Next step

Write down your current primary, neutral, and semantic colours. Run a contrast check on every text/background pair you use; fix or document any that fail WCAG AA. Add the palette as tokens to your design system (or a one-page doc) and reference it in design standards.

Related Terms