# Генератор каскада цветовых токенов Преобразует один основной hex-цвет в полную систему токенов с семантикой, CSS-переменными и JSON Style Dictionary > Каноническая страница: https://elysiatools.com/ru/tools/color-token-cascade-generator - **Категория:** Design - **Ключевые слова:** design token, цвет, css variables, style dictionary ## Обзор Введите основной hex-цвет, и инструмент построит брендовые, акцентные и при необходимости нейтральные шкалы для дизайн-системы. На выходе: - primary-50 ... primary-900 - accent-50 ... accent-900 - optional neutral-50 ... neutral-900 - семантические токены вроде text-muted и bg-canvas - CSS variables и JSON Style Dictionary ## Входные данные - **Основной Hex** (text): #3b82f6 - **Стратегия акцента** (select) - **Добавить нейтральную шкалу** (checkbox) ## Когда использовать - При создании новой дизайн-системы или UI-кита с нуля на основе базового цвета бренда. - Для быстрого подбора гармоничных акцентных цветов с использованием математических стратегий цветового круга. - При необходимости экспортировать цветовые константы в формат Style Dictionary для кроссплатформенной разработки. ## Как это работает - Введите основной HEX-код вашего бренда в соответствующее поле ввода. - Выберите стратегию генерации акцентного цвета: комплементарную, аналогичную или разделенную комплементарную. - Включите или отключите генерацию нейтральной шкалы для оформления поверхностей, границ и текста. - Получите готовые CSS-переменные и JSON-структуру для использования в коде вашего приложения. ## Сценарии использования - Разработка консистентной цветовой палитры для веб-приложения на основе корпоративного логотипа. - Автоматизация создания CSS-файлов с переменными для ускорения фронтенд-разработки. - Подготовка спецификаций цветов для передачи из дизайна в разработку через единый JSON-файл. ## Частые вопросы ### Какие форматы экспорта поддерживает инструмент? Инструмент генерирует CSS-переменные для веб-проектов и JSON-структуру, полностью совместимую со спецификацией Style Dictionary. ### Что такое семантические токены в выводе? Это токены, определяющие роль цвета (например, text-muted или bg-canvas), что упрощает поддержку темы и понимание кода. ### Как работает выбор стратегии акцента? Алгоритм вычисляет дополнительные оттенки на цветовом круге относительно основного цвета, обеспечивая визуальную гармонию. ### Можно ли использовать результат в Figma? Да, вы можете скопировать HEX-значения шкал или использовать сгенерированный JSON для импорта через плагины управления токенами. ### Зачем нужна нейтральная шкала? Она необходима для создания интерфейсной иерархии: теней, границ, фонов и различных состояний текста (от основного до отключенного). ## Связанные инструменты - [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков - [Построитель организационной схемы](https://elysiatools.com/ru/tools/org-chart-maker): Строит вертикальную организационную схему с именами и должностями из иерархического JSON - [Конвертер Оттенков Серого](https://elysiatools.com/ru/tools/color-grayscale-converter): Преобразование цветов в оттенки серого с различными методами и контролем интенсивности - [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown - [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную. - [Экспортёр Токенов Figma](https://elysiatools.com/ru/tools/figma-tokens-export): Вставьте JSON переменных Figma / Tokens Studio и экспортируйте в Tailwind, CSS-переменные shadcn, Style Dictionary или SCSS. Сохраняет токены цвета, отступов и шрифтов с выводом типов. - [Генератор PDF-плана тренировок](https://elysiatools.com/ru/tools/fitness-workout-pdf-generator): Создает печатный PDF-план тренировок из JSON или CSV с таблицами, ячейками прогресса и QR-кодами - [Генератор JSON-LD из CSV](https://elysiatools.com/ru/tools/json-ld-generator-from-csv): Преобразует строки CSV или Excel в Schema.org JSON-LD для Article, Product или Event с результатом, готовым к SEO-проверке ## Примеры - [Примеры цветовых кодов](https://elysiatools.com/ru/samples/color-code): Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации - [Примеры Расширенного Применения Grafana](https://elysiatools.com/ru/samples/grafana-samples): Комплексные примеры Grafana, охватывающие продвинутый дизайн дашбордов, конфигурацию оповещений, интеграцию источников данных и разработку плагинов - [Примеры QR-кодов](https://elysiatools.com/ru/samples/qrcode-samples): Примерные изображения QR-кодов для тестирования инструментов чтения и генерации QR-кодов - [Примеры Обработки Изображений Web Python](https://elysiatools.com/ru/samples/web-image-processing-python): Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата ## Связанные материалы - [Рабочий процесс для цветовой системы и CSS-эффектов](https://elysiatools.com/ru/hubs/design-generate): Izvlech palitru, postroit dostupnye cvetovye otnosheniya, sгенерirovat tokeny i primenit soglasovannye CSS-effekty k realnym sostoyaniyam interfeisa.