Design Token Generator
Generate color scales (50-950), semantic tokens, and component preview from your palette
Color Scales(click to copy)
Semantic Tokens
Component Preview
LiveThis card uses your surface, text, and border tokens.
How it works
The Design Token Generator transforms a simple color palette into a complete, production-ready design system. Assign semantic roles to your colors and automatically get scales, tokens, and exportable code.
How does it work?
1. Choose your base colors
Assign 6 semantic roles: Primary (brand/CTAs), Secondary (secondary accents), Accent (highlights), Background (page background), Surface (cards/sections), and Text (typography). Start with a preset, generate a random palette, or fine-tune each color manually.
2. Automatic scales (50-950)
For each base color (Primary, Secondary, Accent), an 11-step scale similar to Tailwind CSS is generated. Lighter tints (50-400) are mixed with white and darker shades (600-950) are darkened with added saturation. Step 500 is always your original color. A neutral/gray scale is also derived from your text color.
3. Semantic tokens
Auto-generated tokens for Success, Error, Warning, and Info, each with light, base, and dark variants. Saturation automatically adjusts to match your palette's intensity.
4. Component preview
See your tokens applied to real UI components in real-time: buttons, forms, alerts, cards, badges, notifications, and progress bars.
5. Export
Export in 4 formats: CSS Custom Properties, Tailwind CSS config, SCSS variables, or JSON tokens (compatible with Style Dictionary and Figma Tokens).
💡 Practical Use Cases
Case 1: Building a corporate Design System
Your brand uses blue #3B82F6 as primary. You need the full scale for buttons, hover states, subtle backgrounds, etc.
→ Enter the color as Primary and get 11 shades (from light #EFF6FF to dark #1E3A5F)
→ Export as Tailwind config and paste directly into your project
Case 2: Implementing dark mode
You have a light palette and need to validate how it looks in dark mode.
→ Click "Swap" to automatically switch background and text
→ The component preview instantly shows how alerts, badges, and cards look in dark mode
Case 3: Tokens for Figma / Style Dictionary
You need to deliver color tokens to the design team in a standard JSON format.
→ Configure your palette → Export as JSON → Format is compatible with Style Dictionary and Figma Tokens
→ Includes full scales + semantic tokens with light/base/dark variants