VueCraft NPM

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

Манипуляции ​

lighten(color, amount) ​

string — цвет #rrggbb

Увеличивает светлоту HSL на amount (0–100), с ограничением сверху в 100.

darken(color, amount) ​

string — цвет #rrggbb

Уменьшает светлоту HSL на amount (0–100), с ограничением снизу в 0.

saturate(color, amount) ​

string — цвет #rrggbb

Увеличивает насыщенность HSL на amount (0–100), с ограничением сверху в 100.

desaturate(color, amount) ​

string — цвет #rrggbb

Уменьшает насыщенность HSL на amount (0–100), с ограничением снизу в 0.

setAlpha(color, alpha) ​

string — строка rgba(r, g, b, alpha)

Устанавливает альфа-канал (0–1) любого цвета, независимо от исходного формата.

getAlpha(color) ​

number — 0–1

Читает альфа-канал любого цвета; возвращает 1, если у цвета нет явной альфы.

invertColor(color) ​

string — цвет #rrggbb

Инвертирует все три канала RGB (255 - канал).

grayscale(color) ​

string — цвет #rrggbb

Конвертирует в оттенки серого по перцептивным весам ITU-R BT.709 (0.2126×r + 0.7152×g + 0.0722×b).

rotateHue(hex, degrees) ​

string — цвет #rrggbb

Поворачивает оттенок на заданное число градусов (поддерживает отрицательные значения, оборачивается в диапазон 0–360), оставляя насыщенность и светлоту без изменений.

adjustHexBrightness(hex, offsetPercent) ​

string — цвет #rrggbb

Осветляет (положительный offsetPercent, от -100 до 100) или затемняет (отрицательный) каждый канал RGB, линейно смешивая его в сторону 255 или 0.

mixColors(c1, c2, t, opts?) ​

ts
function mixColors(
  c1: string,
  c2: string,
  t: number,
  opts?: {
    mode?: 'rgb' | 'hsl' | 'lab' | 'lch' | 'oklab' | 'oklch' // по умолчанию: 'rgb'
    format?: 'hex' | 'rgb' | 'rgba' | 'hsl' // по умолчанию: 'hex'
    hueInterpolation?: 'shorter' | 'longer' | 'increasing' | 'decreasing' // по умолчанию: 'shorter'
  },
): string

string — отформатировано согласно opts.format

Интерполирует между двумя цветами (c1, c2) в заданном цветовом пространстве, в позиции t (0–1) между ними. opts задаёт режим смешивания, формат вывода и (для режимов на основе оттенка) направление интерполяции по цветовому кругу.

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

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

// Перцептивно равномерное смешивание в 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?) ​

string[] — steps цветов от c1 до c2, равномерно распределённых по t

Версия mixColors, возвращающая массив (opts — та же форма mode/format/hueInterpolation) — см. generateGradientColors ниже для ленивого, генераторного эквивалента.

createColorScale(anchors, steps, opts?) ​

string[] — шкала из steps цветов, вычисленная по всем опорным точкам

Генерирует многоточечную шкалу-градиент — полезно для всего, что выходит за рамки простого смешивания двух цветов. anchors принимает либо обычные цвета (равномерно распределённые), либо пары { color, position } для явных позиций (0–1); opts: { space?: 'rgb' | 'hsl' | 'oklab' | 'oklch'; format?: 'hex' | 'rgb' | 'hsl' } — более узкий набор пространств, чем у mixColors (без lab/lch).

ts
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' },
)

midpointColor(c1, c2, opts?) ​

string — цвет #rrggbb

Сокращение для mixColors(c1, c2, 0.5, { mode: opts.space }) — перцептивная середина между двумя цветами. opts: { space?: 'lab' | 'lch' | 'oklab' | 'oklch' }, по умолчанию 'oklab' — эта опция принимает только 4 перцептивных пространства, не rgb/hsl.

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

generateGradientColors(start, end, steps, opts?) ​

Generator<string>

Ленивый, генераторный эквивалент interpolateColors — выдаёт по одному цвету за раз вместо построения всего массива заранее. Полезно при большом числе шагов или покадровой обработке. Принимает те же start/end/steps, что и interpolateColors; opts: { mode?: 'rgb' | 'hsl' | 'oklab' | 'oklch'; format?: 'hex' | 'rgb' | 'hsl' } — более узкий набор опций, чем у mixColors/interpolateColors (без режимов lab/lch, без формата rgba, без hueInterpolation).

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

// Обрабатываем по одному цвету за раз — без промежуточного массива
for (const color of generateGradientColors('#ff0000', '#0000ff', 1000, { mode: 'oklch' })) {
  renderPixel(color)
}