Какие форматы экспорта поддерживает инструмент?

Инструмент генерирует CSS-переменные для веб-проектов и JSON-структуру, полностью совместимую со спецификацией Style Dictionary.

Что такое семантические токены в выводе?

Это токены, определяющие роль цвета (например, text-muted или bg-canvas), что упрощает поддержку темы и понимание кода.

Как работает выбор стратегии акцента?

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

Можно ли использовать результат в Figma?

Да, вы можете скопировать HEX-значения шкал или использовать сгенерированный JSON для импорта через плагины управления токенами.

Зачем нужна нейтральная шкала?

Она необходима для создания интерфейсной иерархии: теней, границ, фонов и различных состояний текста (от основного до отключенного).

Elysia Tools

Навигация

Design

Генератор каскада цветовых токенов

Преобразует один основной hex-цвет в полную систему токенов с семантикой, CSS-переменными и JSON 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

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

1 примеров

Собрать полную лестницу токенов из одного брендового синего

Создает брендовые, акцентные, нейтральные и семантические токены для дизайн-системы.

<div>Primary scale</div>

Ввод

Заполните нужные поля и запустите инструмент.

3 параметров

СодержимоеВставьте или введите основные значения.1

Основной HextextОбязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.1

Стратегия акцентаselectНеобязательно

ПереключателиВключайте или отключайте дополнительные режимы.1

Добавить нейтральную шкалуcheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Генератор каскада цветовых токенов

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Создание палитры для корпоративного портала

2. Настройка Style Dictionary для кроссплатформенного приложения

FAQ

Примеры цветовых кодов

Примеры Расширенного Применения Grafana

Примеры QR-кодов

Примеры Обработки Изображений Web Python

Палитра из изображения в design-токены

Построитель организационной схемы

Конвертер Оттенков Серого

Генератор Data URI

Генераторы CSS-эффектов, палитр и дизайн-токенов

Инструменты JSON-обмена и перевода форматов

Инструменты для проверки, diff и преобразования JSON

Генераторы JSON-схем, mock-данных и API-fixture