Цветовые токены дизайн-системы
Генерируйте полный набор цветовых токенов дизайн-системы из 7 базовых цветов — primary, secondary, accent, success, warning, error и info. Каждый цвет получает 9 автоматически выведенных вариантов (base, light, dark, hover, active, bg, border, text и muted) для светлой и тёмной темы. Экспорт в пользовательские свойства CSS или JSON. Вся обработка выполняется в вашем браузере — бесплатно, без регистрации.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Полная генерация токенов
Генерируйте готовые к продакшену дизайн-токены только из ваших базовых цветов.
- 7 семантических категорий: Primary, secondary, accent, success, warning, error и info — каждая с полным набором производных вариантов: base, light, dark, hover, active, bg, border, text и muted.
- Светлая и тёмная тема: Каждый цветовой токен автоматически адаптируется под тёмную тему с помощью перцептивной инверсии светлоты, сохраняющей читаемость и визуальную иерархию в тёмных темах.
- Умные варианты: Варианты hover, active, bg, border и текст-на-цвете генерируются автоматически с помощью смешивания с учётом яркости — без ручной подгонки для контраста, соответствующего WCAG.
- Экспорт CSS + JSON: Копируйте готовые пользовательские свойства CSS для селекторов :root и [data-theme="dark"] или экспортируйте полный JSON-файл токенов для интеграции с дизайнерскими инструментами и сборочными конвейерами.
Распространённые сценарии использования
От дизайн-систем до тёмной темы — цветовые токены обеспечивают единообразие интерфейсов.
- Разработка дизайн-системы: Генерируйте согласованные цветовые токены для библиотеки компонентов или дизайн-системы. Используйте экспортированные CSS-переменные во всех компонентах как единый источник истины.
- Передача дизайна: Преобразуйте дизайн-токены Figma или Sketch в готовые для разработчиков CSS-переменные и JSON-файлы. Исключите ошибки ручного сопоставления цветов между дизайном и разработкой.
- Темизация и white-label: Создавайте несколько наборов токенов для разных брендов или тем. Каждый набор автоматически получает согласованные светлые/тёмные варианты — идеально для мультитенантных SaaS-продуктов.
- Реализация тёмной темы: Хватит угадывать цвета тёмной темы. Введите светлую палитру один раз и мгновенно получите токены тёмной темы с учётом WCAG без вычислений на лету.
- Миграция фреймворков: При переходе между CSS-фреймворками или добавлении дизайн-системы в середине проекта генерируйте согласованные цветовые токены, работающие с Tailwind, обычным CSS или CSS-in-JS.
- Интернет-магазины и маркетинговые сайты: Поддерживайте единообразие бренда на лендингах, в каталогах товаров и процессах оформления заказа с помощью одного набора семантических цветовых токенов, общего для всех страниц.
О цветовых токенах дизайн-системы
Разберитесь, как работают цветовые токены и как применять их в своих проектах.
- Что такое цветовые токены?: Цветовые токены дизайн-системы — это семантические имена переменных, которые абстрагируют жёстко заданные значения цветов в осмысленные, переиспользуемые идентификаторы. Вместо прямого использования HEX-кодов — их трудно поддерживать и невозможно тематизировать — вы используете имена вроде --color-primary-base или --color-error-hover. Это обеспечивает единообразное оформление компонентов и мгновенное переключение темы.
- Как генерируются токены светлой темы: Для каждого базового цвета мы выводим 9 вариантов токена: base (исходный), light (85% смеси с белым), dark (75% смеси с чёрным), hover (на 15% темнее), active (на 30% темнее), bg (95% смеси с белым), border (50% смеси с белым), text (чёрный или белый для контраста) и muted (сниженная насыщенность). Вариант text использует яркость WCAG для читаемого контраста с базовым цветом.
- Как адаптируются токены тёмной темы: Токены тёмной темы используют алгоритм перцептивной инверсии светлоты. Светлые базовые цвета смещаются к тёмному краю спектра с сохранением соотношений оттенка и насыщенности. Результат сохраняет визуальную иерархию исходной палитры и комфортен для просмотра на тёмном фоне.
- Использование экспортированных токенов: Вывод CSS включает блоки :root и [data-theme="dark"] со всеми переменными токенов, готовыми к вставке в проект. Вывод JSON использует плоский формат ключ-значение, совместимый с паттернами спецификации Design Token. Перетащите его в дизайнерский инструмент или импортируйте скриптом сборки для полностью автоматизированного процесса.
Часто задаваемые вопросы
Цветовые токены — это семантические переменные, представляющие цвета в дизайн-системе. Вместо сырых HEX-кодов повсюду вы используете имена вроде --color-primary или --color-error-bg. Это упрощает глобальное обновление цветов, реализацию тёмной темы и поддержание согласованности между компонентами. Наш бесплатный онлайн-генератор создаёт полный набор токенов из 7 базовых цветов.
Каждый базовый цвет создаёт 9 вариантов: base (исходный цвет), light (смешан с белым), dark (смешан с чёрным), hover (чуть темнее), active (темнее для нажатых состояний), bg (очень светлый для фонов), border (приглушённый для границ), text (чёрный или белый для читаемого контраста) и muted (сниженная насыщенность). Генерируются варианты и для светлой, и для тёмной темы.
Адаптация под тёмную тему использует алгоритм перцептивной инверсии, который отображает значения светлоты светлой темы на тёмные эквиваленты через кривую, сохраняющую относительные соотношения контраста. Насыщенность в тёмной теме слегка снижается, так как ярко-насыщенные цвета могут быть некомфортны для чтения на тёмном фоне.
Да. Вариант text каждого токена использует расчёты яркости WCAG для автоматического выбора чёрного или белого текста, гарантируя контрастность не менее 7:1 к базовому цвету. Это соответствует требованиям WCAG AAA для обычного текста — без ручной подгонки.
Два формата: пользовательские свойства CSS (с отдельными блоками :root и [data-theme="dark"], готовыми к вставке в проект) и JSON (плоский формат ключ-значение, совместимый с паттернами спецификации Design Token и инструментами вроде Style Dictionary).
Имена токенов следуют согласованному шаблону --color-{категория}-{вариант}. После копирования их можно переименовать простой заменой «найти и заменить» — или изменить вывод CSS/JSON прямо в кодовой базе.
Да, этот генератор цветовых токенов дизайн-системы на 100% бесплатный, без регистрации, премиум-уровня и лимитов использования. Вся обработка выполняется в вашем браузере.
7 категорий (primary, secondary, accent, success, warning, error, info) покрывают большинство потребностей дизайн-системы. Если нужны дополнительные категории верхнего уровня вроде surface, background, text или border, можно запустить инструмент несколько раз с разными базовыми цветами и объединить результаты.