Definition
A colour palette is the documented set of colours assigned to roles within a brand or product system — primary, secondary, accent, neutral, and semantic (success, warning, danger, info) — including accessible variants for every interactive state.
A colour palette is small, deliberate, and role-based. "Primary" is the colour used for hero brand expression and primary actions. "Secondary" supports it. "Accent" highlights one or two things on a page. "Neutral" carries text and backgrounds. "Semantic" colours communicate state (green = success, red = error). Anything outside those roles is noise.
Accessibility is non-negotiable. Every colour pair used for text must meet WCAG AA contrast (4.5:1 for body, 3:1 for large text and UI). Palette design that ignores contrast produces beautiful swatches and unreadable products. Test every pairing against every background it'll appear on, in light mode and (if supported) dark mode.
Origin
Modern colour theory descends from Newton's prism experiments (1672) and Goethe's Theory of Colours (1810). Pantone's PMS system (1963) made colour reproducible across print runs. Web-safe colour standards (early 1990s) and now WCAG contrast standards complete the digital version.
How it works
- Anchor on the brand's primary colour — the one most strongly tied to recognition.
- Build a tonal scale (50, 100, 200, …, 900) for primary and neutrals — gives flexibility without inventing new colours.
- Add a secondary, an accent, and semantic colours (success, warning, danger, info).
- Test every pairing against WCAG AA — adjust shades until contrast passes.
- Document each role with usage examples and "don't" examples.
- Ship as design tokens (CSS custom properties + Figma styles) so designers and engineers reference the same source.
When to use it
Use when
- Every brand needs one. The question is how systematic.
- When existing colour usage is inconsistent across surfaces.
- When introducing dark mode — palettes built only for light mode rarely translate cleanly.
Skip when
- As a moodboard. Pretty swatches that don't pass contrast aren't a palette.
Key metrics
- WCAG AA pass rate across all text/background pairings.
- Number of distinct colours actually used in production.
- Token adoption — % of UI built from the system vs. inline hex values.
Examples
- The colour palette includes accessible variants for every interaction state.
- A focused palette beats a kaleidoscope — fewer choices = more recognition.
- Three primary colours, six neutrals, four semantic — every page on the site comes from those 13.
In practice at Makreate
Makreate palettes are designed accessibility-first — every pairing is tested for WCAG contrast before it ships. On a recent retail engagement the existing palette had a brand red that failed contrast against white — we shifted the red 8% darker, adjusted the tonal scale, and the brand still felt the same while every CTA passed AA. Conversion on the homepage CTA went up 11% as a side effect of the contrast fix.
Branding →Common mistakes
- Picking colours from a moodboard without testing them on real UI.
- Skipping accessibility — beautiful palettes can be unreadable.
- Too many colours. A focused palette beats a kaleidoscope.
- No tonal scale — inventing shades on the fly leads to inconsistency.
- Using brand red as both primary CTA and error state — semantic ambiguity.
Frequently asked
How many colours in a palette?
Most production palettes have 1 primary, 1 secondary, 1 accent, 4–6 neutrals, and 4 semantic colours — about 11–13 total roles. Each role then has tonal variants for state and accessibility.
How do I pick a primary colour?
Start from the brand strategy (energy, trust, calm, etc.) and check competitor palettes — distinctiveness in your category matters more than universal preference.
Dark mode palette: how?
Don't just invert. Dark mode usually wants slightly desaturated primaries, lifted blacks (not pure #000), and adjusted contrast — design it as a parallel system, not a flip.