Color Shades Generator
Generate a complete 11-step color scale (50–950) from any base color — like Tailwind CSS. Get CSS variables or a Tailwind config snippet.
Color Scale
CSS Custom Properties
:root {
--color-50: #f5f9ff;
--color-100: #e7f0fe;
--color-200: #cee0fd;
--color-300: #b1cefb;
--color-400: #85b2f9;
--color-500: #3c83f6;
--color-600: #1068f4;
--color-700: #0a54cd;
--color-800: #073c92;
--color-900: #052a66;
--color-950: #031a3f;
}Tailwind Config
colors: {
color: {
'50': '#f5f9ff',
'100': '#e7f0fe',
'200': '#cee0fd',
'300': '#b1cefb',
'400': '#85b2f9',
'500': '#3c83f6',
'600': '#1068f4',
'700': '#0a54cd',
'800': '#073c92',
'900': '#052a66',
'950': '#031a3f',
}
}