Shades Generator Guide
How to create progressively darker shades of any color — and why shades are the foundation of modern design systems.
What Are Shades?
A shade is a color mixed with black, which reduces its lightness without changing its hue or saturation. For example, navy blue is a shade of royal blue. Dark forest green is a shade of emerald green.
Unlike tints (mixed with white) or tones (mixed with gray), shades move strictly toward darkness while preserving the color's character.
How Shades Are Created Mathematically
In HSL color space, creating a shade means decreasing the L (lightness) value while keeping H (hue) and S (saturation) constant:
Base color: hsl(215, 84%, 51%)
Shades at 10% lightness steps:
L = 51% → #155EEF (base)
L = 41% → #0F4BD1 (darker)
L = 31% → #0A3BAA (darker)
L = 21% → #062A7A (darker)
L = 11% → #03194A (very dark)Why Shades Matter in Design
Interaction feedback
Shades are the standard for hover and active states. When you hover a button, it typically darkens by 8-15% lightness. This gives clear feedback without changing the button's hue.
Design system scales
Every 50-900 color scale in a design system is essentially a scale of tints (light end) and shades (dark end). Designers reach for shades for hover states, borders, and dark accents.
Text color
The darkest shade of a brand color is often used for body text. It maintains brand identity while providing enough contrast against light backgrounds.
Shadows
Colored shadows (like "box-shadow: 0 4px 12px rgba(21, 94, 239, 0.3)") use shades of the brand color to create depth without introducing a new hue.
Borders and dividers
Subtle borders use mid-range shades that are visible against the background but not dominant.
How to Use the Shades Generator
- Enter a base color: Any HEX code or click Random
- Choose number of shades: 5, 7, 10, or 12
- Adjust step amount: Control how much darker each step gets (3-25%)
- Preview updates live: See all shades at once
- Click any swatch to copy its HEX
- Copy All HEX: Get a comma-separated list
Common Use Cases
Building a button scale
Base color = button default. Darker shade = hover state. Even darker = active state. Standard button CSS:
.btn {
background: #155EEF; /* base */
}
.btn:hover {
background: #0F4BD1; /* shade 1 */
}
.btn:active {
background: #0A3BAA; /* shade 2 */
}Design tokens
Generate the full shade scale for your brand color and use it as design tokens. Common scale: 500 (base), 600, 700, 800, 900 for shades.
Colored shadows
Generate a very dark shade of your brand color and use it as a shadow. Feels more premium than neutral black shadows.
Shades vs Tints vs Tones
Three fundamental color variations:
- Shades: Mix with black — darker, same hue and saturation
- Tints: Mix with white — lighter, same hue and saturation
- Tones: Mix with gray — muted, same hue, same lightness, reduced saturation
For a complete palette, you typically use tints for backgrounds and shades for foregrounds.
Best Practices
Use consistent step sizes
10% lightness steps work for most design systems. Smaller steps (5%) for very large scales, larger (15-20%) for small accent scales.
Anchor with darkest shade
Make sure the darkest shade is dark enough for text and borders. Aim for L below 25% for the darkest shade.
Test contrast
Every shade used as text must pass WCAG contrast against its background. Test with our contrast checker.
Do not over-darken
Shades below 5% lightness become almost black. Rarely useful — the color identity is lost.
Common Mistakes
Mixing shades and tones
If your "shade" also has reduced saturation, you are making a tone, not a shade. Keep saturation constant for true shades.
Uniform step increments at all lightness levels
Perceptually, lightness steps feel larger in dark regions than light regions. Professional scales often use slightly smaller steps at the dark end.
Ignoring accessibility
Even the darkest shade can fail WCAG if the base color was too light. Always test text/background combinations.