Color Shades Generator
Generate a full scale of tints, shades, and tones from any base color. Build instant 10-step design system color scales.
Tints (lighter) → Base → Shades (darker)
How to Generate Color Shades
Enter your base color as a HEX code or use the color picker. The tool instantly generates 10 evenly spaced shades — 5 lighter (tints) and 5 darker (shades) — along with the original color in the middle. Copy any shade with a click, or copy them all as CSS variables ready for your stylesheet.
Building a Design System Color Scale
Modern design systems define each brand color as a 10-step scale: 50 (lightest), 100, 200, 300, 400, 500 (base), 600, 700, 800, 900 (darkest). Tailwind CSS, Material Design, and IBM Carbon all follow this pattern. The shallow steps (50–200) work great as background tints; the deep steps (700–900) are best for text and emphasis.
Tints vs Shades vs Tones
Tints are created by adding white — they lighten the hue while preserving saturation. Shades are created by adding black — they darken without changing hue. Tones are created by adding gray — they mute the color, often producing more sophisticated palettes. This generator produces all three, but tints and shades are the most commonly used in UI design.
Using Shades for Hover States
The classic UI trick: your default button uses shade 500, hover uses shade 600, active uses shade 700. This three-step interaction feels tactile and predictable. For disabled states, drop two steps and reduce opacity to 60%. Use our palette generator first to find your base color, then expand each into a full scale here.