VueCraft NPM

Гармонии и генерация палитр ​

Цветовые гармонии ​

Все гармонии реализованы как поворот оттенка нормализованного hex-значения — насыщенность и светлота не меняются.

complement(color) ​

string — цвет #rrggbb

Комплементарный цвет — поворот оттенка на 180°.

triadic(color) ​

[string, string, string]

3 цвета, равномерно разнесённых на 120° по цветовому кругу.

analogous(color, angle?) ​

[string, string, string]

3 соседних цвета — исходный плюс повёрнутые на -angle и +angle. angle по умолчанию 30.

splitComplementary(color) ​

[string, string, string]

Базовый цвет плюс два цвета на 150° и 210° — более мягкая альтернатива прямому комплементу.

tetradic(color) ​

[string, string, string, string]

4 цвета, равномерно разнесённых на 90° по цветовому кругу.

ts
import { triadic, analogous, tetradic } from 'color-value-tools'

triadic('#6c3483') // ['#6c3483', '#836d34', '#34836d']
analogous('#6c3483', 45) // ['#343783', '#6c3483', '#83345e']
tetradic('#6c3483') // ['#6c3483', '#834534', '#4b8334', '#347283']

Генерация палитр ​

colorShades(color, steps?) ​

string[]

Шкала от светлого к тёмному — светлота HSL проходит от 100 до 0 при неизменном оттенке/насыщенности исходного цвета. steps по умолчанию 9.

monochromatic(color, steps?) ​

string[]

Шкала при фиксированной светлоте с изменяющейся насыщенностью. steps по умолчанию 5.

tints(color, steps?) ​

string[]

Смешивает цвет к белому в Oklab — эквивалент interpolateColors(color, '#ffffff', steps, { space: 'oklab' }). steps по умолчанию 5.

shades(color, steps?) ​

string[]

Смешивает цвет к чёрному в Oklab. steps по умолчанию 5.

tones(color, steps?, gray?) ​

string[]

Смешивает цвет к выбранному серому в Oklab. steps по умолчанию 5; gray по умолчанию '#808080'.

randomColor(options?) ​

ts
function randomColor(options?: {
  hRange?: [number, number] // по умолчанию: [0, 360]
  sRange?: [number, number] // по умолчанию: [40, 90]
  lRange?: [number, number] // по умолчанию: [30, 70]
}): string

string — цвет #rrggbb

Выбирает равномерно случайное значение внутри каждого из трёх диапазонов HSL (options задаёт независимые границы min/max для оттенка, насыщенности и светлоты). Каждый вызов возвращает разный цвет — полезно для демо-данных, аватаров или палитр графиков, но не для детерминированного вывода.

ts
import { randomColor } from 'color-value-tools'

randomColor() // например '#2a9d8a' — где угодно в диапазонах по умолчанию
randomColor({ hRange: [200, 260], sRange: [60, 80], lRange: [40, 60] }) // например '#2b64bf' — только синие

Ленивая генерация ​

generateTints(color, steps, opts?) ​

Generator<string>

Ленивый, генераторный эквивалент tints — выдаёт по одному цвету за раз вместо построения всего массива заранее. opts: { format?: 'hex' | 'rgb' | 'hsl' }.

generateShades(color, steps, opts?) ​

Generator<string>

Ленивый, генераторный эквивалент shades. Та же форма сигнатуры, что и у generateTints.

ts
import { generateTints } from 'color-value-tools'

// Останавливаемся раньше, не вычисляя оставшиеся шаги
const first5: string[] = []
for (const tint of generateTints('#e74c3c', 100)) {
  first5.push(tint)
  if (first5.length === 5) break
}