Color Desaturation
Pick HEX color, slide desaturation amount, see updated HEX and RGB previews
What is color desaturation?
Color desaturation lowers chroma while keeping lightness and hue roughly aligned with the original. Designers use it for muted palettes, backgrounds that should not compete with content, or quick grayscale-style previews without fully abandoning hue structure.
How this tool works
Pick a color with the picker or type a HEX code, then move the slider. The tool converts the color to HSL,
multiplies saturation by (1 − slider%), and converts back to HEX and RGB so you can copy values into
CSS or design files.
Image saturation vs this HEX tool
This page works on a single solid color. For photograph-style saturation changes, use an image-focused editor or the site’s image saturation tool; the math and UI needs are different.
Frequently Asked Questions
Does 100% desaturation always give pure gray?
With the HSL model used here, saturation reaches zero at 100%, which yields a neutral gray at the same lightness as the original hue.
Why might two colors look different on screen than in print?
Displays use additive light; print uses subtractive inks. HEX/RGB numbers are device-oriented. Always proof on the target medium when color accuracy matters.
Are colors uploaded to a server?
No. All calculations run in your browser.
Can I paste RGB instead of HEX?
The picker accepts drag from many workflows, but the text field expects HEX. Convert RGB elsewhere first, or pick visually and refine the HEX field.
Tags
Related tools
Your recent visits