palettes

Available Functions

• complementary(hex) → Returns a 2-color palette: the base color and its opposite on the color wheel.
• analogous(hex, spread = 30) → Returns 3 colors: the base color and two adjacent hues, separated by spread degrees.
• triadic(hex) → Returns 3 colors evenly spaced at 120° intervals.
• tetradic(hex) → Returns 4 colors evenly spaced at 90° intervals.

Function Signatures

complementary(hex: string): string[]
analogous(hex: string, spread?: number): string[]
triadic(hex: string): string[]
tetradic(hex: string): string[]

Parameters

• hex (string): Base HEX color string.
• spread (number, optional): Degree offset for analogous scheme. Defaults to 30.

Return Values

Each function returns an array of HEX color strings, always normalized to lowercase.

Examples

// Complementary palette
console.log(complementary("#ff6600"));
// ["#ff6600", "#0066ff"]

// Analogous palette (spread 30°)
console.log(analogous("#00aaff"));
// ["#00ffaa", "#00aaff", "#0044ff"]

// Triadic palette
console.log(triadic("#ff0000"));
// ["#ff0000", "#00ff00", "#0000ff"]

// Tetradic palette
console.log(tetradic("#ff6600"));
// ["#ff6600", "#66ff00", "#00ffff", "#6600ff"]

Implementation Details

• All functions internally use adjustHue to rotate the base hue.
• The results are returned as lowercase HEX strings.
• Each palette corresponds to a well-known color harmony rule used in design and art.

Usage Notes

• complementary highlights strong contrast by using opposite hues.
• analogous provides harmony with adjacent hues.
• triadic gives balanced, vibrant palettes with equal spacing.
• tetradic creates diverse color sets with four evenly distributed hues.