VueCraft NPM

Тема

Форматирование, кэш и CLI ​

Форматирование ​

ФункцияОписание
toHslString(h, s, l, alpha?)Форматирует как hsl(...) или hsla(...)
toHwbString(H, W, B, alpha?)Форматирует как hwb(...) с опциональной альфой
toOklchString(color, alpha?)Конвертирует любой цвет в CSS-строку oklch(L C H)
toColorP3String(color, alpha?)Конвертирует любой цвет в CSS-строку color(display-p3 r g b)
ts
import { toOklchString, toColorP3String, toHwbString } from 'color-value-tools'

toOklchString('#3498db') // 'oklch(0.6 0.1175 234.77)'
toColorP3String('#3498db') // 'color(display-p3 0.2493 0.5875 0.8479)'
toHwbString(204, 20, 14) // 'hwb(204 20% 14%)'
toHwbString(204, 20, 14, 0.8) // 'hwb(204 20% 14% / 0.8)'

Управление кэшем ​

Полезно в циклах рендеринга, color-пикерах или в любом контексте с повторяющимися вызовами normalizeColor для одних и тех же значений.

ФункцияОписание
normalizeColorCached(input)Кэширующая версия normalizeColor для повторяющихся строковых вызовов
clearColorCache()Очищает кэш нормализации и сбрасывает счётчик попаданий
getCacheStats()Возвращает { size: number, hits: number }
enableCache()Повторно включает кэш (включён по умолчанию)
disableCache()Отключает кэширование (полезно в тестах)
ts
import { normalizeColorCached, getCacheStats, clearColorCache } from 'color-value-tools'

// Первый вызов — разбирается и кэшируется
normalizeColorCached('#3498db')

// Второй вызов — мгновенное попадание в кэш
normalizeColorCached('#3498db')

getCacheStats() // { size: 1, hits: 1 }
clearColorCache() // { size: 0, hits: 0 } сброс

Функции-генераторы ​

Полезны для больших палитр и покадровых анимаций без выделения полных массивов заранее.

ФункцияОписание
generateGradientColors*(start, end, steps, opts?)Возвращает по одному steps цветов от start до end. Те же опции mode / format, что у mixColors
generateTints*(color, steps, opts?)Возвращает по одному оттенки к белому в Oklab
generateShades*(color, steps, opts?)Возвращает по одному оттенки к чёрному в Oklab
ts
import { generateGradientColors, generateTints } from 'color-value-tools'

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

// Ленивый сбор
const first5 = [...generateTints('#e74c3c', 100)].slice(0, 5)

CLI ​

CLI cvt входит в состав пакета. Установите глобально или используйте через npx:

bash
npm install -g color-value-tools
bash
# Полная информация (команда по умолчанию)
cvt "#3498db"

# Все конвертации форматов — hex, rgb, hsl, hsv, hwb, lab, lch, oklab, oklch, cmyk
cvt "#3498db" convert

# Коэффициент контрастности и уровень WCAG
cvt "#3498db" contrast "#ffffff"

# Сгенерировать 7 оттенков
cvt "#3498db" shades 7

# Все гармонии — комплементарный, триадный, аналоговый, split-comp, тетрадный
cvt "#3498db" harmonies

# Ближайший именованный CSS-цвет
cvt "cornflowerblue" nearest

Принимает любой допустимый формат цвета: hex, rgb(), hsl(), oklch(), именованные цвета.

cvt "#3498db"
────────────────────────────────────────
  Type:              hex
  Hex:               #3498db
  RGB:               rgb(52, 152, 219)
  HSL:               hsl(204, 70%, 53%)
  HSV:               hsv(204, 76%, 86%)
  Nearest named:     cornflowerblue
  Best text on it:   #ffffff