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 (Mix with Gray)

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

Color

Summary

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

How it works

Enter a base HEX color
Choose the number of tone steps
Copy the toned HEX values for your palette

Use cases

Create sophisticated muted palettes for premium brands
Tone down vivid colors for long-read interfaces
Generate dusty or earthy color variants

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu