Color Value Tools
Универсальная библиотека для разбора, конвертации и анализа цветов во всех основных цветовых моделях — hex, RGB, HSL, HSV, HWB, Lab, LCH, Oklab, Oklch, CMYK, Display P3. Без зависимостей.
Когда это пригодится
Цвет в проекте перестаёт быть разовым выбором акцента в дизайнере, как только его нужно конвертировать, сравнивать и проверять программно — именно для этого нужен Color Value Tools.
Дизайн-система на кастомных токенах
Вместо того чтобы вручную подбирать каждый оттенок и тень в Figma, генерируете всю шкалу от базового цвета одной функцией — и она остаётся математически ровной, а не «на глаз».
Тема переключается на лету
Когда фон меняется динамически (тёмная тема, брендинг под клиента, палитра пользователя), нужно каждый раз пересчитывать контрастный цвет текста и проверять его по WCAG, а не захардкоживать пары заранее.
Цвет приходит из разных источников
API отдаёт hex, дизайнер прислал HSL, в CSS-переменной лежит цвет в формате oklch — нужно привести всё к одному формату, не переписывая парсер под каждый случай.
Accessibility-аудит интерфейса
Нужно быстро показать, как палитра выглядит при протанопии или дейтеранопии, не устанавливая отдельное расширение браузера.
Коротко о главном
Универсальный парсер и конвертация
Свободно разбирайте любой цветовой формат: hex, RGB, HSL, HSV, HWB, Lab, LCH, Oklab, Oklch, CMYK, Display P3 и даже CSS-переменные. Все конвертации между моделями выполняются с высокой точностью и без потерь при обратном преобразовании. Это основа для всех дальнейших операций с цветом.
Манипуляции и интеллектуальная интерполяция
Осветляйте, затемняйте, насыщайте, обесцвечивайте, инвертируйте или вращайте тон любого цвета. Смешивайте цвета и создавайте плавные переходы в шести цветовых пространствах (RGB, HSL, Lab, LCH, Oklab, Oklch) с четырьмя режимами интерполяции оттенка. Генерируйте многоступенчатые шкалы по опорным точкам.
Гармонии, палитры и генераторы
Мгновенно создавайте проверенные цветовые схемы: комплементарные, триадные, аналогичные, тетрадные и другие. Строите палитры оттенков, теней и тонов с использованием Oklab для максимальной визуальной равномерности. Для больших данных используйте функции-генераторы, которые выдают цвета лениво, экономя память.
Доступность и симуляция цветовой слепоты
Проверяйте контраст по WCAG, определяйте уровень соответствия (AAA/AA) и подбирайте идеальный цвет текста для любого фона, включая полупрозрачные и градиентные. Анализируйте, как ваши цвета воспринимаются людьми с тремя типами дальтонизма (протанопия, дейтеранопия, тританопия), используя матрицы Vienot.
CLI, кэш и нулевые зависимости
Используйте встроенный CLI для быстрого анализа цветов из терминала. Ускоряйте повторяющиеся операции в циклах рендеринга с помощью встроенного LRU-кэша для функции нормализации. Весь функционал доступен с нулевыми внешними зависимостями, поставляется в ESM и CommonJS форматах с полной поддержкой TypeScript.
Перцептивное расстояние и случайные цвета
Измеряйте, насколько два цвета отличаются друг от друга, по формуле CIEDE2000 — она точнее учитывает восприятие глаза, чем евклидово расстояние в RGB. Генерируйте случайные цвета с ограничениями по оттенку, светлоте и насыщенности и сразу форматируйте результат в нужную CSS-строку.
Как это работает
Как ваша палитра выглядит для дальтоника
simulateColorBlindness применяет матрицы Vienot 1999 к линеаризованному RGB — можно проверить контраст интерфейса ещё до релиза, а не гадать по чек-листу.
import { simulateColorBlindness } from 'color-value-tools'
simulateColorBlindness('#e74c3c', 'deuteranopia') // '#9a7b00'
simulateColorBlindness('#3498db', 'protanopia') // '#5282db'
// Vienot 1999 matrices applied to linearized RGB — good enough to check a
// palette before it ships, not just guess from a colorblind-safe checklist.Гармония и шкала оттенков из одного цвета
triadic строит три цвета через 120°, colorShades — шкалу от светлого к тёмному из девяти шагов. Один базовый цвет — и готовая согласованная палитра, без ручного подбора hex-значений.
import { triadic, colorShades } from 'color-value-tools'
triadic('#6c3483') // ['#6c3483', '#34836c', '#83346c'] — evenly spaced 120°
const shades = colorShades('#6c3483', 9) // light-to-dark HSL scale, 9 steps
// One base color in, a coordinated palette out — no manual hue-rotation
// math, no hand-picked hex values.
