Tailwind CSS Palette Generator - Shades 50-950
Generate complete Tailwind CSS palette (50-950) from a color.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F2F2FD',
100: '#E4E5FB',
200: '#BFC0F8',
300: '#9395F6',
400: '#5B5EF5',
500: '#1418EB',
600: '#0C0FC6',
700: '#0508AD',
800: '#010389',
900: '#010265',
950: '#000133',
},
},
},
},
}Supported formats
How it works
Enter your base color (HEX, RGB)
11 shades (50-950) are generated automatically
Preview and adjust if needed
Copy code for tailwind.config.js
Privacy guaranteed
100% local generation.
Generate custom Tailwind CSS colors
Tailwind CSS uses color palettes with 11 shades (50, 100, 200... 900, 950). Our generator automatically creates these shades from a single color, reproducing the lightness distribution of native Tailwind colors. Generate a complete Tailwind CSS palette with all 11 shades (50 to 950) calibrated in luminance for your design tokens and tailwind.config.js file. Instantly convert between HEX, RGB, HSL, HSV and CMYK, adjust hue, saturation and lightness with real-time preview and check WCAG AA/AAA contrast for sRGB-compliant accessibility.
Optimized lightness distribution
Shades are not linear. 50 and 100 are very light (backgrounds), 400-600 for interactive elements, 700-950 for text. Our algorithm reproduces this distribution.
Saturation preservation
Very light and very dark colors often lose vibrancy. We adjust saturation so even extreme shades remain identifiable.
Integration in tailwind.config.js
Generated code is ready to paste into your config. Define a name (primary, brand, accent) and all Tailwind classes will be available: bg-primary-100, text-primary-700, border-primary-300, etc.
Multiple palettes for design system
Create your primary, secondary, accent, success, warning, error colors in minutes. Our tool lets you generate and combine multiple palettes for a complete design system.
Export to CSS variables and SCSS
In addition to Tailwind format, export your colors to CSS custom properties or SCSS variables. Ideal if you use Tailwind with other tools or frameworks.
Preview and accessibility testing
View all shades side by side and check accessible combinations. We indicate which text/background pairs pass WCAG AA and AAA tests.
Configure Tailwind v4 with your custom palette
Tailwind CSS v4 uses native CSS variables. Our generator produces code ready for @theme and tailwind.config.ts, compatible with light and dark modes, as well as shades 50 to 950.