Generate a complete design system from one color. Tailwind primary palette (50–950), semantic colors (success, error, warning), neutrals and CSS/Tailwind/SCSS exports.
A color design system defines the rules for using hues in an interface. It includes a primary palette (broken down into 11 shades), semantic colors (success green, error red, warning orange, info blue) and neutrals for text, backgrounds and borders. Tailwind CSS popularizes the 50–950 scale which offers enough granularity for all states: hover, focus, disabled, background, surface.
Start from your brand color (logo, brand guidelines) to automatically generate the entire palette. The algorithm adjusts saturation and lightness according to the Tailwind scale. Semantic colors are derived by hue rotation: +120° for success (green), +180° for warnings (orange). Neutrals are generated by desaturating the primary color to ensure tonal consistency.