A UI color system is a set of color variants built from a single seed color. It provides consistent light-to-dark scales for design tokens, buttons, backgrounds, and text colors.
Select a seed color and choose a style (Tailwind or Material). The tool generates a complete 10-step palette from light (50) to dark (900), perfect for design systems.
Frequently Asked Questions
Q: What is a design token?
What is a design token? A design token is a named value that stores a design attribute like a color, used consistently across a design system.
Q: Why do I need 10 shades?
Why do I need 10 shades? Different UI elements need different contrast levels. A 10-step scale gives flexibility for backgrounds, borders, hover states, and text.
Q: What is a design token palette?
What is a design token palette? A design token palette is a systematic set of color variables (primary, secondary, surface, text) generated from a single brand color. It ensures consistency across your entire UI.
Q: Can I export to design systems other than Tailwind?
Can I export to design systems other than Tailwind? Yes, the tool exports to CSS custom properties, SCSS variables, and Tailwind config format. Copy the format that matches your stack.
Q: How do I handle dark mode with this tool?
How do I handle dark mode with this tool? Generate your light mode palette first, then use the same seed color with reduced saturation and lightness values for dark mode. Many design systems invert the surface and text colors.