Вставьте или импортируйте набор цветов и мгновенно экспортируйте их в CSS-переменные, SCSS, Tailwind config, JSON или SVG-образцы — финальный шаг для любой палитры.

Вставьте значения HEX (по одному на строку или через запятую/пробел). Также принимаются rgb() и hsl().

Палитра

Валидные цвета не найдены — проверьте ввод.

Формат экспорта
Код экспорта

							

Всё работает в вашем браузере — вставьте палитру и получите готовый к использованию код в любом формате. Без регистрации, абсолютно бесплатно.


О Экспортер палитр

Экспортёр палитры — завершающий шаг для любой цветовой палитры: вставьте набор цветов и получите готовый к использованию код в нужном для вашего проекта формате. Инструмент принимает значения HEX по одному на строку или разделённые запятыми и пробелами, а также понимает нотацию rgb() и hsl().

В реальном времени создаются шесть форматов вывода: CSS-пользовательские свойства, переменные SCSS, блок цветов конфигурации Tailwind, JSON, SVG-образцы и обычный список HEX. Настраиваемый префикс переменных сохраняет соответствие сгенерированных названий вашей кодовой базе, а каждый формат можно скопировать в буфер обмена или скачать как файл.

Всё работает прямо в браузере — вставленные вами цвета никуда не отправляются. Инструмент естественно сочетается с другими инструментами палитр: извлеките или сгенерируйте палитру в другом месте, вставьте её сюда и получите точный фрагмент кода, который ожидает ваша таблица стилей, фреймворк или дизайнерский конвейер.

Как использовать Экспортер палитр

  1. Вставьте цвета во входное поле — HEX, rgb() или hsl(), по одному на строку или через запятую.
  2. Нажмите «Обновить цвета», чтобы разобрать их в палитру, или загрузите образец, чтобы попробовать.
  3. Выберите формат экспорта: CSS-переменные, SCSS, конфигурация Tailwind, JSON, SVG-образцы или обычный HEX.
  4. При необходимости скорректируйте префикс переменных для собственных названий.
  5. Скопируйте сгенерированный код или скачайте его как файл.

Часто задаваемые вопросы

Распознаются значения HEX (с символом # или без него), а также нотация rgb() и hsl(). Можно комбинировать форматы и разделять цвета переносами строк, запятыми или пробелами — парсер выделяет все допустимые цвета и игнорирует остальное.

Да. Разбор и генерация кода полностью происходят в вашем браузере, поэтому инструмент бесплатен, без аккаунта, кредитов и ограничений на количество палитр или экспортов.

Вставьте свои цвета, выберите формат «Tailwind config» и скопируйте сгенерированный блок в раздел colors вашей конфигурации Tailwind. Настройка префикса переменных управляет названиями ключей для каждого цвета.

Нет. Цвета остаются во вкладке браузера — во время разбора или экспорта не выполняется никаких запросов к серверу, и ничего не сохраняется после ухода со страницы.

Он создаёт небольшой SVG-файл, показывающий каждый цвет палитры в виде подписанного образца. Это полезно для встраивания визуального справочника палитры в документацию, файлы README или страницы передачи дизайна без создания скриншотов.

Поделиться

Популярные запросы
экспорт палитры экспорт цветов в css палитра в scss конфигурация цветов tailwind экспорт палитры json образцы цветов svg
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.
Сообщить о проблеме

Добавьте этот бесплатный инструмент на свой сайт — скопируйте и вставьте код ниже.