Конвертер кольорів

Перетворення кольорів між HEX, RGB, HSL і OKLCH, пошук усіх кольорів у фрагменті CSS, відтінки й гармонії — просто в браузері.

Про Конвертер кольорів

Що це

Цей інструмент приймає один колір або цілий блок CSS, SVG чи JSON і знаходить у ньому всі кольори. Для активного кольору показуються всі поширені формати, шкала відтінків від 50 до 950, комплементарна й аналогова гармонії та контраст на білому й чорному. Результат можна експортувати як CSS-змінні, конфігурацію Tailwind чи Figma JSON.

Основні можливості

  • Усі кольори, знайдені у вставленому CSS, SVG чи JSON, — HEX, rgb(), hsl(), oklch() та інші.
  • Активний колір у всіх поширених форматах, з піпеткою.
  • Шкала відтінків від 50 до 950.
  • Комплементарна й аналогова гармонії.
  • Контраст на білому й чорному з позначками AA і AAA; експорт як CSS-змінні, Tailwind чи Figma JSON.

Як користуватися

  1. Вставте колір або блок CSS, SVG чи JSON або натисніть «Приклад».
  2. Оберіть колір, з яким хочете працювати.
  3. Скопіюйте його в потрібному форматі або перегляньте відтінки й гармонії.
  4. Експортуйте кольори кодом, якщо збираєте тему.

Коли корисно

  • Перевести HEX-кольори з макета в OKLCH чи HSL для свого CSS.
  • Отримати повну шкалу відтінків з одного кольору бренду.
  • Зібрати всі кольори, використані в старій таблиці стилів.

Конфіденційність та обмеження

Ваші дані

Ваші кольори й код обробляються в браузері й не надсилаються на сервер — сайт отримує лише анонімну подію «інструмент відкрито», без вмісту. Результат, надісланий в інший інструмент, зберігається на цьому пристрої 24 години в «Останніх діях».

Обмеження

  • CSS-змінні на кшталт var(--brand) не підставляються: знаходяться лише значення кольорів, записані в тексті.
  • Деякі формати трохи округлюють значення, тож перетворення туди й назад може змінити останню цифру.

Поширені запитання

Які формати кольорів підтримуються?

HEX (3, 6 чи 8 цифр), rgb(), hsl(), oklch(), oklab() та назви кольорів CSS, як-от rebeccapurple. Кожен знайдений у тексті формат показано поруч зі значенням у всіх інших.

Як будується шкала відтінків?

З активного кольору будуються світліші й темніші кроки від 50 до 950 так, як названо палітри Tailwind, тож їх можна одразу вставити в тему.

Чи можна перетворити багато кольорів разом?

Так — вставте цілий CSS-файл чи JSON із токенами дизайну, і всі кольори в ньому буде знайдено й перелічено.