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',
}
}- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is Color Shades Generator really free?
Yes. Color Shades Generator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does Color Shades Generator upload my data?
No. Color Shades Generator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and Color Shades Generator is ready to use on desktop or mobile.
Does Color Shades Generator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.