Pick a starting color. Get a complete 5-color brand palette with WCAG accessibility scores, CSS variables, and a Tailwind config, ready to use.
Your primary color defines the emotional register of your brand. Everything else, neutrals, accents, backgrounds, derived to support it.
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% dominant (backgrounds/neutrals), 30% secondary, 10% accent. This ratio creates visual hierarchy without overwhelming the viewer.
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.
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.
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.
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.
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.