What is the difference between a tone, a tint, and a shade?

A tint is the color mixed with white, a shade is mixed with black, and a tone is mixed with grey. Tints and shades move lightness; tones mainly reduce saturation.

When should I use a toned color?

For large surfaces such as backgrounds, cards, and section fills, where a fully saturated color would dominate. Keep the saturated version for small elements that need attention, like buttons.

Do tones change the hue?

No. Mixing with a neutral grey leaves the hue angle intact and pulls saturation toward zero.

Color Tool

Tones Generator

Add a neutral gray to your colors. Tone steps mix the base hue with#808080to produce muted, real-world variants. Click any swatch to copy its hex value.

Export Code

:root {
  --color-tone-0: #007FFF;
  --color-tone-11: #0E7FF1;
  --color-tone-23: #1D7FE2;
  --color-tone-34: #2C7FD4;
  --color-tone-45: #3A7FC6;
  --color-tone-56: #4880B8;
  --color-tone-68: #5780A9;
  --color-tone-79: #65809B;
  --color-tone-90: #73808D;
}

Tones, tints, and shades

A tint adds white, a shade adds black, and a tone adds grey. Tones are the least used and the most useful for interfaces, because they lower intensity without moving lightness, so a toned color still works at the same place in a layout.

Fully saturated brand colors are exhausting across large areas. Toning a hero background by 20 to 30 percent usually reads as more considered without anyone noticing what changed.

Frequently asked

What is the difference between a tone, a tint, and a shade?: A tint is the color mixed with white, a shade is mixed with black, and a tone is mixed with grey. Tints and shades move lightness; tones mainly reduce saturation.
When should I use a toned color?: For large surfaces such as backgrounds, cards, and section fills, where a fully saturated color would dominate. Keep the saturated version for small elements that need attention, like buttons.
Do tones change the hue?: No. Mixing with a neutral grey leaves the hue angle intact and pulls saturation toward zero.

Related tools

← All tools