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

Оновлено: 02.10.2026

Введіть назву кольору CSS або його код, щоб побачити значення RGB, HEX, HSL, HWB, CMYK і NCol, а також попередній перегляд кольору.

Конвертер кольорів HEX ⇄ RGB ⇄ HSL

Формула конвертера кольорів

Формула

\[R=16h_1+h_2,\qquad G=16h_3+h_4,\qquad B=16h_5+h_6\]

Де:

\(h_1,\ldots,h_6\) — шість цифр кольору HEX, прочитаних як значення від 0 до 15; літери від A до F позначають числа від 10 до 15.
\(R\), \(G\) і \(B\) — значення каналів червоного, зеленого та синього, кожне від 0 до 255.

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

Конвертер кольорів – приклад обчислення

Приклад: початковим значенням за замовчуванням є skyblue. Цей іменований колір відповідає #87CEEB, тож його пари шістнадцяткових цифр можна перетворити на RGB.

\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]

Результат: колір skyblue має значення HEX #87CEEB і значення RGB rgb(135, 206, 235). Його значення HSL становить приблизно 197° відтінку, 71% насиченості та 73% світлоти.

Як користуватися конвертером кольорів

Введіть колір у поле Колір. Можна почати зі значення за замовчуванням skyblue, ввести назву кольору CSS, наприклад red, або вказати код, як-от #f00 чи rgb(255,0,0).
Перевірте результат у полі Колір, щоб побачити візуальний попередній перегляд розпізнаного значення.
Скопіюйте потрібний формат з полів Назва, RGB, HEX, HSL, HWB, CMYK або NCol.

Якщо в полі Назва зазначено «немає назви», це означає, що для кольору немає відповідника у списку іменованих кольорів конвертера. Числові результати все одно можуть описувати дійсний колір.

Що означають формати кольорів

Цифровий колір можна описати кількома способами, не змінюючи його вигляду. HEX записує червоний, зелений і синій як пари шістнадцяткових цифр: #87CEEB означає червоний 87, зелений CE і синій EB у системі з основою 16. RGB виражає ті самі канали десятковими числами від 0 до 255. Якщо ви хочете окремо опрацювати арифметику в системі з основою 16, скористайтеся конвертером шістнадцяткових чисел; він перетворює числа, а не повні значення кольорів CSS.

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

CMYK дає значення блакитного, пурпурного, жовтого та чорного, отримані з кольору екрана. NCol — це позначення на основі відтінку, яке надає конвертер; у CSS воно не таке поширене, як HEX, RGB чи HSL. Формат виводу змінює спосіб запису кольору, а не сам обраний колір. Невеликі розбіжності у відображуваних відсотках можуть виникати через округлення.

Практичні обмеження та поради

Конвертеру потрібне введення, яке розпізнає його парсер кольорів. Стандартні назви кольорів CSS і поширені коди кольорів у стилі CSS — хороші відправні точки. Тризначний код HEX — це скорочення: наприклад, #f00 розгортається в #ff0000. Літери в HEX не залежать від регістру, тож #87ceeb і #87CEEB позначають той самий колір.

Деякі введення містять значення альфа-каналу, яке керує прозорістю. Для розпізнаних введень з альфа-каналом результати RGB, HSL, HWB і NCol використовують форми з альфа-каналом. Перевіряйте кожен результат перед копіюванням в іншу програму: не кожен зі списку форматів описує прозорість однаково. Попередній перегляд також може виглядати інакше на іншому тлі, коли колір частково прозорий.

CMYK тут — це математичне перетворення з цифрового кольору, а не перетворення за друкарським профілем. Друкований вигляд залежить від принтера, чорнил, паперу та налаштувань керування кольором, тому, коли точний виробничий колір має значення, використовуйте відповідний робочий процес друку. Так само вигляд кольору на екрані залежить від дисплея та його налаштувань; збігу числових значень само по собі недостатньо, щоб гарантувати однаковий вигляд на кожному пристрої.

Якщо ви розміщуєте колір HEX у параметрі запиту URL, пам’ятайте, що # має в URL спеціальне значення. За потреби скористайтеся кодувальником URL, щоб закодувати значення.

Часті запитання

Як перетворити RGB у HEX вручну?

Перетворіть кожен канал RGB з десяткової системи на дві шістнадцяткові цифри, а потім з’єднайте три пари після знака #. Поділіть значення каналу на 16: ціла частина частки — це перша цифра, а остача — друга. Наприклад, 206 дає частку 12 (C) і остачу 14 (E), тож отримуємо CE. Значення менше за 16 потребує нуля на початку, наприклад 9 стає 09.

Як обчислити HSL з RGB?

Спочатку поділіть кожен канал RGB на 255, потім знайдіть найбільше значення \(M\) і найменше значення \(m\). Світлота дорівнює \(L=(M+m)/2\). Якщо \(M=m\), насиченість дорівнює нулю, а відтінок не має осмисленого значення. Інакше насиченість дорівнює \((M-m)/(1-|2L-1|)\); відтінок залежить від того, який канал найбільший. Наприклад, чистий червоний, rgb(255, 0, 0), — це hsl(0, 100%, 50%).

Яке співвідношення контрасту є хорошим для кольорів тексту й тла?

Для звичайних цілей WCAG 2.2 рівня AA прагніть щонайменше 4,5:1 для звичайного тексту та 3:1 для великого тексту. Цілі рівня AAA — відповідно 7:1 і 4,5:1. Сам конвертер кольорів не може сказати, чи пара відповідає цим цілям: контраст залежить від обох кольорів. Перевіряйте фактичний передній план і тло разом, включно з тлом, видимим крізь прозорі кольори.

Чому сірий колір має значення відтінку?

Відтінок математично невизначений, коли колір не має насиченості, як-от значення RGB з трьома однаковими каналами. Конвертер може показувати значення-заповнювач відтінку, часто 0°, щоб позначення HSL або HWB залишалося повним. Це число не робить сірий червонуватим. Коли насиченість наближається до нуля, невеликі зміни каналів також можуть спричиняти великі зміни відтінку у результаті без помітної зміни вигляду.

Чи змінює значення альфа-каналу RGB-канали кольору?

Альфа керує тим, наскільки колір видно над його тлом; сама по собі вона не змінює збережені RGB-канали кольору. Значення альфа 0 — повністю прозорий, а 1 — повністю непрозорий. Видимий результат залежить від тла: для кожного каналу відображуване значення приблизно дорівнює \(\alpha\times\text{переднього плану}+(1-\alpha)\times\text{тла}\). Тому прозорий червоний може виглядати рожевим над білим.

Чому колір може трохи змінюватися після перетворення туди й назад?

Перетворення можуть вносити округлення. Канали RGB зазвичай зберігаються як цілі числа від 0 до 255, тоді як HSL та інші формати можуть показувати округлені градуси чи відсотки. Повторне введення цих округлених результатів може дати трохи інші значення RGB. Щоб зберегти точний колір RGB під час редагування чи копіювання, зберігайте його початкове значення RGB або шестизначне HEX, а не покладайтеся на округлені проміжні результати.