🌈 Color Lab — конвертер кольорів та генератор палітр

Введіть один базовий колір у будь-якому зручному форматі (HEX, RGB, HSL) — інструмент збере нормалізовані значення, покаже комплементарний колір, згенерує палітру в обраному режимі та побудує heatmap контрасту для чорного/білого тексту. Наприкінці — готові CSS-сніппети, Figma Tokens та AI-prompt для опису палітри.
Підтримуються формати: HEX (#rgb, #rrggbb), rgb(), hsl(). Для стабільної роботи палітр достатньо одного коректного кольору.
Поточний колір: #635BFF
Очікує колір Введіть один коректний колір, щоб побачити конвертацію, палітру та heatmap контрастності.

Нормалізовані формати та комплементарний колір

HEX: —
RGB: —
HSL: —
HSV: —
CMYK (для друку): —
КОМПЛЕМЕНТАРНИЙ КОЛІР
—
Після аналізу тут з’явиться колір, розташований на протилежному боці колірного кола (H + 180°).
Генератор палітри навколо базового кольору
Оберіть режим, і Color Lab збере для вас декілька робочих відтінків: базовий, акцентний, приглушені та контрастні кольори.

Contrast heatmap (фон × текст)

Для кожного кольору з поточної палітри обчислюється контрастність з чорним або білим текстом за WCAG. Оберіть колір тексту, щоб подивитися, де контраст достатній для інтерфейсів.

Текст:
Легенда: ✅ AA (4.5:1+) — комфортний контраст для основного тексту; 🟡 AA large (3:1–4.49:1) — ок для великих заголовків; 🔴 < 3:1 — слабкий контраст, краще уникати.

Сніппети для CSS, Figma та AI

Один кодовий блок із перемиканням між варіантами: CSS-змінні, gradient-сніппет, AI-prompt, Figma Tokens JSON та список HEX для експорту.

CSS-змінні
/* Очікує базовий колір */
Перемикайте вкладки, щоб отримати саме той фрагмент коду, який потрібен зараз (CSS, градієнт, опис для AI, Figma Tokens або список HEX).

Що дає Color Lab дизайнеру

Color Lab економить час на рутинних колірних задачах. Один раз вводиш базовий колір — далі інструмент сам збирає всі допоміжні дані, які зазвичай доводиться підраховувати вручну або через набір різних сервісів.

  • Швидко конвертує колір між HEX / RGB / HSL / HSV / CMYK для вебу й друку.
  • Показує комплементарний колір, з яким легко будувати контрастні пари.
  • Генерує робочу UI-палітру з ролями (фон, текст, primary, accent, border) у трьох режимах.
  • Будує heatmap контрасту для чорного й білого тексту за WCAG, щоб уникати «сірих» рішень.
  • Готує готові сніппети: CSS-змінні, gradient, AI-prompt, Figma Tokens та список HEX.

Результат — за 1–2 хвилини у вас є узгоджена палітра, яку можна одразу віддати розробнику, завести в дизайн-систему або використати в AI-генерації мокапів.

Кому стане в пригоді Color Lab

  • Продуктовим та UI/UX-дизайнерам — щоб швидко зібрати базову палітру для нового інтерфейсу або оновити існуючий бренд-гайд.
  • Фронтенд-розробникам — коли потрібно оперативно отримати набір узгоджених кольорів у вигляді CSS-змінних та перевірити контрастність.
  • Маркетологам і контент-командам — для швидкої підготовки AI-підказок (prompt’ів) з описом палітри для банерів, лендингів та презентацій.
  • Фрілансерам — як легка альтернатива великим дизайн-системам, коли важливо зекономити час на старті проєкту.

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

Питання та відповіді

Які формати кольорів підтримує Color Lab?

Інструмент коректно розпізнає HEX (#rgb, #rrggbb), rgb(), hsl() та простий запис r,g,b. Далі колір нормалізується в HEX, RGB, HSL, HSV та CMYK.

Чим відрізняються режими генерації палітри?

У режимі UI / Material-like палітра орієнтована на класичний продуктовый інтерфейс: чіткий primary, фонові та текстові кольори. Soft pastel будує м’яку, менш насичену палітру для спокійних візуалів. High contrast фокусується на глибокому фоні та яскравих акцентах для контрастних дашбордів і нічних тем.

Як читати heatmap контрасту фон × текст?

Для кожного кольору палітри інструмент рахує контраст із чорним або білим текстом за WCAG. Позначка AA (text) означає співвідношення 4.5:1+ і підходить для основного тексту, AA large (3:1–4.49:1) — ок для великих заголовків, а Low contrast — небажаний варіант для типових UI-елементів.

Де можна використовувати згенеровані сніппети?

CSS-змінні зручно вкладати у :root або тему в design tokens. Gradient-сніппет можна використати для hero-блоків чи кнопок. Figma Tokens JSON підходить для імпорту в плагіни токенів або як вихідна структура для дизайн-системи. HEX-список зручно передавати розробникам чи вставляти в UI-кити.

Чи відправляються мої дані на сервер?

Ні. Усі обчислення виконуються локально у вашому браузері, без бекенду та сторонніх API. Введені кольори, палітри та сніппети не логуються й не зберігаються на сторонніх сервісах.

Наскільки точні розрахунки контрасту та конвертації?

Алгоритм контрасту базується на стандартній формулі WCAG для відносної яскравості, а конвертація між форматами кольорів побудована на типових формули переходу RGB ↔ HSL/HSV/CMYK. Для критичних інтерфейсів (державні сервіси, медичні системи) рекомендуємо додатково валідувати ключові пари кольорів у професійних інструментах перевірки доступності.