Function Signature

js

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

Parameters

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

js

generateTints("#ff6600", 5);
// ["#ff6600", "#ff8533", "#ffa366", "#ffc299", "#ffe0cc", "#ffffff"]

Examples

js

// Generate 3 tints of blue (excluding base)
console.log(generateTints("#00aaff", 3, false));
// ["#33bbff", "#80d4ff", "#ccecff"]

// Generate 4 tints of green including base
console.log(generateTints("#228b22", 4));
// ["#228b22", "#55a955", "#80c080", "#b3d6b3", "#e6ebe6"]

Implementation Details

Converts the input HEX to RGB via hexToRgb.
Transforms RGB into HSL with rgbToHsl.
Divides the available lightness range (100 - l) by count to compute the increment step.
Increases 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 tints are evenly distributed based on lightness.
The function always lightens; for darker variants, use generateShades.
The result is suitable for UI states, color palettes, or theming systems.