Конвертація кольорів
Онлайн-конвертер кольорів, який розпізнає HEX (3, 4, 6, 8 цифр), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), новий синтаксис CSS Color 4 (через пробіл), усі 147 CSS-назв кольорів та будь-який із них з альфа-каналом. Усі формати виводяться одразу — кожен можна скопіювати окремо. Вбудована палітра генерує темніші та світліші відтінки, а також комплементарні, аналогові, тріадні й тетрадні гармонії. Перевірка контрасту WCAG показує, чи відповідає колір рівням AA і AAA на білому та чорному тлі для звичайного й великого тексту. Використовуйте системну піпетку (Chrome / Edge), щоб підібрати будь-який колір з екрана.
Як користуватися
Будь-який формат: HEX, RGB, HSL, OKLCH або CSS-назви на зразок tomato.
Одинадцять форматів з’являються одразу — скопіюйте одним кліком.
Відтінки та гармонії на основі вашого кольору.
Контраст WCAG на білому та чорному тлі з вердиктом AA/AAA.
Конвертуйте між 11 форматами кольорів, створюйте палітри та перевіряйте контраст WCAG — все в одному місці
Всі формати
Контраст (WCAG)
Палітра
Нещодавні
Що можна зробити
Типові сценарії
- Знайти OKLCH для брендового HEX-кольору в дизайн-системі на CSS Color 4.
- Перетворити значення RGB пікселів зі скріншота на HSL для осі діаграми.
- Підібрати комплементарний колір для ефекту наведення на кнопку.
- Перевірити, чи відповідає текст рівню WCAG AA на обраному фоні.
- Підібрати колір з іншої вкладки або вікна через системну піпетку.
Чому саме цей
Більшість конвертерів підтримують лише HEX↔RGB↔HSL. Ми включили OKLab і OKLCH — нові кольорові простори CSS Color 4, які значно краще відповідають людському сприйняттю, ніж HSL (без раптових стрибків яскравості при зміні відтінку). Генерація палітри виконується в просторі OKLab, тому кроки виглядають рівномірними сприйняттям, а не математично. Контраст обчислюється у просторі яскравості WCAG 2 з порогами 4.5:1 і 3:1.
Часті запитання
Що таке OKLCH?
Рівномірно сприйнятий кольоровий простір, представлений у CSS Color 4. На відміну від HSL — де яскравість 50% може виглядати зовсім по-різному залежно від відтінку — яскравість у OKLCH однакова по всьому спектру, що робить дизайн-токени передбачуваними. Якщо ви створюєте сучасну дизайн-систему, OKLCH варто вивчити.
Чи підтримується альфа-канал?
Так — восьмизначний HEX, rgba(), hsla() або синтаксис з альфою через пробіл (rgb(255 0 0 / 50%)) розпізнається й відображається у кожному форматі виводу, що підтримує альфа-канал.
Чому палітра відтінків виглядає «ступінчастою», а не плавною?
Відтінки інтерполюються в OKLab, а потім проєктуються у цільовий простір — кожен крок є однаковим за сприйняттям. Це часто дає плавніший результат, ніж звичайна зміна яскравості в HSL, але дуже темні або дуже світлі вихідні кольори можуть обрізатися біля країв.
CMYK — точний для друку?
Ні — CMYK виводиться як швидке перетворення в екранному просторі, без урахування ICC-профілю. Для друку використовуйте отримане значення як відправну точку й перевірте в Adobe / Affinity з реальним профілем преса.
Піпетка не працює — чому?
API EyeDropper доступний лише у браузерах на основі Chromium (Chrome, Edge, Brave). Firefox і Safari приховують кнопку з підказкою, якщо вона не підтримується.
Чи важливий регістр у HEX?
Ні, HEX — це шістнадцяткове (0–9, a–f або A–F). За замовчуванням ми виводимо малі літери згідно з рекомендацією CSS Color 4; результат залишається дійсним незалежно від того, як ви його вставите.
Мобільні пристрої?
Так. Піпетка недоступна в мобільних браузерах — скористайтеся нативним вибором кольору.
Звичайно! Просто надішліть нам коротке повідомлення з вашою ідеєю. Якщо хочете обговорити детальніше — залиште email, і ми зв’яжемося з вами. Можна залишитися анонімом.
