Tailwind Shade Generator
Turn a single color into a full Tailwind-style shade scale (50–950) with a custom variable name.
Base Color & Options
Pick a color, name the variable, and choose a shade style.
Sanitized: brand
Shade Scale — brandClassic
Click any swatch to copy its hex value.
Code Output
Drop the generated variables or config straight into your project.
:root {
--color-brand-50: #f1f1fe;
--color-brand-100: #dedffc;
--color-brand-200: #bdbef9;
--color-brand-300: #8e90f5;
--color-brand-400: #5f62f1;
--color-brand-500: #3134ed;
--color-brand-600: #1417e1;
--color-brand-700: #1013bc;
--color-brand-800: #0d0f96;
--color-brand-900: #0a0c71;
--color-brand-950: #060746;
}