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.

How to Generate Shades and Tints of Any Color

🎚️

Try Color Shade Generator

Free, no signup →