Accessible palette generator
Turn one brand color into full 50 to 950 scales with contrast labels. Export CSS, Tailwind or tokens.
Neutral, success, warning and danger scales are generated to match. Numbers on each swatch show the best text contrast; AA means it passes for normal text.
Suggested usage
Why generate a full scale?
A single brand color can't cover buttons, hover states, tinted backgrounds, borders and text. A 50 to 950 scale gives every one of those a consistent, predictable option, and naming steps the same way across colors makes design tokens easy to use in code.
Use lighter steps (50 to 200) for backgrounds, middle steps for borders and icons, and 600 or darker for text and buttons with white labels. Always confirm the pairs you actually use with the contrast checker.
Learn more
Want experts to fix it for you?
Bad Design designs and builds B2B websites that turn visitors into leads.