Color System Generator
Input a brand color — instantly generate a full design token system with shades, CSS variables, Tailwind config, and accessibility scores.
Generated Palette
Semantic Colors
Contrast Checker
Frequently Asked Questions
How are the shades generated?
We use HSL color manipulation. Lighter shades reduce saturation and increase lightness, while darker shades increase saturation and decrease lightness, creating a natural-looking palette.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
How do I use the Tailwind config?
Copy the generated config and paste it into the `extend.colors` section of your `tailwind.config.js`. Your brand color will be available as utility classes like `bg-brand-500`.
Is the dark mode palette automatic?
Yes! We automatically generate a dark mode palette by inverting the lightness curve. You can preview how your colors look on dark backgrounds with the Dark Mode toggle.
Need More Developer Tools?
From Stripe fee calculators to cron builders — explore our full suite of free developer tools.