Function Signature

js

desaturate(hex: string, percent: number): string

Parameters

hex (string): A HEX color string (e.g., #ff6600).
percent (number): The amount to decrease saturation, from 0 to 100.

Return Value

Returns a HEX color string with reduced saturation, always in the format #rrggbb.

js

desaturate("#ff6600", 30);
// "#cc7a33"

desaturate("#00aaff", 50);
// "#5599aa"

Examples

js

// Desaturate orange by 20%
console.log(desaturate("#ff6600", 20));
// "#e67333"

// Desaturate green
console.log(desaturate("#228b22", 40));
// "#5c755c"

Implementation Details

The function calls saturate with a negative percentage value.
Ensures saturation adjustment always reduces intensity by using -Math.abs(percent).
Uses the full HEX → RGB → HSL → RGB → HEX conversion pipeline from saturate.

Usage Notes

Useful for generating muted color palettes.
Lightness and hue remain unchanged; only saturation is affected.
Complements the saturate function for balanced color manipulation.