Skip to content

color-value-tools

Универсальная библиотека для разбора, конвертации, изменения и анализа цветов во всех основных цветовых моделях — hex, RGB, HSL, HSV, HWB, Lab, LCH, Oklab, Oklch, CMYK, Display P3 — плюс CSS-переменные и именованные цвета. Без зависимостей.

Возможности

  • Универсальный парсерnormalizeColor() принимает hex (3/4/6/8 цифр), rgb() / rgba(), hsl() / hsla(), hwb(), oklch() / oklcha(), color(display-p3 ...), именованные CSS-цвета (все 148) и обычные объекты {r,g,b} / {h,s,l}
  • Конвертации — любой путь между hex, RGB, HSL, HSV, HWB, Lab, LCH, Oklab, Oklch, CMYK, Display P3; все точны при обратном преобразовании
  • Манипуляцииlighten, darken, saturate, desaturate, invertColor, grayscale, setAlpha, rotateHue, adjustHexBrightness
  • Смешивание и интерполяцияmixColors и interpolateColors в 6 цветовых пространствах с 4 режимами интерполяции оттенка; createColorScale по нескольким опорным цветам с произвольными позициями; midpointColor для перцептивной середины
  • Цветовые гармонииcomplement, triadic, analogous, splitComplementary, tetradic
  • Генерация палитрcolorShades, monochromatic, tints, shades, tones — все точны в Oklab там, где это применимо
  • WCAG-доступностьrelativeLuminance, contrastRatio, wcagLevel, bestTextColor, bestContrastColor, bestContrastPalette, isReadableOnBackground (сплошной, полупрозрачный и градиентный фон)
  • Симуляция дальтонизма — протанопия, дейтеранопия, тританопия по матрицам Vienot 1999
  • Перцептивное расстояние между цветамиcolorDeltaE, реализующая полную формулу CIEDE2000
  • CSS-форматированиеtoHslString, toHwbString, toOklchString, toColorP3String
  • Кэш — LRU-подобный normalizeColorCached; getCacheStats, clearColorCache, enableCache / disableCache
  • Функции-генераторыgenerateGradientColors*, generateTints*, generateShades* для ленивой итерации без предварительного выделения массивов
  • CLI (cvt) — исследуйте любой цвет из терминала: полная информация, все конвертации, WCAG-контраст, оттенки, гармонии, ближайший именованный цвет
  • Без зависимостей — никаких runtime-зависимостей; поставляется как tree-shakeable ESM + CommonJS

Установка

bash
npm install color-value-tools

Peer-зависимости не требуются.

Быстрый старт

ts
import {
  normalizeColor,
  mixColors,
  lighten,
  darken,
  saturate,
  complement,
  triadic,
  wcagLevel,
  bestTextColor,
  colorDeltaE,
  randomColor,
} from 'color-value-tools'

// Разобрать любой формат цвета
normalizeColor('#3498db')
// { type: 'hex', hex: '#3498db', r: 52, g: 152, b: 219, h: 204, s: 70, l: 53, v: 86, a: 1 }

// Изменить
lighten('#3498db', 15) // '#6ab4e8'
darken('#3498db', 15) // '#1a6da3'
saturate('#3498db', 20) // '#1a8fe8'

// Гармонии
complement('#3498db') // '#db6034'
triadic('#3498db') // ['#3498db', '#db3498', '#98db34']

// WCAG-доступность
wcagLevel('#ffffff', '#3498db') // 'AA'
bestTextColor('#3498db') // '#ffffff'

// Перцептивное расстояние (CIEDE2000)
colorDeltaE('#ff0000', '#fe0000') // ~0.9

// Случайный цвет
randomColor({ hRange: [200, 260], sRange: [60, 80] })

CommonJS:

js
const { normalizeColor, mixColors } = require('color-value-tools')