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
Excel to JSON
Curl to PHP Converter
Find Day of Year
GPT Bot Crawl Tester
Random Element Generator
Ln Calculator
Log Calculator
Hostname to IP
Adding Fractions Calculator
DNS Records Checker
Fake Tweet Generator
UTF8 to ASCII Converter
Base64 To CSS Converter
Convert Query String to JSON
SOAP Formatter
SQL Escape Unescape
JavaScript Tester
All Number Converter
Salary Calculator
Multiplication Calculator
Your recent visits
