Генератор UI токенов
Выберите базовый цвет и автоматически получите полный набор UI-токенов: цветовые шкалы, семантические цвета и готовые CSS переменные.
Базовый цвет
Выберите основной цвет для генерации всех UI-токенов. Этот цвет будет использоваться как основа для создания цветовой шкалы и семантических цветов.
Превью
Preview
Primary Button
Card
Card Title
This card demonstrates surface and border colors from the generated tokens.
Semantic Colors
Backgrounds
Background
Background Muted
Все токены
Primary Tokens
--color-primary
#3C83F6
--color-primary-hover
#0563FA
--color-primary-active
#004ECC
--color-primary-muted
#DCE3EF
--color-primary-foreground
#FFFFFF
Primary Scale
50
#EFF1F6
100
#DCE3EF
200
#C7D5EA
300
#9CB7E2
400
#6D98DF
500
#3C83F6
600
#0563FA
700
#004ECC
800
#003B99
900
#002766
Background Tokens
--color-bg
#FAFAFA
--color-bg-muted
#F2F2F2
--color-surface
#FFFFFF
--color-surface-hover
#FAFAFA
--color-border
#D9D9D9
Semantic Tokens
--color-success
#F63C83
--color-warning
#AF3CF6
--color-danger
#3CF6AF
Export
:root {
/* Primary Colors */
--color-primary: #3C83F6;
--color-primary-hover: #0563FA;
--color-primary-active: #004ECC;
--color-primary-muted: #DCE3EF;
--color-primary-foreground: #FFFFFF;
/* Primary Scale */
--color-primary-50: #EFF1F6;
--color-primary-100: #DCE3EF;
--color-primary-200: #C7D5EA;
--color-primary-300: #9CB7E2;
--color-primary-400: #6D98DF;
--color-primary-500: #3C83F6;
--color-primary-600: #0563FA;
--color-primary-700: #004ECC;
--color-primary-800: #003B99;
--color-primary-900: #002766;
/* Background Colors */
--color-bg: #FAFAFA;
--color-bg-muted: #F2F2F2;
--color-surface: #FFFFFF;
--color-surface-hover: #FAFAFA;
--color-border: #D9D9D9;
/* Semantic Colors */
--color-success: #F63C83;
--color-warning: #AF3CF6;
--color-danger: #3CF6AF;
}
Похожие инструменты
Откройте для себя другие полезные инструменты для работы с цветами
Полная инструкция по использованию генератора UI токенов
Генератор UI токенов — это мощный онлайн-инструмент для создания полного набора дизайн-токенов из одного базового цвета. С помощью этого сервиса вы можете автоматически сгенерировать цветовые шкалы, семантические цвета и готовые CSS переменные для вашей дизайн-системы.
Шаг 1: Выбор базового цвета
Начните с выбора базового цвета для вашей дизайн-системы. Используйте цветовой пикер или введите HEX код вручную. Этот цвет будет использоваться как основа для генерации всех остальных токенов.
Шаг 2: Генерация цветовой шкалы
Инструмент автоматически создаст цветовую шкалу из 10 оттенков (от 50 до 900) на основе выбранного базового цвета. Каждый оттенок оптимизирован для использования в различных компонентах интерфейса.
Шаг 3: Просмотр основных токенов
Проверьте сгенерированные основные токены: primary (базовый, hover, active, muted), background (фон, поверхность, границы) и semantic (success, warning, danger). Все токены автоматически настроены для оптимальной визуальной иерархии.
Шаг 4: Превью токенов
Используйте секцию превью для визуальной проверки токенов на реальных UI-компонентах: кнопках, карточках, тексте. Это поможет убедиться, что все цвета работают гармонично вместе.
Шаг 5: Экспорт токенов
Выберите формат экспорта: CSS Variables для использования в CSS, Tailwind Config для интеграции с Tailwind CSS, или JSON для использования в дизайн-системах. Скопируйте код одним кликом.
Шаг 6: Интеграция в проект
Скопируйте экспортированный код и вставьте его в ваш проект. CSS переменные можно добавить в :root, Tailwind конфиг — в tailwind.config.js, а JSON токены — в вашу дизайн-систему.
Как использовать генератор UI токенов: пошаговое руководство
Как создать дизайн токены из одного цвета
Выберите базовый цвет с помощью цветового пикера или введите HEX код. Инструмент автоматически сгенерирует полный набор токенов: цветовую шкалу, основные цвета, фоновые цвета и семантические цвета.
Как сгенерировать цветовую шкалу
После выбора базового цвета инструмент автоматически создаст шкалу из 10 оттенков (50-900). Каждый оттенок оптимизирован для использования в различных состояниях компонентов: от самых светлых (50) до самых темных (900).
Как экспортировать токены в CSS переменные
Перейдите в секцию 'Экспорт', выберите вкладку 'CSS Variables' и нажмите 'Copy'. Скопированный код содержит все токены в формате CSS переменных, готовых к использованию в вашем проекте.
Как экспортировать токены для Tailwind CSS
В секции 'Экспорт' выберите вкладку 'Tailwind Config'. Скопируйте код и добавьте его в файл tailwind.config.js в секцию theme.extend.colors. Токены будут доступны как классы Tailwind.
Как создать семантические цвета
Инструмент автоматически генерирует семантические цвета (success, warning, danger) на основе базового цвета путем корректировки оттенка. Эти цвета идеально подходят для уведомлений, алертов и статусных индикаторов.
Как использовать токены в дизайн-системе
Экспортируйте токены в JSON формате для использования в дизайн-системах. JSON содержит структурированные данные о всех цветах, которые можно импортировать в инструменты дизайна (Figma, Sketch) или использовать в коде.
Часто задаваемые вопросы о генераторе UI токенов
Что такое UI токены?
UI токены — это стандартизированные значения дизайна (цвета, отступы, размеры), которые используются в дизайн-системах для обеспечения консистентности интерфейса. Токены позволяют легко поддерживать единый стиль во всем приложении.
Как работает генератор токенов?
Генератор принимает один базовый цвет и автоматически создает полный набор токенов: цветовую шкалу (10 оттенков), основные цвета (primary, hover, active), фоновые цвета и семантические цвета (success, warning, danger). Все токены оптимизированы для использования в UI.
Какие форматы экспорта поддерживаются?
Генератор поддерживает три формата экспорта: CSS Variables (для использования в CSS), Tailwind Config (для интеграции с Tailwind CSS) и JSON (для использования в дизайн-системах и инструментах дизайна).
Как использовать экспортированные CSS переменные?
Скопируйте код из секции 'CSS Variables' и добавьте его в файл стилей (например, globals.css) в блок :root. После этого вы сможете использовать переменные в CSS: var(--color-primary), var(--color-primary-hover) и т.д.
Можно ли настроить цветовую шкалу?
Цветовая шкала генерируется автоматически на основе базового цвета с использованием алгоритмов HSL для обеспечения визуальной согласованности. Изменение базового цвета автоматически обновит всю шкалу.
Что такое семантические цвета?
Семантические цвета — это цвета с определенным значением: success (успех, зеленый), warning (предупреждение, желтый/оранжевый), danger (опасность, красный). Они генерируются автоматически на основе базового цвета путем корректировки оттенка на цветовом круге.