Skip to content

Harmonies & Palette Generation

Color Harmonies

FunctionDescription
complement(color)Complementary color (180° rotation)
triadic(color)3 colors evenly spaced 120° apart
analogous(color, angle?)3 neighboring colors (default ±30°)
splitComplementary(color)Base + two colors at 150° and 210°
tetradic(color)4 colors evenly spaced 90° apart
ts
import { triadic, analogous, tetradic } from 'color-value-tools'

triadic('#6c3483') // ['#6c3483', '#34836c', '#83346c']
analogous('#6c3483', 45) // ['#833469', '#6c3483', '#3469…']
tetradic('#6c3483') // 4 colors

Palette Generation

FunctionDescription
colorShades(color, steps?)Light-to-dark HSL scale (default 9 steps)
monochromatic(color, steps?)Varying saturation at fixed lightness (default 5 steps)
tints(color, steps?)Mix toward white in Oklab (default 5 steps)
shades(color, steps?)Mix toward black in Oklab (default 5 steps)
tones(color, steps?, gray?)Mix toward gray in Oklab (default 5 steps, gray #808080)