Tint, Shade & Tone
The three fundamental ways to modify any color — and the one-sentence rule that separates them.
See the difference
Base color #4F46E5 shown alongside its tints, shades and tones.
Tints
Mixed with white
Shades
Mixed with black
Tones
Mixed with gray
One-sentence definitions
| Term | Formula | Effect |
|---|---|---|
| Tint | Color + White | Lighter, less saturated |
| Shade | Color + Black | Darker, same saturation |
| Tone | Color + Gray | Muted, reduced saturation |
How each is used in interfaces
| Modifier | Best uses | Common mistakes |
|---|---|---|
| Tint | Hover states, subtle backgrounds, disabled controls, highlighted rows | Using very light tints for text — they fail contrast |
| Shade | Pressed states, borders, active tabs, dark-theme variants, headings | Darkening too much — the color loses its identity and becomes muddy |
| Tone | Secondary text, muted icons, subtle accents, illustration shading | Confusing tone with tint or shade — tone is the only one that reduces saturation |
Why the distinction matters
Designers often use the three words interchangeably, but the differences are real and useful. Tint and shade keep the saturation of the base color — they only change lightness. Tone reduces saturation — it changes the color's intensity. That means a tint of a vivid red is still vivid (just lighter); a tone of the same red is muted. Choosing the wrong modification produces a palette that feels off without an obvious reason why.
Building a full palette
-
Start with a base colorThis is your brand color or the anchor of the palette.
-
Generate tints for light surfacesTwo to four tints give you hover states, subtle backgrounds and soft callouts.
-
Generate shades for depthTwo to four shades give you pressed states, borders, dark variants and text colors.
-
Add a tone for mutingOne or two tones give you muted accents, secondary text and less saturated variants.
The result is a palette with a full range — light enough for backgrounds, dark enough for text, muted enough for secondary content — all derived from one base color. Use our shades generator or tints, tones & shades tool to build one automatically.
Frequently asked questions
What is a tint?
A tint is a color mixed with white. It has higher lightness and lower saturation than the original. Tints are used for soft backgrounds, hover states, and anything that should feel lighter and airier than the base.
What is a shade?
A shade is a color mixed with black. It has lower lightness while keeping roughly the same hue and saturation. Shades are used for pressed states, borders, dark-theme variants, and text colors where more contrast is needed.
What is a tone?
A tone is a color mixed with gray. It has reduced saturation and often a slightly different temperature depending on the gray used. Tones are commonly used in editorial, vintage, minimal and muted palettes.
What is the difference between tint, shade and tone?
A tint adds white (lighter), a shade adds black (darker), and a tone adds gray (muted). All three change a base color in different directions and are used together in a complete design system.