Loading...
Type any color. Get a Tailwind palette, CSS variables, and a downloadable template.
50,000+ color systems generated · 15,000+ templates downloaded
Click any theme to instantly generate a complete color system
Calm and professional
Natural and grounded
Warm and inviting
Sleek and corporate
Elegant and bold
Bold and action-driven
The 60-30-10 rule gives your UI a clear visual hierarchy. 60% dominant color for backgrounds, 30% secondary for navigation and cards, 10% accent for CTAs and highlights. Every scheme this tool generates follows this ratio.
50,000+
Color Systems Generated
15,000+
Templates Downloaded
Free
No signup required
Enter one color. Walk away with everything you need to ship a consistent UI.
Three colors sized by the 60-30-10 rule, each paired with a text color that meets WCAG AA contrast minimums. No manual contrast checking required.
See your palette applied to three realistic UI layouts before you commit. Switch views in one click — no Figma, no guessing.
Next.js, React, Vue, Flask, Django, and HTML — each template has your palette wired in. Unzip and run. Pick the one that matches your stack.
Copy-paste ready: CSS custom properties for any project, plus a Tailwind config with your palette mapped to the standard color scale.
Enter a color and get a palette, previews, and a framework template in under a minute.