Skip to content

Введение

UrColor — универсальная headless-библиотека компонентов выбора цвета. Она даёт примитивы без стилей, которые можно свободно комбинировать, оставляя оформление и поведение полностью за вами.

Пакеты

Сплошные стрелки — обязательные зависимости, пунктирные — подключаемые.

  • @urcolor/core — библиотека CSS Color 4 без зависимостей (разбор, конвертация, сериализация, гамут-маппинг, интерполяция).
  • @urcolor/shared — слой поведения, не зависящий от фреймворка: перетаскивание, раскладки клавиш, модели каналов, WebGL-генераторы градиентов на canvas для цветовых областей и слайдеров, а также data-атрибуты, общие для всех биндингов.
  • @urcolor/relative — подключаемый синтаксис относительных цветов CSS Color 5 (rgb(from red r g b)) для @urcolor/core. См. Относительные цвета.
  • @urcolor/i18n — многоязычные названия цветов и подписи каналов. См. Названия цветов.
  • @urcolor/vue — headless-компоненты и composables для Vue 3.
  • @urcolor/react — те же примитивы для React.
  • @urcolor/svelte — те же примитивы для Svelte 5: компоненты и хуки на рунах.
  • @urcolor/angular — те же примитивы для Angular: директивы и signal-хранилища.

Все четыре биндинга дают одни и те же восемь семейств компонентов. Каждый рецепт в разделе Рецепты показывает код Vue, React, Svelte и Angular рядом — выберите вкладку своего стека.

Философия

UrColor вдохновлён Radix UI, Reka UI и React Spectrum: библиотека берёт на себя логику и доступность, а оформление остаётся за вами. Компонент цветовой области поддерживает любые сочетания двух каналов (например, Hue+Saturation или Hue+Chroma в LCH) и рисует их через WebGL — плавно и с ускорением на GPU.