Color Desaturation Tool
Reduce a colour’s saturation in even steps down to neutral grey and copy any step as hex, RGB or HSL. The tool also shows the two different ways of removing colour side by side: dropping HSL saturation to zero keeps the colour’s lightness, while a greyscale conversion weights the channels by perceived brightness — for pure green those land 54 grey levels apart. A colour vision simulation shows how the base colour reads to people with each common form of colour blindness.
| Swatch | Step | Saturation removed | Hex | RGB | HSL | Best text colour |
|---|---|---|---|---|---|---|
| 50 | 0% | rgb(51, 102, 204) | hsl(220, 60%, 50%) | White — 5.37:1 AA | ||
| 100 | 10% | rgb(59, 105, 196) | hsl(220, 54%, 50%) | White — 5.25:1 AA | ||
| 200 | 20% | rgb(66, 107, 189) | hsl(220, 48%, 50%) | White — 5.16:1 AA | ||
| 300 | 30% | rgb(74, 110, 181) | hsl(220, 42%, 50%) | White — 5.01:1 AA | ||
| 400 | 40% | rgb(82, 112, 173) | hsl(220, 36%, 50%) | White — 4.91:1 AA | ||
| 500 | 50% | rgb(89, 115, 166) | hsl(220, 30%, 50%) | White — 4.74:1 AA | ||
| 600 | 60% | rgb(97, 117, 158) | hsl(220, 24%, 50%) | White — 4.62:1 AA | ||
| 700 | 70% | rgb(105, 120, 150) | hsl(220, 18%, 50%) | Black — 4.73:1 AA | ||
| 800 | 80% | rgb(112, 122, 143) | hsl(221, 12%, 50%) | Black — 4.87:1 AA | ||
| 900 | 90% | rgb(120, 125, 135) | hsl(220, 6%, 50%) | Black — 5.08:1 AA | ||
| 950 | 100% | rgb(128, 128, 128) | hsl(0, 0%, 50%) | Black — 5.32:1 AA |
Every swatch meets WCAG AA against either black or white text — even the worst possible colour reaches 4.6:1 against one of them — so the useful line is AAA at 7:1, marked in the last column.
Two ways to remove the colour
Dropping saturation to zero and converting to greyscale are not the same operation, and for saturated colours they land a long way apart. Greyscale weights the channels by how bright the eye perceives them; zero saturation just keeps the colour's lightness.
Keeps the colour's lightness value.
Weights green highest, blue lowest.
For this colour the two methods differ by 29 of 255 grey levels.
How the base colour looks with colour vision deficiency
A rough simulation, useful for checking whether two swatches in a palette still look different — not a substitute for testing with real users.
:root {
--brand-50: #3366cc;
--brand-100: #3b69c4;
--brand-200: #426bbd;
--brand-300: #4a6eb5;
--brand-400: #5270ad;
--brand-500: #5973a6;
--brand-600: #61759e;
--brand-700: #697896;
--brand-800: #707a8f;
--brand-900: #787d87;
--brand-950: #808080;
}Steps run 50 (lightest) to 950 (darkest) with the base colour at 500, matching how Tailwind and Material number a palette, so the ramp drops into an existing config without renaming.
Frequently asked questions
Is setting saturation to zero the same as converting to greyscale?
No, and the difference can be large. Zero saturation keeps the colour’s HSL lightness, while a greyscale conversion weights green highest and blue lowest because that is how the eye perceives brightness. Pure green becomes mid-grey under the first and a much lighter grey under the second.
Which method should I use to grey out a colour?
For a disabled state or a muted variant that should sit at the same visual weight as the original, zero saturation is usually right. For matching how a photo editor converts an image to black and white, use the perceived-brightness result.
What is the colour vision preview for?
It shows roughly how the colour appears to someone with each of the three common forms of colour blindness, which is useful for checking that two swatches in a palette still look different from one another.
Is the colour blindness simulation accurate?
It uses standard linear approximations, which are good enough to answer whether two colours remain distinguishable, but it is not a clinical simulation and is no substitute for testing with real users.
Can I export the desaturation steps?
The full scale can be copied as CSS custom properties, SCSS variables, JSON or a plain list of hex values, using the export controls under the table.
Related tools
Tint and Shade Generator
Build a full palette ramp of tints, shades and tones from one colour, and export it as CSS, SCSS or JSON.
Color Converter (HEX / RGB / HSL / HSV / CMYK)
A color converter for HEX, RGB, HSL, HSV and CMYK, with a built-in WCAG contrast checker.
Grayscale Image Converter
Turn a photo black and white in your browser, with a choice of conversion method and adjustable strength.