Generate production-ready Tailwind CSS color palettes with automatic shade generation (50-900). Export tailwind.config.js or CSS variables in one click.
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#e6f7f5',
100: '#b3e8e1',
200: '#80d9cd',
300: '#4dcab9',
400: '#2a9d8f',
500: '#24877c',
600: '#1e7169',
700: '#185b56',
800: '#124543',
900: '#0c2f30',
},
secondary: {
50: '#fef6e9',
// ... auto-generated shades
}
}
}
}
}Copy-paste ready tailwind.config.js with proper naming (50-900 shades)
Generate CSS custom properties for vanilla CSS or any framework
Automatically create 50, 100, 200...900 shades from base colors
Check contrast ratios to ensure accessible color combinations
Export as JSON for design tokens or programmatic use
Copy entire color config to clipboard with single click
Ready for tailwind.config.js
colors: {
primary: {
500: '#2a9d8f',
600: '#24877c',
}
}Universal CSS custom properties
:root {
--color-primary-500: #2a9d8f;
--color-primary-600: #24877c;
}For design tokens or apps
{
"primary": {
"500": "#2a9d8f",
"600": "#24877c"
}
}Figma design tokens format
primary/500: #2a9d8f primary/600: #24877c
Skip manual color configuration. Generate and export Tailwind palettes in seconds.
Create consistent color systems across frontend and design tools.
Share standardized color tokens across your entire tech stack.
Use AI, upload an image, or manually pick your brand colors
Automatically create 50-900 shades with perfect color harmony
Copy Tailwind config, CSS variables, or JSON to your project
Generate production-ready Tailwind palettes in seconds
Free • Instant export • No signup