Поставете или импортирайте набор от цветове и ги експортирайте мигновено към CSS променливи, SCSS, Tailwind конфигурация, JSON или SVG мостри — финалната стъпка за всяка палитра.

Поставете HEX стойности (по един на ред или разделени със запетаи/интервали). Приемат се и rgb() и hsl().

Палитра

Не са намерени валидни цветове — проверете въвеждането.

Формат за експорт
Код за експорт

							

Всичко работи в браузъра ви — поставете палитра и копирайте готов за продукция код в произволен формат. Без регистрация, напълно безплатно.


За Експорт на палитра

Експортерът на палитри е последната стъпка за всяка цветова палитра: поставете набор от цветове и получете готов за производство код във формата, от който проектът ви се нуждае. Приема HEX стойности по една на ред или разделени със запетаи и интервали, а разбира и нотацията rgb() и hsl().

Шест изходни формата се генерират на живо: CSS персонализирани свойства, SCSS променливи, блок с цветове за конфигурация на Tailwind, JSON, SVG мостри и обикновен HEX списък. Конфигурируем префикс на променливите поддържа генерираните имена в съответствие с вашата кодова база, а всеки формат може да бъде копиран в клипборда или изтеглен като файл.

Всичко се изпълнява във вашия браузър — цветовете, които поставяте, никога не се изпращат никъде. Съчетава се естествено с другите инструменти за палитри: извлечете или генерирайте палитра другаде, поставете я тук и излезте с точния откъс, който очаква вашият стилов файл, фреймуърк или дизайнерски процес.

Как да използвате Експорт на палитра

  1. Поставете цветовете си във входното поле — HEX, rgb() или hsl(), по един на ред или разделени със запетаи.
  2. Кликнете "Update colors" (Обнови цветовете), за да ги анализирате в палитра, или заредете примера, за да опитате.
  3. Изберете изходен формат: CSS variables, SCSS, Tailwind config, JSON, SVG swatches или plain HEX.
  4. Настройте префикса на променливите, ако искате персонализирано именуване.
  5. Копирайте генерирания код или го изтеглете като файл.

Често задавани въпроси

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

Да. Анализирането и генерирането на код се извършват изцяло във вашия браузър, така че инструментът е безплатен без акаунт, без кредити и без лимит на палитри или експорти.

Поставете цветовете си, изберете формата "Tailwind config" и копирайте генерирания блок в секцията за цветове на вашата конфигурация на Tailwind. Настройката за префикс на променливата контролира имената на ключовете, използвани за всеки цвят.

Не. Цветовете остават в раздела на браузъра ви — не се правят заявки към сървър по време на анализ или експортиране, и нищо не се запазва, след като напуснете страницата.

Той произвежда малък SVG файл, показващ всеки цвят от палитрата като етикетирана мостра. Полезен е за вграждане на визуална справка за палитра в документация, README файлове или страници за предаване на дизайн, без да правите скрийншоти.

Сподели

Популярни търсения
експорт на палитра експорт на цветове към css палитра към scss tailwind конфигурация на цветове експорт на палитра json цветови мостри svg
Нуждаете се от помощ?
Открихте проблем с този инструмент? Кажете ни.
Докладване на проблем

Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.