WebToolsPlanet
Color Tools

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

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What 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

1

Enter a HEX code or use the colour picker

2

Six desaturation steps appear instantly

3

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.

Base colour
#3B82F6
Desaturation steps
100%: #3B82F6 → 80%: #5280D4 → ... → 0%: #949494

Lightness 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.

Frequently Asked Questions

What model is used for desaturation?

HSL — the saturation channel is reduced in steps from 100% to 0% while hue and lightness are held constant.

Is 0% saturation always neutral grey?

Yes. At S=0%, the colour is a neutral grey whose brightness is determined by the lightness (L) value.

Is my data sent to a server?

No. All processing runs in your browser.

Related Tools

Part of a Collection