Color Converter — онлайн конвертер HEX, RGB, HSL _

Що таке конвертація кольорів?

Кожен колір, який рендерить ваш браузер, — це зрештою потрійне sRGB: три числа від 0 до 255 для каналів червоного, зеленого та синього, плюс необов'язкова альфа. Специфікація CSS Color Level 4 визначає кілька текстових форматів, які при зворотному перетворенні дають ту саму потрійку, плюс перцептивно-рівномірний простір OKLCH. Цей інструмент читає будь-який з них, конвертує до всіх і обчислює коефіцієнт контрасту WCAG 2.1 відносно другого кольору, щоб ви могли впевнено розробляти доступні інтерфейси.

Як працює конвертація кольорів?

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

1. Ваше введення розбирається. Інструмент автоматично визначає 3, 4, 6 або 8-цифровий HEX, функціональні форми rgb()/rgba()/hsl()/hsla()/hsv()/hwb() у застарілому синтаксисі з комами або сучасному синтаксисі з косою рискою і альфою, або будь-який з 150 іменованих кольорів CSS (включаючи rebeccapurple).
2. Розпізнаний колір нормалізується до канонічного sRGB — чотири числа з плаваючою комою {r, g, b, a}, кожне в діапазоні 0–1. Це єдине джерело істини, з якого виводиться кожен вихідний формат.
3. HEX отримується шляхом округлення кожного каналу до значення байта 0–255 та об'єднання hex-цифр. RGB / RGBA виводять ті самі байти. HSL та HSV застосовують стандартні алгоритми циліндричних координат W3C; HWB отримує відтінок від HSV, білизну від min(r, g, b) та чорноту від 1 - max(r, g, b).
4. CMYK — це наближене наближення: k = 1 - max(r, g, b), потім c, m, y з залишкових каналів. Він підходить для попереднього перегляду на екрані, але не для друку: реальний вивід CMYK вимагає ICC-профілю, який цей інструмент свідомо не вбудовує.
5. OKLCH слідує шляху css-color-4: sRGB лінеаризується, множиться на матрицю LMS, піднімається до кореня кубічного ступеня, множиться на матрицю LMS-to-OKLab, і нарешті конвертується з прямокутного OKLab у полярний OKLCH. OKLCH є перцептивно рівномірним, що робить його правильним простором для розробки палітр, що виглядають збалансованими для людського ока.

Навіщо використовувати цей конвертер кольорів?

• Конфіденційність: кожна конвертація виконується у вашому браузері за допомогою звичайного JavaScript. Колір, який ви вставляєте, ніколи не залишає ваш пристрій — це важливо для нерозкритих брендових робіт, внутрішніх систем дизайну та клієнтських макетів за NDA.
• Передача між дизайнером і розробником: вставте HEX з Figma та отримайте рядок rgb() для конфігурації Tailwind, рядок hsl() для CSS-властивості або рядок oklch() для сучасної палітри — усі формати в одному місці, без копіювання між вкладками.
• Точність WCAG: перевірка контрасту використовує точну формулу відносної яскравості WCAG 2.1 та опубліковані пороги AA (4,5 / 3,0) і AAA (7,0 / 4,5) для звичайного та великого тексту. Вказаний коефіцієнт відповідає ручним калькуляторам з точністю до 0,01.
• Темний режим та побудова палітри: HSL та OKLCH виставляють яскравість як єдиний канал, тому легко змістити брендовий колір вгору або вниз по осі яскравості для отримання відповідних токенів темного режиму або для генерації 10-крокової рампи палітри з одного кольору.

Які поширені застосування конвертації кольорів?

Конвертація кольорів використовується у веб-розробці, дизайні та роботі з доступністю:

• Системи дизайну: конвертація брендового HEX у відповідні токени HSL та OKLCH для шкали власних CSS-властивостей, потім перевірка того, що кожна комбінація токенів проходить WCAG AA відносно фону сторінки.
• Аудити доступності: вставте пару переднього та фонового кольорів з реального екрану продукту та прочитайте коефіцієнт контрасту плюс вердикти AA/AAA для тексту звичайної та великої ваги за один погляд.
• Крос-інструментальні переходи: витягнути колір з піпетки скріншоту (HEX), вставити сюди та скопіювати рядок hsl() або oklch() безпосередньо в Tailwind, токени Figma або тему CSS-in-JS.

Як виглядає приклад конвертації кольорів?

Візьмемо відомий rebeccapurple. Пошук за іменованим кольором визначає його як #663399. Конвертація RGB дає rgb(102, 51, 153). Конвертація HSL дає hsl(270, 50%, 40%) — фіолетовий відтінок, напівнасичений, чотири десятих яскравості. Перевірка цього кольору відносно чистого білого за допомогою інструменту контрасту повертає коефіцієнт близько 7,39, що перевищує AAA (7,0) для звичайного тексту та AAA (4,5) для великого тексту — надійний доступний варіант переднього плану. Зворотний перехід #663399 через RGB → HSL → RGB → HEX повертає оригінальний рядок байт у байт.

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