Tones

In traditional color terminology, a tone is produced by mixing a color with gray. This reduces its intensity and moves it toward a neutral without taking it directly toward white or black.

That makes tones different from tints, which mix with white, and shades, which mix with black. A tone may also appear less saturated, but this tool specifically creates the effect through gray mixing rather than a separate saturation control.

Compare white and black mixtures in Tints & Shades.

Choose a color or enter a HEX value, then set the interval between variations. The generated row begins with the selected color and progresses toward the tool’s neutral gray reference.

This implementation mixes each step with #777777. Smaller intervals show more intermediate blends; larger intervals provide a shorter overview. Each generated HEX value can be copied or exported.

Gray-mixed variations can reduce a color’s visual intensity while preserving some of its original character.

• Explore restrained backgrounds and supporting surfaces.
• Create candidates for secondary elements that should attract less attention.
• Compare lower-intensity alternatives to a vivid brand or illustration color.
• Build a muted progression that can be evaluated alongside the rest of a palette.

• Tints & Shades: Create separate progressions toward white and black.
• Lighten & Darken: Change HSL lightness while retaining hue and saturation where possible.
• Color Mixer: Blend any two chosen HEX colors and inspect intermediate steps.