Манипуляции и интерполяция

Манипуляции

Функция	Описание
lighten(color, amount)	Увеличивает светлоту HSL на amount (0–100)
darken(color, amount)	Уменьшает светлоту HSL на amount (0–100)
saturate(color, amount)	Увеличивает насыщенность HSL на amount (0–100)
desaturate(color, amount)	Уменьшает насыщенность HSL на amount (0–100)
setAlpha(color, alpha)	Возвращает rgba(...) с заданной альфой (0–1)
getAlpha(color)	Возвращает значение альфа-канала (0–1)
invertColor(color)	Инвертирует все три канала RGB
grayscale(color)	Конвертирует в оттенки серого по перцептивным весам ITU-R BT.709
rotateHue(hex, degrees)	Поворачивает оттенок на градусы; поддерживает отрицательные значения
adjustHexBrightness(hex, offsetPercent)	Осветляет (положительное значение) или затемняет (отрицательное) на процент
mixColors(c1, c2, t, opts?)	Интерполирует между двумя цветами. t = 0–1. mode: 'rgb' | 'hsl' | 'lab' | 'lch' | 'oklab' | 'oklch'. hueInterpolation: 'shorter' | 'longer' | 'increasing' | 'decreasing'

Пример mixColors

import { mixColors } from 'color-value-tools'

// RGB-смешивание в середине
mixColors('#e74c3c', '#3498db', 0.5)
// → '#8dc6bc'

// Перцептивно равномерное смешивание в Oklab
mixColors('#e74c3c', '#3498db', 0.5, { mode: 'oklab', format: 'hex' })

// HSL с «длинным» путём по оттенку
mixColors('#e74c3c', '#3498db', 0.5, { mode: 'hsl', hueInterpolation: 'longer' })

// Получить вывод в виде строки rgba
mixColors('#ff0000', '#0000ff', 0.25, { mode: 'lab', format: 'rgba' })

Интерполяция и шкалы

Функция	Описание
interpolateColors(c1, c2, steps, opts?)	Возвращает массив из steps цветов от c1 до c2. Те же опции space / format / hueInterpolation, что у mixColors
createColorScale(anchors, steps, opts?)	Генерирует шкалу из steps цветов по нескольким опорным цветам с опциональными позициями (0–1)
midpointColor(c1, c2, opts?)	Перцептивная середина между двумя цветами (пространство по умолчанию: 'oklab')

createColorScale — многоточечный градиент

import { createColorScale } from 'color-value-tools'

// Равномерно распределённые опорные точки
createColorScale(['#ff0000', '#ffff00', '#00ff00'], 9)

// С явными позициями
createColorScale(
  [
    { color: '#1a1a2e', position: 0 },
    { color: '#e94560', position: 0.4 },
    { color: '#f5a623', position: 1 },
  ],
  12,
  { space: 'oklch' },
)