Function Signature

js

generateTones(hex: string, count?: number, includeBase?: boolean): string[]

Parameters

hex (string): The base HEX color string (e.g., #ff6600).
count (number, optional): The number of tones to generate (excluding base). Defaults to 10.
includeBase (boolean, optional): Whether to include the original color as the first element. Defaults to true.

Return Value

An array of HEX color strings, each representing a progressively desaturated tone of the input color.

js

generateTones("#ff6600", 5);
// ["#ff6600", "#e67333", "#cc855c", "#b39980", "#999999", "#808080"]

Examples

js

// Generate 3 tones of blue (excluding base)
console.log(generateTones("#00aaff", 3, false));
// ["#3399b3", "#668899", "#808080"]

// Generate 4 tones of green including base
console.log(generateTones("#228b22", 4));
// ["#228b22", "#4d804d", "#739173", "#999c99", "#b3b3b3"]

Implementation Details

Converts the input HEX to RGB using hexToRgb.
Transforms RGB into HSL via rgbToHsl.
Divides the saturation (s) by count to compute the decrement step.
Reduces saturation iteratively while clamping with clampPct to keep values valid.
Converts back to RGB with hslToRgb, then to HEX using rgbToHex.
Always outputs lowercase HEX strings.

Usage Notes

Tones gradually reduce saturation, shifting the color closer to gray.
The hue and lightness remain constant across the generated tones.
Complements generateShades (darker variants) and generateTints (lighter variants).