Генератор токенов дизайна CSS
Создайте полную палитру цветов OKLCH 50-950 плюс семантические пользовательские свойства CSS — основной, поверхность, граница, кольцо и другие, с опциональным вариантом тёмного режима — из одного цвета hex вашего бренда.
Ввод
Выберите цвет или введите значение HEX напрямую.
Используется в качестве ключа палитры, например --цвет-бренд-500.
Современный выводит значения oklch(); Hex выводит классический #rrggbb.
Добавляет второй блок с переопределениями семантических токенов для тёмного режима.
Масштабирует насыщенность палитры. 100 сохраняет хрому вашего цвета бренда.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-design-token-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"brandColor": "#464aff",
"tokenName": "brand",
"colorFormat": "oklch",
"includeDarkMode": "true",
"darkSelector": ".dark",
"chromaBoost": "100"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-design-token-generator` tool (CSS Design Token Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-design-token-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор токенов дизайна CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое токены дизайна?
Токены дизайна — это именованные, многократно используемые значения — цвета, отступы, радиусы, размеры шрифтов — которые составляют систему дизайна. Вместо жёсткого кодирования #3b3ff0 в двадцати различных компонентах вы определяете --цвет-основной один раз и ссылаетесь на него везде. Измените значение токена, и каждый компонент, который его использует, обновится вместе. Токены — это то, что позволяет системе дизайна оставаться согласованной по мере её развития, и то, что позволяет одному переключателю тёмного режима перекрасить весь продукт.
Почему CSS пользовательские свойства — распространённый целевой формат
Токены дизайна можно экспортировать во множество форматов — JSON, объект JS/TS, переменные Sass — но пользовательские свойства CSS (--мой-токен: значение;) имеют отличительное преимущество: они являются встроенными в браузер, разрешаются при отрисовке и автоматически каскадируют и переопределяются селектором. Это то, что делает возможной тему с обычным CSS: определите ваши токены один раз в :root, затем переопределите подмножество из них в .тёмный (или @media (prefers-color-scheme: тёмный)), и каждый компонент, который потребляет var(--цвет-основной), будет перекрашен без какого-либо JavaScript или перестройки. Этот инструмент целевой на пользовательские свойства CSS специально потому, что это поведение каскада и переопределения — именно то, что нужно системе цветов.
Как этот инструмент строит палитру
Начиная с одного цвета hex бренда, инструмент интерполирует через OKLCH — перцептивно равномерное цветовое пространство — чтобы создать 11-ступенчатую шкалу (50 до 950), ту же форму, используемую в палитре Tailwind по умолчанию. Поскольку ступени светлоты OKLCH перцептивно равномерны, каждая ступень выглядит как последовательный прыжок в яркости, а не неравномерные прыжки, которые вы получаете при интерполяции сырого RGB или HSL. Каждая созданная ступень также фиксируется обратно в гамут sRGB, поэтому она всегда отображается как действительный, отображаемый цвет, даже для высоконасыщенных цветов бренда.
Поверх сырой палитры инструмент сопоставляет фиксированный набор семантических ролей — --цвет-основной, --цвет-поверхность, --цвет-граница, --цвет-кольцо и другие — определённым ступеням (например, основной → 600 в светлом режиме, 400 в тёмном режиме). Эти семантические названия — это то, на что должны действительно ссылаться ваши компоненты; сырая шкала 50–950 существует в основном для их поддержки.
Как использовать этот инструмент
- Выберите Цвет бренда (или введите значение hex напрямую).
- Установите Имя токена — оно становится ключом палитры, например
--цвет-бренд-500. Используйте что-то специфичное для вашего бренда или продукта, напримерacmeилиindigo. - Выберите Формат:
oklch()для современных значений, готовых к широкой гамме, или простой hex для максимальной совместимости со старыми инструментами. - Оставьте Включить вариант тёмного режима включённым, чтобы получить второй блок переопределений семантики, и выберите Селектор тёмного режима, который соответствует вашему фреймворку — класс
.тёмный(Tailwind, shadcn), атрибут[data-тема="тёмный"]или запрос@media (prefers-color-scheme: тёмный)для темизации уровня ОС без какого-либо переключателя JavaScript. - Отрегулируйте Хрома, чтобы масштабировать насыщенность палитры вверх или вниз — 100 сохраняет первоначальную интенсивность вашего цвета бренда, более низкие значения создают более спокойную, более обесцвеченную палитру, более высокие значения приближаются к наиболее насыщенному цвету, отображаемому при этой светлоте.
- Скопируйте сгенерированный CSS или загрузите его как файл
.cssи разместите в вашей таблице стилей.
Вывод обновляется мгновенно при регулировке любого элемента управления.
FAQ
Почему палитра включает как сырые ступени (--цвет-бренд-600), так и семантические токены (--цвет-основной)?
Сырая шкала — это источник истины; семантические токены — это слой псевдонима над ней. Компоненты должны ссылаться на семантические названия — --цвет-основной, --цвет-граница — не напрямую на сырые ступени, поэтому переработка палитры (или переключение цветов бренда) никогда не требует касания кода компонента.
Что именно делает ползунок Хрома? Он масштабирует насыщенность (хрому) каждой созданной ступени относительно собственной хромы вашего цвета бренда, переустанавливая каждую ступень обратно в гамут sRGB. 100 воспроизводит насыщенность цвета бренда максимально близко, как позволяет гамут каждой ступени светлоты; значения ниже 100 создают более спокойную, более приглушённую палитру; значения выше 100 приближаются к наиболее насыщенному отображаемому цвету при этой светлоте.
Какой селектор тёмного режима мне выбрать?
Используйте .тёмный, если ваш фреймворк (Tailwind, shadcn/ui и большинство библиотек компонентов) переключает класс на <html> или <body>. Используйте [data-тема="тёмный"], если вы переключаете атрибут данных. Используйте запрос @media, если вы хотите, чтобы страница автоматически следила за темой операционной системы, без какого-либо переключателя.
Могу ли я использовать значения oklch(), если мне нужна поддержка старых браузеров?
oklch() поддерживается во всех текущих основных браузерах, но если вам нужна поддержка значительно более старых браузеров, переключите Формат на Hex — одна и та же палитра и структура семантики создаются в любом случае, просто со значениями #rrggbb вместо oklch().
Конфиденциальность
Всё происходит в вашем браузере. Никакой цвет, имя токена или настройка, которые вы вводите, никогда не отправляются на сервер — CSS создаётся и обновляется локально по мере того, как вы печатаете.