Tone Generator
Generate muted tones of any color by reducing saturation.
About the Tone Generator
Generate muted tones of any color by reducing saturation. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Enter a color
Type a HEX value or use the picker.
Generate tones
Muted variations are created automatically.
Compare the row
See how the color softens toward gray.
Copy a tone
Click any swatch to copy its HEX value.
Benefits
Calmer colors
Tones reduce intensity for sophisticated, muted palettes.
Reduce eye strain
Less saturated colors are easier to look at for long periods.
Coordinated set
Every tone keeps the original hue.
Features & supported formats
Features
- Multiple desaturated steps
- Hue-preserving output
- Click-to-copy swatches
- Live base preview
- HEX values for each step
Supported formats
Frequently asked questions
What is a tone?
A tone is a color mixed toward gray — it has lower saturation but keeps the same hue.
Why use tones?
Tones create mature, understated palettes and are great for text, surfaces and data visualizations.
Do tones keep the hue?
Yes. Only saturation is reduced, so the color still belongs to the same family.
Are tones better for dark mode?
Muted tones often feel more comfortable in dark interfaces than fully saturated colors.
Can I mix tones with tints and shades?
Yes — adjusting saturation and lightness together gives you full control of a palette.