How to choose a brand color palette.
A good palette isn't a mood board with twelve swatches. It's a small, deliberate set of colors that work everywhere — here's how to choose yours.
How many colors should a brand palette have?
Most strong brand palettes use one primary color, one accent for calls to action, and a neutral range of a few greys for text and backgrounds. That's usually it. More colors rarely help and often make a site look noisy.
How do you pick a primary color?
Start from meaning, not taste: pick a hue that fits your category and the feeling you want — calm blues read as trustworthy, warm tones read as energetic — then commit to one. The primary color carries the brand; everything else supports it.
How do you build the rest of the palette?
- Neutrals — a near-black for text, a near-white for backgrounds, and 2–3 greys for borders and surfaces.
- One accent — a single, higher-energy color reserved for primary buttons and key links, so the action always stands out.
- Tints & shades — lighter and darker steps of the primary for hovers, backgrounds, and states.
What about accessibility and contrast?
Text needs enough contrast against its background to be readable — aim for a contrast ratio of at least 4.5:1 for body text, the WCAG AA standard. A beautiful palette that fails contrast quietly costs you readers and conversions.
How do you keep the palette consistent across a whole site?
Choosing colors is the easy part; applying them consistently across every button, card, and page — and re-applying when you tweak a shade — is where brands slip. The reliable fix is to treat colors as tokens that every element references, so one change updates everywhere. SketchXFlow generates an editable palette and recolors every asset in seconds when you adjust it, so the whole brand stays in sync.
Frequently asked
How many colors should a website use?
Typically one primary, one accent, and a neutral range of three to four greys. Limiting the palette keeps the design calm and the call-to-action easy to spot.
What is the 60-30-10 rule?
A balance guideline: roughly 60% of the page in a dominant neutral, 30% in a secondary color, and 10% in an accent reserved for actions.
What contrast ratio do I need for text?
At least 4.5:1 for normal body text and 3:1 for large text, per WCAG AA, so it stays readable for most people.