Color Shades Generator
Generate a complete range of shades from any base color. Create 9-11 step scales similar to Tailwind CSS colors, perfect for design systems.
How Shades Work
Shades are created by varying the lightness (L) in HSL:
| Level | Lightness | Use | 5097%Subtle backgrounds 10094%Light backgrounds 20086%Hover states (light) 30076%Borders 40065%Placeholder text 50050%Base color 60040%Hover states (dark) 70032%Text 80024%Headings 90016%Very dark
Example: Blue Scale
LevelHEXPreview 50#EFF6FFVery light 200#BFDBFELight 500#3B82F6Base 700#1D4ED8Dark | 900 | #1E3A8A | Very dark |
Export as CSS
``css
:root {
--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--blue-200: #BFDBFE;
--blue-300: #93C5FD;
--blue-400: #60A5FA;
--blue-500: #3B82F6;
--blue-600: #2563EB;
--blue-700: #1D4ED8;
--blue-800: #1E40AF;
--blue-900: #1E3A8A;
}
``
Generate complete shade scales for your design system.