Brand palette builder
A complete five-colour system — primary, secondary, accent, light and dark — with accessibility checks built in. Press space to shuffle, lock what you love.
Tip: the URL updates with your palette — bookmark or share it.
Contrast check (WCAG 2.2)
AA requires 4.5:1 for normal text and 3:1 for large text (24px+, or 19px+ bold).
How to build a brand palette that works
Most brand palettes fail for one of two reasons: too many equal-weight colours, or colours that look great as swatches but can’t carry readable text. A working palette has roles, not just colours.
- Primary — the colour people should associate with you. It appears on your logo, key buttons and hero moments.
- Secondary — a supporting tone for backgrounds, illustrations and charts.
- Accent — used sparingly to draw the eye: badges, highlights, sale labels.
- Light — your page background. Rarely pure white; a slightly warm or cool off-white feels intentional.
- Dark — your text colour. Rarely pure black; a deep tinted neutral is softer and more on-brand.
The 60-30-10 rule
Roughly 60% neutral (light/dark), 30% primary or secondary, 10% accent. It keeps layouts calm and makes the accent do its job.
Accessibility is not optional
About one in twelve men has some form of colour-vision deficiency, and low-contrast text is harder for everyone on a phone in sunlight. The contrast table above tells you which pairings are safe for body copy. If your primary fails against your light colour, use it for shapes and buttons with dark text, not for paragraphs.
Go deeper in Brand colour psychology, then set your type in the font pairing tool.