Палитра цветов в переменные CSS

• Несколько форматов вывода: наш конвертер палитры цветов в переменные CSS поддерживает четыре формата вывода: HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) и «Все форматы», который генерирует HEX, RGB, HSL и отдельные переменные каналов R/G/B в одном блоке - идеально для составления значений rgba().
• Мгновенная генерация переменных CSS: введите названия цветов и HEX-значения, выберите селектор и формат, нажмите «Сгенерировать» и получите готовые к вставке объявления пользовательских свойств CSS мгновенно. Конвертер также поддерживает массовую вставку: вводите несколько цветов сразу в формате имя: #hex.
• Безопасная палитра цветов в переменные CSS онлайн: всё преобразование идёт полностью в вашем браузере. Ваши значения цветов и имена переменных никогда не отправляются на сервер при использовании нашего онлайн-конвертера - 100 % приватно, полностью работает офлайн после загрузки.
• Палитра цветов в переменные CSS - без установки: используйте наш бесплатный конвертер прямо в браузере без загрузок, расширений и аккаунта. Поддерживаются настраиваемые селекторы, префиксы переменных и массовый ввод цветов для рабочих процессов дизайн-систем.

• Генерация токенов дизайн-системы: преобразуйте фирменную палитру цветов в пользовательские свойства CSS для дизайн-системы. Используйте наш конвертер палитры цветов в переменные CSS, чтобы сгенерировать все токены цвета одним кликом и вставить их в глобальную таблицу стилей или файл токенов.
• Расширение темы Tailwind CSS: генерируйте переменные CSS из фирменных цветов и ссылайтесь на них в конфигурации Tailwind через var(--имя-цвета). Наш конвертер легко связывает вашу палитру дизайна с системой тем Tailwind.
• Переключение тёмной темы: определяйте светлую и тёмную палитры как переменные CSS в разных селекторах (.light, .dark или [data-theme]). Используйте наш конвертер с опцией настраиваемого селектора, чтобы сгенерировать оба блока темы.
• Документирование фирменных цветов: преобразуйте HEX-палитру из брендбука в переменные CSS для передачи разработчикам. Наш конвертер генерирует чистые именованные переменные, соответствующие соглашениям об именах команды дизайна.
• Темизация библиотек компонентов: генерируйте пользовательские свойства CSS для токенов цвета библиотеки компонентов. Используйте опцию префикса переменных в нашем конвертере, чтобы создать пространства имён (например, --brand-color-primary) и избежать конфликтов.
• Композиция RGBA с переменными каналов: используйте вывод «Все форматы», чтобы генерировать отдельные переменные каналов R, G и B вместе с полным цветом. Это позволяет составлять значения rgba() с динамической прозрачностью: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5).

Конвертер палитры цветов в переменные CSS - это инструмент, который преобразует список HEX-значений цветов в объявления пользовательских свойств CSS, также известных как переменные CSS. Пользовательские свойства CSS определяются с двойным дефисом в начале (например, --color-primary: #3b82f6 ) и могут использоваться в любом месте таблицы стилей через var(--color-primary) . Наш конвертер палитры цветов в переменные CSS поддерживает форматы вывода HEX, RGB, HSL и комбинированный, с настраиваемыми селекторами и префиксами переменных для рабочих процессов дизайн-систем.

1. Введите цвета: добавляйте цвета по одному с помощью палитры и поля HEX или используйте массовую вставку, чтобы ввести несколько цветов сразу в формате имя: #hex. Каждый цвет получает имя переменной, которое становится именем пользовательского свойства CSS.
2. Настройте параметры вывода: выберите формат вывода (HEX, RGB, HSL или все форматы), селектор CSS (:root, .theme или настраиваемый) и необязательный префикс переменных. Вся настройка идёт локально в браузере: ваши значения цветов не покидают устройство.
3. Копируйте или скачивайте CSS: нажмите «Сгенерировать переменные CSS», чтобы создать полный блок CSS. Скопируйте его в буфер обмена или скачайте как файл .css, готовый к импорту в проект.

• Переменные HEX: стандартные HEX-значения цветов (например, --color-primary: #3b82f6 ). Совместимы со всеми браузерами и наиболее компактный формат для токенов цвета.
• Переменные RGB: запись функции RGB (например, --color-primary: rgb(59, 130, 246) ). Полезно, когда нужно применить прозрачность через rgba() к фиксированному цвету.
• Переменные HSL: запись функции HSL (например, --color-primary: hsl(217, 91%, 60%) ). Предпочтительна во многих дизайн-системах, так как оттенок, насыщенность и светлота настраиваются независимо.
• Переменные каналов (формат «Все»): отдельные значения каналов R, G и B (например, --color-primary-r: 59 ), позволяющие составлять rgba() с динамической прозрачностью: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5) .

Пользовательские свойства CSS чувствительны к регистру: --Color-Primary и --color-primary - разные переменные. Наш конвертер палитры цветов в переменные CSS автоматически приводит имена переменных к нижнему регистру в kebab-case, следуя соглашениям именования CSS. Переменные, определённые в :root , доступны глобально. Переменные, определённые в селекторе класса (например, .dark ), применяются только когда этот класс присутствует у элемента-предка - удобно для переключения тем.