Brand Palette Generator
Token-ready color systems from one color.
Enter a brand color and get a full, accessible scale — checked against WCAG contrast — ready to drop into your stack as CSS, Tailwind, or JSON.
50
#edf2ff
100
#dbe5ff
200
#b7cbff
300
#8aaaff
400
#5482ff
500
#1e5bff
600
#194cd6
700
#143ead
800
#102f85
900
#0b215c
950
#07163d
“AA” = passes WCAG AA (4.5:1) as text on white · “AA·lg” = passes for large text (3:1).
:root {
--brand-50: #edf2ff;
--brand-100: #dbe5ff;
--brand-200: #b7cbff;
--brand-300: #8aaaff;
--brand-400: #5482ff;
--brand-500: #1e5bff;
--brand-600: #194cd6;
--brand-700: #143ead;
--brand-800: #102f85;
--brand-900: #0b215c;
--brand-950: #07163d;
}How it works
How to build an accessible color scale
One hex in, a full design-token scale out — contrast-checked and export-ready.
Enter your brand color
Type or paste any hex value — your primary brand color, an accent, or a color you're auditing. The scale builds from it instantly.
Check contrast as you go
Every step is graded against WCAG AA and AAA so you know which tints are safe for text, which work as backgrounds, and which to avoid.
Export tokens for your stack
Copy the scale as CSS custom properties, a Tailwind color config, or JSON design tokens — ready to drop straight into your codebase.
Color systems & accessibility, answered
What is a tint and shade scale?
A tint and shade scale is a ladder of related colors built from one base — lighter versions (tints, mixed toward white) and darker versions (shades, mixed toward black). Design systems use a numbered scale (often 50 through 900) so designers and developers can reference a precise step like 'primary-600' instead of guessing hex values, which keeps a product visually consistent.
Why does color contrast matter for accessibility?
Contrast determines whether people can actually read your text — including users with low vision, color-blindness, or anyone on a glary screen outdoors. The WCAG guidelines set minimum contrast ratios: 4.5:1 for normal body text (AA) and 7:1 for the stricter AAA level. Failing contrast isn't just an accessibility problem; it hurts conversion and can carry legal risk. This tool checks every step so you don't ship unreadable combinations.
What do WCAG AA and AAA mean?
AA and AAA are conformance levels in the Web Content Accessibility Guidelines. AA (4.5:1 for normal text, 3:1 for large text) is the standard most organizations target and many regulations reference. AAA (7:1 for normal text) is the enhanced level for higher-stakes contexts. The generator labels each tint/shade pairing so you can pick combinations that clear the bar you need.
How do I use the exported colors in CSS or Tailwind?
Copy the CSS export to get a set of custom properties (e.g. --brand-500) you can reference anywhere with var(). Copy the Tailwind export to paste a color object into your theme so you get utility classes like bg-brand-600 and text-brand-100. The JSON export gives platform-agnostic design tokens for tools like Style Dictionary or Figma plugins.
What makes a good brand color palette?
A strong palette starts from one confident primary, derives a full neutral-aware scale from it, and reserves accent colors for emphasis rather than decoration. Every text-on-background pairing should pass contrast, the scale should have enough steps to handle hover, active, and disabled states, and the darkest and lightest ends should still feel like the same hue. Generating the scale from a single source keeps all of that coherent.
Is the brand palette generator free?
Yes — it runs entirely in your browser, there's no signup, and nothing you enter is sent to a server. Generate, contrast-check, and export as many palettes as you want.