Function Signature

js

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

Parameters

hex (string): The base HEX color string (e.g., #ff6600).
count (number, optional): The number of shades 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 darker shade of the input color.

js

generateShades("#ff6600", 5);
// ["#ff6600", "#e65c00", "#cc5200", "#b34700", "#993d00", "#803300"]

Examples

js

// Generate 3 shades of blue (excluding base)
console.log(generateShades("#00aaff", 3, false));
// ["#008fcc", "#007399", "#005866"]

// Generate 4 shades of green including base
console.log(generateShades("#228b22", 4));
// ["#228b22", "#1e7a1e", "#1a6a1a", "#155915", "#114911"]

Implementation Details

Converts the input HEX to RGB via hexToRgb.
Transforms RGB into HSL with rgbToHsl.
Divides the original lightness (l) by count to compute the decrement step.
Decreases lightness iteratively while clamping with clampPct to stay within valid range.
Converts back to RGB with hslToRgb and then to HEX using rgbToHex.

Usage Notes

The shades are evenly distributed based on lightness.
The function always darkens; for lighter variants, use generateTints.
The result is suitable for UI states, color palettes, or theming systems.