Color Desaturation

Color Desaturation Tool

Drag a slider to drain the color out of any shade, from 0% (original) to 100% (fully gray). The tool shows the original and desaturated swatches side by side with HEX, RGB, and HSL codes, plus an 11-step scale from 0% to 100% in 10% increments – click any swatch to copy it.

Two ways to remove color

"Desaturate" sounds simple, but there is more than one reasonable definition of gray:

• HSL saturation scales down the S in HSL while keeping lightness fixed. It is predictable and mirrors how most CSS and design-tool sliders behave.
• Luminance gray blends the color toward a gray with the same perceived brightness, using the Rec. 709 weights 0.2126 R + 0.7152 G + 0.0722 B. Because the eye is most sensitive to green and least to blue, this keeps the relative lightness of a design intact – the same idea behind converting a photo to black and white.

Worked example: #3366CC

The medium blue #3366CC is hsl(220, 60%, 50%).

At 50% the HSL method gives hsl(220, 30%, 50%) – exactly half the saturation. The luminance method ends at #636363 because the blue's luma is 0.2126 × 51 + 0.7152 × 102 + 0.0722 × 204 = 98.5, which rounds to 99 (hex 63). Notice how much darker that final gray is: HSL lightness overestimates how bright saturated blues look.

Practical uses

• Disabled states – a 60–80% desaturated button looks inactive without switching to a separate gray token.
• Accessibility checks – view your palette at 100% luminance gray to see whether elements stay distinguishable without color.
• Muted palettes – 20–30% desaturation softens loud brand colors for backgrounds and illustrations.

To lighten or darken instead of muting, try the Tint and Shade Generator; to inspect a single value in other formats, use HEX to RGB.