About the Color Desaturator
Disabled buttons, muted chart series, watermarks and hover states usually need a quieter version of a colour rather than a different one. Set how much saturation to remove, paste your colours one per line, and each returns as a before and after pair with the saturation figures printed next to it so you can see exactly how far it moved. Removing 100 percent gives a full grey, removing 0 leaves the colour untouched.
The three methods answer different questions. HSL saturation scales the saturation channel and leaves hue and lightness alone, which keeps a palette coherent and is what a design system usually wants. Luma weighted grey mixes towards a grey built from 0.2126 red, 0.7152 green and 0.0722 blue, the Rec. 709 weights, so the result matches how bright the colour actually appears. Channel average grey mixes towards the plain mean of the three channels, which is cruder but is what a lot of older image code does, and it makes yellows look darker than they should.
A colour that is already neutral will not move under any of the three, because there is no saturation left to take away. Alpha values pass through untouched. For a single step to full grey, Grayscale Converter is quicker, while Lighten or Darken adjusts brightness instead of intensity and Tints and Shades builds a whole ramp.
How to use
- Paste the colours you want to mute, one per line.
- Set Remove to the percentage of saturation you want gone.
- Choose HSL saturation, luma weighted grey or channel average grey.
- Press Desaturate and compare the swatch pairs.
- Copy the resulting codes for your stylesheet.
Common questions
- Which method should I pick for a design system?
- HSL saturation, because it keeps the hue and the lightness fixed so muted variants still read as the same family.
- What is the difference between luma and channel average?
- Luma weights green far more heavily than red and blue, matching perceived brightness, while the average treats all three channels equally.
- Does removing 100 percent give the same grey every time?
- No, each method lands on a different grey, so a yellow ends up much darker under channel average than under luma.
- Is transparency preserved?
- Yes, any alpha in the input is carried through to the result unchanged.
- Why did my grey input come back identical?
- A neutral colour has no saturation to remove, so every method leaves it exactly where it was.