ColorApril 2026 · 6 min read

How to Generate Shades and Tints of Any Color

A single brand color isn't enough for a full interface. You need lighter variants for backgrounds, darker variants for hover states, and a range of shades in between for borders, disabled states, and subtle UI elements. Generating a complete shade scale from one base color is how professional design systems work.

🎚️

Try the Color Shade Generator

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01Shades, Tints, and Tones02Building a 10-Step Scale03Using Shades in Design Systems04Matching Tailwind CSS Color Scales

⚡ Key Takeaways

Create a full shade scale (50–900) from any base color.
Covers shades, tints, and tones.
Covers building a 10-step scale.
Covers using shades in design systems.
Covers matching tailwind css color scales.

Shades, Tints, and Tones

A shade is a color mixed with black — it gets darker. A tint is a color mixed with white — it gets lighter. A tone is a color mixed with gray — it gets more muted. In design system terms, a 'shade scale' typically refers to the full range from very light (tint) to very dark (shade), numbered 50 through 900, where 500 is usually the base color. Tailwind CSS, Material Design, and most modern design systems use this 50–900 numbering convention.

Building a 10-Step Scale

A well-built shade scale isn't just linear interpolation between white and the base color. Good scales adjust hue and saturation as they move through the lightness range — colors tend to shift hue slightly as they darken (blue becomes more purple, yellow becomes more orange), and overly saturated light tints look neon while overly desaturated dark shades look muddy. The Color Shade Generator handles these perceptual adjustments automatically, producing scales that look natural and balanced.

💡 Tip

Use 3+ color stops instead of 2 to avoid the muddy gray band that appears in the center of complementary-color gradients.

Using Shades in Design Systems

The 500 value is your primary brand color. 50–100 are background tints — use them for page backgrounds, card surfaces, and highlighted rows. 200–300 are border and divider colors. 400 is for secondary text and icons. 600–700 are hover and active states for buttons. 800–900 are for text on light backgrounds or backgrounds in dark mode. This mapping gives every UI state a dedicated color without inventing ad-hoc values.

⚠ Warning

CSS gradients used as backgrounds cannot be animated with standard transitions. Use background-size animation or @property registered custom properties instead.

Matching Tailwind CSS Color Scales

If you're using Tailwind CSS, your shade scale needs to match Tailwind's 50–950 naming convention. The Color Shade Generator exports in Tailwind config format, so you can paste the output directly into your tailwind.config.js. You can also use the Tailwind Color Finder to see how your generated scale compares to Tailwind's built-in palettes.

Frequently Asked Questions

What is the difference between a shade and a tint?+

A shade is a color darkened by mixing with black. A tint is a color lightened by mixing with white. A tone is a color muted by mixing with gray. Design systems typically use all three across a numbered scale (50–900).

How many shades do I need?+

Most design systems use a 10-step scale: 50, 100, 200, 300, 400, 500 (base), 600, 700, 800, 900. Some add a 950 for very dark backgrounds. This covers every common UI use case.

Why do colors look wrong when I just lighten/darken them?+

Linear lightening/darkening doesn't account for how human vision perceives color. Light tints can look washed out, and dark shades can appear muddy. Good shade generators adjust hue and saturation along with lightness for perceptually balanced results.

Try it yourself

Use the Color Shade Generator — free, no signup required.

⚡ Open Color Shade Generator

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading