// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'primary': {
50: '#f1fcfd',
100: '#e3f8fc',
200: '#bfeff8',
300: '#8aedff',
400: '#52e5ff',
500: '#1addff',
600: '#00c3e6',
700: '#0098b3',
800: '#006c80',
900: '#004e5c',
950: '#002b33',
},
},
},
},
};:root {
--primary-50: #f1fcfd;
--primary-100: #e3f8fc;
--primary-200: #bfeff8;
--primary-300: #8aedff;
--primary-400: #52e5ff;
--primary-500: #1addff;
--primary-600: #00c3e6;
--primary-700: #0098b3;
--primary-800: #006c80;
--primary-900: #004e5c;
--primary-950: #002b33;
}Yes, completely free with no sign-up. Generate unlimited custom Tailwind color scales.
No, all color generation happens in your browser. Your colors never leave your device.
Select a color using the color picker or enter a hex code - this will be your primary brand color. Preview all 10 shades (50-950) generated automatically, ranging from very light to very dark. Click on any shade to fine-tune its color to match your brand guidelines. Copy the complete Tailwind configuration code to add to your tailwind.config.js file. Once added to config, use your custom colors with Tailwind classes like bg-brand-500, text-brand-700, etc.
The 50-950 scale provides consistent lightness progression across all colors, making it easy to create cohesive designs with predictable contrast.