📐 One toolkit, every design task

UI Color System

Generate complete design token palettes from a single seed color. Export to Tailwind, CSS, or SCSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 UI Color System

UI Color System Guide

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.

Pro Tips

FAQ

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.