Генератор CSS-переменных

Составьте список именованных цветов и мгновенно получите соответствующий блок :root { --nom: valeur; } с CSS-переменными (custom properties). Обработка на 100% локально в вашем браузере — ничего не отправляется на сервер.

CSS-код

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

CSS-переменные (также называемые «custom properties») собирают цвета фирменного стиля в одном месте, избавляя от необходимости повторять один и тот же шестнадцатеричный код в десятках файлов и упрощая будущую смену темы (в том числе тёмный режим). Добавляйте и удаляйте строки, настраивайте каждый цвет — блок :root обновляется в реальном времени и готов к вставке в начало вашей основной таблицы стилей.

Исправляются ли некорректные имена переменных автоматически?

Да: пробелы и недопустимые символы заменяются дефисами, а имя приводится к нижнему регистру в соответствии с обычным соглашением CSS. Если у двух переменных оказывается одинаковое имя, автоматически добавляется числовой суффикс, чтобы избежать конфликта.

Можно ли использовать в качестве значения не только цвета?

Да, поле «Значение» принимает любое допустимое значение CSS (размер в rem, шрифт, градиент...), хотя палитра цвета рядом остаётся удобной для быстрого составления набора цветов.

Конфиденциальность: составляемая вами палитра целиком остаётся в вашем браузере, ничего не отправляется и не хранится на сервере.