What is the difference between a shade and a tone?

A shade is a color mixed with black, so it gets darker; a tone is a color mixed with gray, so it gets more muted while staying at a similar lightness. A 40% shade of #9B59B6 is #5D356D (clearly darker), while a 40% tone is #9069A0 (similar lightness, visibly grayer).

Pure gray is not a tone — like white and black it is a neutral (achromatic) color with no hue. Gray is the ingredient you mix in to make tones: a 100% tone of any color is just #808080. Colors close to gray, like #85788B, are heavily toned but still carry a trace of their hue.

Do tones change a color's lightness?

Barely — toning mainly removes saturation. A 40% tone of #9B59B6 moves HSL lightness only from 53% to 52%, while saturation drops from 39% to 22%. That is the practical difference from shading, which pushes the same color's lightness from 53% down to 32% at 40%.

How do I make a tone in CSS?

Use color-mix() with gray: background: color-mix(in srgb, #9b59b6 60%, #808080) produces a 40% tone, which works out to #9069A0. Adjust the percentage split to control how muted the result is — more gray means a stronger tone.

What is the difference between a tone and a tint?

A tint mixes a color with white (lighter), while a tone mixes it with gray (more muted). See the full tint vs shade comparison for how all three — tints, shades, and tones — relate.

Shade vs Tone: What's the Difference?

Color theory basics · Updated August 10, 2026

A shade is a color mixed with black, so it gets darker — and often looks richer and heavier; a tone is a color mixed with gray, so it gets more muted and softer while staying at a similar lightness. Both keep the underlying hue — the difference is whether you mainly lose lightness (shade) or saturation (tone).

Need the darker steps of a color right now? The shade generator builds the full black-mixed ramp of any hex code, and chroma mode in the color scale generator does the tone-like desaturation.

Shades and Tones, Side by Side

Same base color — the purple #9B59B6 — mixed step by step with black (top row) and with gray #808080 (bottom row):

Shades of #9B59B6 (mixed with black)

#9B59B6base

#7C479220% shade

#5D356D40% shade

#3E244960% shade

#1F122480% shade

Tones of #9B59B6 (mixed with gray)

#9B59B6base

#9661AB20% tone

#9069A040% tone

#8B709660% tone

#85788B80% tone

By 80%, the shade is nearly black while the tone is nearly gray — but both rows are still the same purple hue throughout.

The Formulas

A shade scales each RGB channel toward 0; a tone blends each channel toward 128 (the gray #808080). For a percentage p (0–1):

Shade: new = old × (1 − p)

20% shade of #9B59B6 — rgb(155, 89, 182):
 ├─ R: 155 × 0.8 = 124
 ├─ G: 89  × 0.8 =  71
 └─ B: 182 × 0.8 = 146

Result: rgb(124, 71, 146) = #7C4792   ← darker

Tone:  new = old × (1 − p) + 128 × p

40% tone of #9B59B6 — rgb(155, 89, 182):
 ├─ R: 155 × 0.6 + 128 × 0.4 = 144
 ├─ G: 89  × 0.6 + 128 × 0.4 = 105
 └─ B: 182 × 0.6 + 128 × 0.4 = 160

Result: rgb(144, 105, 160) = #9069A0  ← muted, similar lightness

The HSL numbers make the difference concrete. #9B59B6 sits at 39% saturation, 53% lightness. Its 40% tone #9069A0 keeps lightness almost unchanged (52%) but cuts saturation to 22%. Its 40% shade #5D356D keeps saturation similar (35%) but drops lightness to 32%.

Mix	Result	Hex
20% shade		`#7C4792`
40% shade		`#5D356D`
20% tone		`#9661AB`
40% tone		`#9069A0`

Tone vs Shade: When to Use Each

Searching for "tone vs shade" and "shade vs tone" gets you the same answer — but in practice designers reach for them in different situations:

Reach for shades when you need real darkness: readable text on light backgrounds, pressed/active button states, darkened hover variants, and dark-mode surface colors. A shade keeps the color's intensity while adding weight.
Reach for tones when a color is too loud at the lightness you need: muted UI states (disabled, secondary), sophisticated editorial palettes, and desaturated brand variants that sit quietly behind content. A tone calms a color down without making it dark.
Rule of thumb: if the problem is "too light/too dark," fix it with tints and shades; if the problem is "too loud," fix it with tones.

How to Make Tones When Your Tool Only Does Tints and Shades

Most tint-and-shade tools only mix toward white and black. Two easy ways to get tones anyway:

Reduce HSL saturation. Toning is, to a close approximation, desaturation at constant lightness. Convert your hex with the hex to HSL converter, lower the S value, and convert back. The chroma mode in the HexTints scale generator is exactly this — a ramp of the same hue and lightness with falling saturation.
Mix with gray in CSS. color-mix(in srgb, #9b59b6 60%, #808080) gives the 40% tone #9069A0 directly in the browser.

Frequently Asked Questions

What is the difference between a shade and a tone?

A shade is a color mixed with black, so it gets darker; a tone is a color mixed with gray, so it gets more muted while staying at a similar lightness. A 40% shade of #9B59B6 is #5D356D (clearly darker), while a 40% tone is #9069A0 (similar lightness, visibly grayer).
Is gray a tone?

Pure gray is not a tone — like white and black it is a neutral (achromatic) color with no hue. Gray is the ingredient you mix in to make tones: a 100% tone of any color is just #808080. Colors close to gray, like #85788B, are heavily toned but still carry a trace of their hue.
Do tones change a color's lightness?

Barely — toning mainly removes saturation. A 40% tone of #9B59B6 moves HSL lightness only from 53% to 52%, while saturation drops from 39% to 22%. That is the practical difference from shading, which pushes the same color's lightness from 53% down to 32% at 40%.
How do I make a tone in CSS?

Use color-mix() with gray: background: color-mix(in srgb, #9b59b6 60%, #808080) produces a 40% tone, which works out to #9069A0. Adjust the percentage split to control how muted the result is — more gray means a stronger tone.
What is the difference between a tone and a tint?

A tint mixes a color with white (lighter), while a tone mixes it with gray (more muted). See tint vs shade for how all three — tints, shades, and tones — relate.