Tone
A color mixed with gray — less saturated than the original, creating a muted, sophisticated version.
What it means
A tone is created by adding gray (a mix of black and white) to a color. This reduces the color's saturation without dramatically changing its lightness, producing a more muted, naturalistic result. Tones feel organic — they're the colors of real-world surfaces where light scatters and materials absorb.
Tones are distinct from tints (which only lighten) and shades (which only darken). A toned color retains approximately the same lightness but loses vibrancy.
Why it matters in palette design
Tones are ideal for secondary UI elements, muted icons, placeholder text, and decorative backgrounds. They pair naturally with their vivid parent color, creating a "loud vs quiet" dynamic without clashing. In design systems, toned variants often serve as secondary or tertiary colors that support without competing.
Example
A design tool uses a vivid purple (#7C3AED) for primary actions. A toned purple (#8B7BA3) — same approximate lightness but much lower saturation — serves as icon fills and secondary labels, creating depth without visual noise.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.