Color Desaturation
Enter a colour and see it desaturated in 6 steps — from full saturation (100%) down to pure greyscale (0%). Each step shows the HEX code and a live swatch for easy copying.
Last updated: May 29, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Color Desaturation?
Desaturation reduces a colour's saturation in the HSL model while keeping the same hue and lightness. As saturation approaches 0%, the colour becomes a neutral grey. This is useful for creating accessible muted variants, disabled-state UI colours, greyscale design systems, and background tones that do not compete with accent colours.
How to Use Color Desaturation
Enter a HEX code or use the colour picker
Six desaturation steps appear instantly
Copy any HEX value for use in your design
Common Use Cases
- UI designers creating muted or disabled-state variants of a primary colour.
- Design system maintainers generating a full saturation scale from a single base colour.
- Accessibility reviewers checking how a colour reads at reduced saturation.
- Developers building dark-mode palettes that need less saturated background colours.
Example Input and Output
Desaturating a blue to explore muted variants.
#3B82F6100%: #3B82F6 → 80%: #5280D4 → ... → 0%: #949494Lightness preserved
Desaturation only changes saturation — the perceived lightness stays the same. To darken a colour, use the Tint and Shades Generator.
Browser-side only
All processing runs locally in your browser.