Вставте або імпортуйте набір кольорів і миттєво експортуйте їх у CSS-змінні, SCSS, конфіг Tailwind, JSON або SVG-свотчі — завершальний крок для будь-якої палітри.

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

Палітра

Дійсних кольорів не знайдено — перевірте введені дані.

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

							

Все працює у вашому браузері — вставте палітру і скопіюйте готовий код у будь-якому форматі. Без реєстрації, повністю безкоштовно.


Про Експортер палітр

Palette Exporter — це завершальний крок для будь-якої кольорової палітри: вставте набір кольорів і отримайте готовий до продакшену код у форматі, потрібному вашому проєкту. Він приймає значення HEX по одному в рядку або розділені комами й пробілами, а також розуміє нотацію rgb() і hsl().

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

Усе працює у вашому браузері — вставлені вами кольори ніколи нікуди не надсилаються. Це природно поєднується з іншими інструментами для роботи з палітрами: витягніть або згенеруйте палітру десь ще, вставте її сюди й отримайте точний фрагмент коду, якого очікує ваша таблиця стилів, фреймворк чи дизайнерський конвеєр.

Як використовувати Експортер палітр

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

Часті запитання

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

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

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

Ні. Кольори залишаються у вкладці вашого браузера — жодні запити на сервер не виконуються під час розбору чи експорту, і нічого не зберігається після того, як ви покидаєте сторінку.

Він створює невеликий файл SVG, що показує кожен колір палітри як підписаний зразок. Це корисно для вбудовування візуального довідника палітри в документацію, файли README чи сторінки передачі дизайну без створення скриншотів.

Поділитися

Популярні запити
експортер палітри експорт кольорів у css палітра у scss конфіг кольорів tailwind експорт палітри json зразки кольорів svg
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.
Повідомити про проблему

Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.