Function Signature

js

generateHueVariants(hex: string, steps?: number, includeBase?: boolean): string[]

Parameters

hex (string): The base HEX color string (e.g., #ff6600).
steps (number, optional): Number of divisions around the color wheel. Defaults to 12.
includeBase (boolean, optional): Whether to include the original color as the first element. Defaults to true.

Return Value

An array of HEX strings, each representing a hue-shifted variant of the base color, distributed evenly across the 360° color wheel.

js

generateHueVariants("#ff6600", 6);
// ["#ff6600", "#cc00ff", "#0033ff", "#00ffcc", "#33ff00", "#ffcc00"]

Examples

js

// Generate 4 evenly spaced hues (including base)
console.log(generateHueVariants("#00aaff", 4));
// ["#00aaff", "#aa00ff", "#ffaa00", "#55ff00"]

// Generate 3 hues without base
console.log(generateHueVariants("#228b22", 3, false));
// ["#228b22", "#8b228b", "#8b8b22"]

Implementation Details

Computes hue increments as 360 / steps degrees.
Uses the adjustHue function internally to rotate hue values.
The result array is always returned in lowercase HEX format.
Includes the base color at index 0 if includeBase = true.

Usage Notes

Useful for generating color wheels, analogous schemes, or categorical palettes.
The higher the steps, the more granular the hue distribution.
Pairs well with adjustHue for fine-grained control of hue shifts.