Brand Color Palette Generator
Pick a starting color. Get a complete 5-color brand palette with WCAG accessibility scores, CSS variables, and a Tailwind config, ready to use.
How to build a brand color system
Start with one brand color
Your primary color defines the emotional register of your brand. Everything else, neutrals, accents, backgrounds, derived to support it.
Accessibility is non-negotiable
WCAG AA requires a 4.5:1 contrast ratio for body text. Brands that ignore this face legal risk and alienate ~8% of users who are colour blind.
60 / 30 / 10 rule
60% dominant (backgrounds/neutrals), 30% secondary, 10% accent. This ratio creates visual hierarchy without overwhelming the viewer.
Always test dark mode
A palette that looks great in light mode often breaks in dark mode. Colors that work on white backgrounds frequently become harsh or invisible on dark backgrounds.
Frequently Asked Questions
How many brand colors should I have?expand_more
3 to 5 is the sweet spot. Primary (your brand color), secondary (for variety), accent (for CTAs and highlights), and 2 neutrals (light and dark backgrounds). More than that creates visual noise.
What's the difference between AA and AAA accessibility?expand_more
WCAG AA (4.5:1 ratio) is the legal standard in most countries. AAA (7:1 ratio) is the enhanced standard for the highest legibility. Aim for AA as minimum on all body text, and AAA for important content like headings.
Should my palette include black and white?expand_more
Almost never true black (#000000) or white (#FFFFFF). Pure black creates too much contrast harshness. Use near-black (#141414) and near-white (#F8F8F8) for a softer, more refined feel.
Colors chosen. Brand ready to build?
A color palette is the start of a brand system. Typography, spacing, components, and motion all need to align. That's where a designer-developer partnership makes the difference.