Turn a single brand color into a complete design system with 50–950 shade scales, semantic tokens for light and dark mode, and accessibility-compliant contrast pairings. Export as CSS custom properties, Tailwind config, or design tokens for immediate use in production.
Generate 50–950 scales for every color in your brand palette. Each shade is perceptually uniform and tested for consistent lightness steps.
Automatically generates semantic color tokens that work in both light and dark mode. Surface, text, and accent colors are mapped for both themes.
Every color pairing is checked against WCAG AA contrast ratios. You'll see which combinations work for text, UI, and decorative elements.
Export your entire color system as CSS custom properties, Tailwind CSS config, SCSS map, JSON tokens, or a shareable Style Guide.
Semantic tokens map colors to their purpose — like 'background', 'text-primary', 'border', 'error' — rather than to specific values. This makes it easy to swap themes (light/dark) or rebrand without touching component code.
We use the OKLCH color space for perceptually uniform lightness steps. Starting from your brand color, we compute 10 shades that feel evenly spaced to the human eye, unlike simple HSL lightness adjustments.
Start with your primary color. The generator creates a complete system around it. You can adjust secondary and accent colors within the generated system.
Yes. The exported Tailwind config uses the CSS custom property format compatible with both Tailwind v3 (tailwind.config.js) and v4 (@theme inline).