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


Конвертер кольорів для HEX, RGB, RGBA, HSL, HSLA, HSV/HSB, CMYK, LAB, LCH, OKLAB, OKLCH, XYZ і назв кольорів CSS. Миттєво конвертуйте коди кольорів, копіюйте готові значення та перевіряйте точний CSS-результат в одному місці.

Скористайтеся цим конвертером кольорів, щоб миттєво перемикатися між HEX, RGB, RGBA, HSL, HSV/HSB, CMYK, LAB, LCH, OKLAB, OKLCH, XYZ і назвами кольорів CSS. Введіть будь-який підтримуваний формат, налаштуйте значення повзунками та скопіюйте потрібний результат для CSS, дизайн-систем, друку чи аналізу кольору.

Конвертер оновлює всі результати в реальному часі, чітко показує вибраний колір і підтримує зворотні обчислення для кожного режиму введення. Це зручно для завдань на кшталт HEX у RGB, RGB у HEX, перевірки значень HSL чи CMYK, а також порівняння сучасних перцептивних форматів, таких як OKLCH і OKLAB.

Первинні дані

Виберіть будь-який формат, введіть значення, і всі відповідні коди кольору оновляться миттєво.

Формат введення
Виберіть формат, який хочете редагувати безпосередньо.
Підтримуються #RGB, #RGBA, #RRGGBB і #RRGGBBAA.
Приклади: tomato, rebeccapurple, royalblue, lightseagreen.
Введіть значення червоного, зеленого та синього каналів від 0 до 255.
Використовуйте альфа-канал від 0 до 1 для прозорості.
Налаштовуйте відтінок, насиченість і світлість для зручного редагування CSS-кольорів.
HSLA додає альфа-прозорість до HSL.
HSV зручний, коли ви хочете мислити через відтінок, насиченість і яскравість.
CMYK переважно використовується для кольорів, орієнтованих на друк.
LAB є перцептивним простором і може давати екранні кольори поза гамою.
LCH розділяє світлість, хрому й відтінок для перцептивного редагування.
OKLAB — сучасний перцептивний простір для UI та роботи з палітрами.
OKLCH спрощує перцептивне налаштування відтінку та хроми.
XYZ — еталонний колірний простір, який часто використовується для конвертацій.

Рис. 1 Конвертер кольорів

HEX #3366CC
RGB rgb(51, 102, 204)
CMYK cmyk(75%, 50%, 0%, 20%)
Режим кольору дає змогу налаштовувати відтінок, насиченість і світлість.

Результат

Конвертовані значення кольору

Найуживаніші формати

Інші формати

Поширені запитання про конвертер кольорів

Що таке конвертер кольорів?
Конвертер кольорів бере один формат кольору, наприклад #3366cc або rgb(51, 102, 204), і обчислює відповідні значення в інших форматах, таких як HSL, CMYK, LAB або OKLCH.

Як перетворити HEX у RGB?
Виберіть режим введення HEX, введіть коректний hex-код, наприклад #ff6600, і конвертер автоматично покаже відповідні значення RGB, HSL, CMYK та інших форматів.

Як перетворити RGB у HEX?
Виберіть режим RGB, введіть значення червоного, зеленого та синього каналів, а потім скопіюйте згенерований результат HEX. Це стандартний сценарій RGB у HEX для вебкольорів.

Що таке HSL?
HSL означає відтінок, насиченість і світлість. Цей формат описує колір за кутом на колірному колі, а також за тим, наскільки він насичений і наскільки світлим або темним виглядає, тому його часто легше редагувати на око, ніж звичайні значення RGB.

Для чого використовується CMYK?
CMYK головним чином використовується в друці, оскільки подає колір як покриття блакитною, пурпуровою, жовтою та ключовою чорною фарбами. Це корисно під час підготовки макетів для друкарень, пакування або поліграфії.

Що таке OKLCH?
OKLCH — це перцептивний формат кольору, похідний від OKLAB. Він розділяє світлість, хрому та відтінок у спосіб, який часто краще відповідає людському зору, тому добре підходить для сучасних UI-палітр і дизайн-систем.

Чи є конвертації точними?
Перетворення в межах одного колірного простору можуть бути точними або дуже близькими, але деякі формати використовують різні моделі чи еталонні простори. Значення на кшталт CMYK, LAB, LCH та OKLCH можуть потребувати округлення або обрізання гами під час повернення до безпечного для екрана sRGB.

Чи можна використовувати результати в CSS?
Так. Згенеровані значення HEX, RGB, RGBA, HSL, HSLA і точні назви кольорів CSS готові до вставлення в CSS-змінні, вбудовані стилі та дизайн-токени.

Інші конвертери

Див також: