Веб-розробка
Color Converter
Конвертація кольору між HEX, RGB, HSL, HSV/HSB і CMYK — введіть значення в будь-яке поле, решта оновиться миттєво.
Той самий колір можна записати по-різному залежно від контексту: HEX і RGB зручні для коду, HSL — для інтуїтивного підбору відтінку й яскравості, CMYK — для друку. Інструмент конвертує між усіма форматами одночасно.
Як користуватися
- Введіть значення в будь-яке поле (HEX, RGB, HSL, HSV/HSB чи CMYK) — решта форматів оновляться миттєво.
- Кнопка «випадковий колір» генерує довільний відтінок для швидкого перегляду палітри.
- Скопіюйте потрібний формат одним натисканням для вставки в CSS чи графічний редактор.
Коли який формат використовувати
- HEX — компактний запис для CSS і дизайн-систем (#4453b8).
- RGB — коли потрібна прозорість через rgba() або програмна робота з каналами кольору.
- HSL — найзручніший для ручного підбору: легко освітлити чи затемнити колір, змінюючи лише один параметр.
- CMYK — для матеріалів, що йдуть у друк, де кольори змішуються субтрактивно, на відміну від адитивного RGB на екрані.
Що варто памʼятати
CMYK на екрані — лише наближення: точний вигляд кольору в друці залежить від принтера, паперу й кольорового профілю.
Конвертація між просторами не завжди точна для крайніх (дуже насичених) кольорів через різницю в охопленні гами (gamut) різних моделей.
Стаття про цей інструмент: HEX, RGB, HSL: чому для кольору існує стільки записів
Часті запитання
Як конвертер обробляє альфа-канал (прозорість)?
Альфа підтримується в HEX (#RRGGBBAA), RGBA та HSLA — те, що ви вводите, переноситься в інші формати, що підтримують прозорість, тоді як формати без альфа-каналу, як звичайний CMYK, просто ігнорують її.
Чому значення трохи змінюється після конвертації в CMYK і назад у HEX?
CMYK — це модель, орієнтована на друк, без єдиної фіксованої формули для конвертації в/з RGB, тож циклічна конвертація може змістити значення на похибку округлення в одну-дві одиниці; візуально колір лишається практично тим самим.
Чи надсилаються мої дані про колір кудись?
Ні, кожна конвертація відбувається локально у вашому браузері за допомогою JavaScript — нічого не завантажується на сервер.
Чим OKLCH відрізняється від HSL?
OKLCH описує колір через яскравість (L), хрому (C) та відтінок (H), але на відміну від HSL враховує те, як людське око реально сприймає яскравість — зміна L у OKLCH не спотворює сприйняту насиченість кольору, тому переходи між відтінками виглядають більш рівномірними.
Що означає, що колір «поза гамою» (out of gamut)?
Деякі кольори в широких просторах на кшталт OKLCH чи Display P3 фізично не можуть бути відтворені на дисплеях, що підтримують лише sRGB — браузер у такому разі підставляє найближчий доступний колір у межах підтримуваної гами.