tigtools

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

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

Працює у вашому браузері Без реєстрації

Розпізнано як HEX.

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

Тут CMYK обчислюється за простою формулою без керування кольором. Для друку конвертуйте колір за ICC-профілем, наданим вашою друкарнею.

Як користуватися

  1. Введіть або вставте колір, наприклад #1e90ff, rgb(30 144 255) або oklch(65% 0.18 250). Також можна вибрати колір за допомогою палітри.
  2. Перевірте зразок кольору, щоб переконатися, що це саме той колір.
  3. Скопіюйте потрібний формат зі списку. У значеннях із прозорістю зберігається альфа-канал.

Як це працює

Підтримувані формати: HEX із 3, 4, 6 або 8 цифрами (4-та й 8-ма цифри позначають альфа-канал), rgb() і rgba() із числами або відсотками, hsl() і hsla(), hwb(), oklch() та cmyk() із відсотками або числами від 0 до 100. Підтримується як класичний синтаксис із комами, так і сучасний синтаксис із пробілами та «/ alpha». Для відтінку можна використовувати deg, turn, rad і grad. Назви кольорів, як-от «tomato», не розпізнаються — скористайтеся палітрою або введіть код.

Усі перетворення виконуються через sRGB. HSL і HWB — це прості перетворення значень RGB, тому конвертуються точно. OKLCH — перцептивний простір: однакові кроки світлоти виглядають приблизно однаково відмінними, тому цей формат зручний для створення палітр. Обчислення виконуються за опублікованими матрицями OKLab. Деякі кольори OKLCH виходять за межі відображення sRGB; інструмент повідомляє про це й показує найближчий колір, який можна відобразити.

CMYK обчислюється за поширеною спрощеною формулою (K = 1 − найбільший канал RGB). Реальний результат друку залежить від паперу, фарби й профілю ICC, тому сприймайте ці значення як початкові, а не як специфікацію для друку.

Приклади

Від HEX-коду бренду до CSS

У фірмовому стилі вказано #0b5d1e. Вставте цей код, щоб отримати rgb(11, 93, 30) для старіших версій CSS, hsl(133.9, 78.8%, 20.4%) для ручного налаштування світлоти й значення oklch() для сучасних функцій кольору CSS.

Колір із прозорістю

rgba(0, 0, 0, 0.5) перетворюється на #00000080. Останні дві HEX-цифри (80) — це альфа-канал: 128 із 255, тобто приблизно 50 %.

Перевірка значення OKLCH із файлу дизайну

oklch(70% 0.4 150) — це дуже насичений зелений колір, який екрани sRGB не можуть відобразити. Інструмент позначає його й показує найближчий колір sRGB, щоб ви знали, що на більшості дисплеїв дизайн виглядатиме інакше.

Поширені запитання

Чому після перетворення в HSL і назад HEX іноді змінюється на одиницю?

У HEX для кожного каналу зберігаються цілі числа від 0 до 255. Значення в інших форматах округлюються для відображення (HSL — до одного десяткового знака), тому під час зворотного перетворення округленого значення результат може відрізнятися на одиницю. Якщо потрібне точне вихідне значення, скопіюйте HEX.

Чи підходить значення CMYK для друку?

Ні, не сам по собі. Тут використовується проста формула без колірного профілю. У друкарнях застосовують профілі на кшталт FOGRA або GRACoL, які дають інші значення. Зверніться до друкарні або виконайте перетворення в програмі з керуванням кольором.

Що таке OKLCH і чи можна використовувати його в CSS?

OKLCH описує колір через перцептивну світлоту, насиченість і відтінок. Актуальні версії основних браузерів підтримують oklch() у CSS. Якщо потрібно підтримувати старіші браузери, додайте резервне значення HEX або rgb().

Що означає 8-значний HEX-код?

#RRGGBBAA: останні дві цифри позначають непрозорість — від 00 (повністю прозорий) до ff (повністю непрозорий). У 4-значному форматі #RGBA усе працює так само, але для кожного каналу використовується одна цифра.

Конфіденційність

Перетворення кольорів відбувається у вашому браузері. Введені дані нікуди не надсилаються й не зберігаються.