# CSS Variables

8 онлайн-инструментов для работы с CSS Variables в браузере. Обработка выполняется на серверах Elysia Tools; текст не сохраняется, файлы удаляются через 6 часов.

> Каноническая страница: https://elysiatools.com/ru/tags/css-variables

## Обзор

Используйте инструменты CSS Variables для работы с пользовательскими свойствами CSS и связанными данными через браузер, без установки программ. В категории доступно 8 инструментов.

## Частые вопросы

### Что такое CSS Variables?

CSS Variables, или пользовательские свойства CSS, позволяют задавать значения и повторно использовать их в таблицах стилей.

### Что можно делать с инструментами CSS Variables?

Инструменты этой категории помогают работать с CSS Variables через веб-интерфейс. Доступно 8 специализированных инструментов.

### Как обрабатываются мои данные?

Вы работаете с инструментами в браузере, а обработка выполняется на серверах Elysia Tools. Текстовые вводы не сохраняются, а загруженные файлы автоматически удаляются через 6 часов.

## Инструменты

- [Извлечение палитры по URL изображения](https://elysiatools.com/ru/tools/color-palette-extractor-from-image-url): Загружает удаленное изображение по URL, извлекает доминирующие цвета, экспортирует готовые для кода файлы палитры и показывает контраст
- [Генератор каскада цветовых токенов](https://elysiatools.com/ru/tools/color-token-cascade-generator): Преобразует один основной hex-цвет в полную систему токенов с семантикой, CSS-переменными и JSON Style Dictionary
- [Экстрактор токенов темы 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. Сохраняет токены цвета, отступов и шрифтов с выводом типов.
- [Извлечение палитры из изображения](https://elysiatools.com/ru/tools/image-color-palette-extractor): Загружает изображение, извлекает доминирующие цвета и экспортирует токены для кода с проверкой контраста
- [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков
- [Песочница произвольных значений Tailwind](https://elysiatools.com/ru/tools/tailwind-arbitrary-value-playground): Вставьте классы Tailwind с произвольными значениями (w-\[137px\], text-\[#bada55\], grid-cols-\[1fr_2fr\], \[mask-type:luminance\]) и изучите сгенерированный CSS с живым визуальным предпросмотром, распознаванием подсказок типа данных и пояснением каждого преобразования. Полезно для отладки calc(), CSS-переменных и разовых значений вне шкалы токенов.
- [Синхронизатор палитры Tailwind](https://elysiatools.com/ru/tools/tailwind-color-palette-sync): Введите HEX, выберите схему именования (шкала 50–950 / одно имя / вложенность) — генерирует фрагмент theme.extend.colors для tailwind.config.ts с уровнями WCAG AA/AAA. Тёмная тема опциональна.

## Связанные материалы

- [CSS](https://elysiatools.com/ru/tags/css): Используйте 48 онлайн-инструментов CSS для работы с CSS-кодом в браузере. Обработка выполняется на серверах Elysia Tools, текст не сохраняется.
- [HTML/CSS](https://elysiatools.com/ru/tags/html): Используйте 86 онлайн-инструментов для работы с HTML, CSS и DOM. Обработка выполняется на серверах, текст не сохраняется, файлы удаляются через 6 часов.
- [Цвет](https://elysiatools.com/ru/tags/color): Используйте 214 онлайн-инструментов для работы с цветами, HEX, RGB, HSL и палитрами. Обработка выполняется на серверах Elysia Tools.
- [Цветовые палитры](https://elysiatools.com/ru/tags/color-palette): 10 онлайн-инструментов для создания, подбора и анализа цветовых палитр в браузере. Обработка выполняется на серверах Elysia Tools.
- [Design System](https://elysiatools.com/ru/tags/design-system): 7 онлайн-инструментов Design System для работы с задачами и данными дизайн-систем. Без установки ПО: интерфейс в браузере, обработка на серверах Elysia Tools.
- [Токены дизайна](https://elysiatools.com/ru/tags/design-tokens): Используйте 5 онлайн-инструментов для обработки, конвертации и проверки design tokens. Текст не сохраняется, загруженные файлы удаляются через 6 часов.