Function Signature

js

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

Parameters

hex (string): A HEX color string (e.g., #ff6600).
percent (number): The amount to increase saturation, from 0 to 100. Negative values desaturate instead.

Return Value

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

js

saturate("#ff6600", 20);
// "#ff3300"

saturate("#228b22", 40);
// "#00b200"

// Negative values desaturate
saturate("#00aaff", -30);
// "#3399b3"

Examples

js

// Increase saturation of orange by 15%
console.log(saturate("#ff6600", 15));
// "#ff3300"

// Make gray more vivid (has no effect)
console.log(saturate("#808080", 50));
// "#808080"

Implementation Details

Converts the input HEX color to RGB using hexToRgb.
Transforms RGB into HSL via rgbToHsl.
Adjusts the saturation (s) by the specified percentage and clamps with clampPct.
Converts back to RGB using hslToRgb, then to HEX with rgbToHex.

Usage Notes

Positive values make colors more vivid, negative values reduce intensity.
Grayscale colors (s=0) remain unchanged even when saturation is increased.
Pairs with desaturate for complementary functionality.