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
Accuracy & limitations
Tones reduce saturation and leave lightness alone — which is exactly why desaturating a color will not rescue a contrast failure, however much calmer it looks.
- Tones are produced by reducing saturation while holding hue and lightness.
- A color that is already near-gray has little saturation to remove, so the steps will be barely distinguishable.
- Because lightness is held constant, tones change contrast far less than tints or shades do — do not expect desaturating to fix a contrast failure.
- At zero saturation every hue converges on the same gray.
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.
Further reading
Color Harmony
The classic harmony schemes as hue arithmetic, what each one feels like in a real interface, and how to keep a palette from falling apart.
FundamentalsColor Models Explained
What each color model actually measures, where each one is the right choice, and why the same color has six different sets of numbers.