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 |
|---|---|---|
| 50 | 97% | Subtle backgrounds |
| 100 | 94% | Light backgrounds |
| 200 | 86% | Hover states (light) |
| 300 | 76% | Borders |
| 400 | 65% | Placeholder text |
| 500 | 50% | Base color |
| 600 | 40% | Hover states (dark) |
| 700 | 32% | Text |
| 800 | 24% | Headings |
| 900 | 16% | Very dark |
Example: Blue Scale
| Level | HEX | Preview |
|---|---|---|
| 50 | #EFF6FF | Very light |
| 200 | #BFDBFE | Light |
| 500 | #3B82F6 | Base |
| 700 | #1D4ED8 | Dark |
| 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.