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.
Building a Shade Ramp
A shade ramp is one hue at many lightnesses. Design systems standardised on 50–900 (or
50–950) because that many steps covers backgrounds, borders, text and states without anyone
reaching for an off-palette colour.
| Step | Typical use |
|---|---|
| 50–100 | Page and card backgrounds |
| 200–300 | Borders, dividers, disabled fills |
| 400–500 | The brand colour itself, icons |
| 600–700 | Hover and active states, body text on light |
| 800–900 | Headings, high-contrast text |
Generating by even lightness steps produces a ramp that *measures* even and *looks* wrong,
because perceived lightness is non-linear. Either generate in OKLCH, where the steps are
perceptually even, or hand-correct the middle of an HSL ramp upward.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.