Color Logic:
Семантика цвета
Постройте динамическую палитру, которая живет и дышит. Отказ от статических HEX-кодов в пользу логических связей и автоматической генерации тем.
Автоматическая генерация
Забудьте о ручном подборе оттенков для каждого состояния интерфейса. Наш алгоритм берет базовый "Seed Color" и вычисляет гармоничные вариации (Tints, Shades, Tones) на основе теории цвета Иттена.
Система автоматически адаптирует насыщенность и яркость для фона, текста и акцентов, гарантируя визуальную целостность при смене базового цвета бренда.
Принцип «Один корень»
Изменение одного CSS-переменной `--color-root` перестраивает 40+ производных значений интерфейса.
Контекстная адаптация
Цвета меняют поведение в зависимости от глубины слоя (elevation) и состояния (hover/active).
Строгий стандарт WCAG AAA
Красота не должна стоить читаемости. Встроенный движок проверки контрастности анализирует пары цветов в реальном времени.
Алгоритм проверки
Инструмент вычисляет отношение контрастности (Contrast Ratio) и подсвечивает нарушения стандарта WCAG 2.1 уровня AAA. Мы требуем коэффициент не ниже 7:1 для нормального текста.
Симуляция дальтонизма
Встроенные фильтры позволяют увидеть вашу палитру глазами пользователей с дейтеранопией, протанопией и тританопией. Никаких скрытых смыслов.
Авто-коррекция
Система предлагает «безопасные» альтернативы цвету, если выбранный оттенок не проходит тест на контрастность с фоном.
Экспорт в CSS Variables
Дизайн-система бесполезна, если она не работает в коде. Мы экспортируем чистые, оптимизированные файлы.
-
01.
Сгенерированный
variables.cssфайл с комментариями. - 02. JSON-конфигурация для токенов (Style Dictionary).
- 03. Плагин для автоматического синхронизации Figma и репозитория.
04. Галерея режимов
Семантические цвета сохраняют свою роль при переключении темы. Кнопка «Primary» остается заметной, фон «Surface» адаптируется к освещению.
Максимальная яркость, низкий контраст фонов. Идеально для дневного чтения и аналитики.
Сниженная нагрузка на глаза. Цвета смещаются к более насыщенным оттенкам для сохранения контраста.
Техническая документация API
Полный доступ к логике работы цветового движка. Мы открыли API для фронтенд-разработчиков, позволяя программно запрашивать токены.
Color API Reference
v2.4.0Функции
- getContrastRatio(color1, color2)
- generatePalette(seedColor, type)
- accessibilityCheck(themeObject)
- exportToCSS(scope)
Структура данных
Возвращает объект JSON с токенами, готовый для использования в React, Vue или Angular компонентах.
Управляйте цветом как данными
Присоединяйтесь к 500+ продуктовым командам, использующим Color Logic для создания доступных интерфейсов.
Скачать демо-пакет