What makes a tone different from a shade or tint?

Shades add black, tints add white, and tones add gray. Gray reduces saturation without greatly changing lightness, producing muted or dusty versions of the color.

What gray value is used?

The tool mixes with medium gray (#808080) by default. You can adjust the gray value to bias toward lighter or darker tones.

Are tones suitable for accessible design?

Muted tones often have lower contrast ratios, so check text legibility with the WCAG contrast checker before using them for body text.

Can I mix the tone output with tint and shade steps?

Yes. Copy toned values and paste them into the shade or tint generators to create extended color scales.

Color Tone Generator

Enter a base color and get tones created by mixing varying amounts of gray.

Color

Last updated: 2026-06-10 · Reviewed by Nham Vu