Конвертер Кольорових Кодів

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

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

  1. Введіть значення

    Заповніть необхідні поля.

  2. Натисніть розрахувати

    Натисніть кнопку розрахувати для результатів.

  3. Перегляньте результати

    Перегляньте результати та поділіться за потреби.

Що таке перетворення кольорових кодів?

Перетворення кольорових кодів — це запис одного й того самого кольору в різних системах позначення, як-от HEX, RGB і HSL. Екран створює колір, змішуючи основні кольори світла — червоний, зелений і синій, тож будь-який колір зрештою зводиться до інтенсивності трьох каналів RGB. HEX стискає ці значення RGB у шестизначний шістнадцятковий рядок (#RRGGBB), тоді як HSL перебудовує їх так, як людина сприймає колір — через кут колірного кола, насиченість і світлість.

Чому перетворення важливе

  • Написання CSS — візьміть код HEX із макета й перетворіть його на RGB, що спрощує налаштування прозорості.
  • Корекція кольору — коли потрібно лише трохи затемнити колір, після перетворення на HSL достатньо змінити тільки значення L.
  • Співпраця — тримайте в узгодженні HEX дизайнера з Figma, змінні RGB розробника та колірні еталони друкарської команди.

У якому б форматі ви не ввели дані, цей конвертер одразу розраховує всі інші формати й показує справжній колір у попередньому перегляді.

Формула перетворення

HEX → RGB розбиває шістнадцяткове число на пари по дві цифри й читає кожну як десяткове число.

R = parseInt(hex[0:2], 16); G і B обчислюються так само. Приклад: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).

RGB → HSL спочатку нормалізує кожен канал до діапазону 0-1, а потім знаходить світлість.

L = (max + min) / 2
S = delta / (2 − max − min) (коли L > 0,5)
де delta = max − min. У прикладі вище max=1 та min=0,2 дають L = 0,6 (60%), S = 0,8/0,8 = 100% і кут кольору H ≈ 11°, що перетворюється на HSL(11°, 100%, 60%).

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

Яка різниця між HEX і RGB?
HEX виражає колір у шістнадцятковому вигляді (#FF5733), а RGB подає значення червоного, зеленого та синього в десятковому вигляді від 0 до 255 (255, 87, 51). Це два способи запису одного й того самого кольору.
Як перетворити код HEX на RGB?
Розбийте #RRGGBB на пари по дві цифри й переведіть кожну з шістнадцяткової системи в десяткову. Наприклад, #FF5733 дає FF=255, 57=87, 33=51, тобто RGB(255, 87, 51). Кожна пара позначає інтенсивність каналу від 00 (0) до FF (255).
Коли використовувати CMYK?
CMYK — це колірна модель для друку, що змішує блакитну, пурпурову, жовту та чорну фарби. Екрани та веб використовують RGB/HEX, які додають світло, а під час друку виконується перетворення на CMYK, що накладає фарби шарами. Оскільки колірні охоплення різняться, кольори на екрані можуть виглядати трохи інакше після друку.
Які переваги колірної моделі HSL?
HSL складається з відтінку, насиченості та світлості, що дозволяє інтуїтивно налаштовувати кольори. Наприклад, знизивши лише значення світлості (L), ви зберігаєте відтінок і легко отримуєте темніший варіант, що зручно для ефектів наведення та створення колірних палітр.
Що означають відтінок (H), насиченість (S) і світлість (L) у HSL?
Відтінок (H) — це кут на колірному колі від 0 до 360 градусів, де 0° — червоний, 120° — зелений, 240° — синій. Насиченість (S) — це інтенсивність кольору від 0 до 100%: 0% — сірий, 100% — найчіткіший колір. Світлість (L) — це яскравість від 0 до 100%: 0% — чорний, 100% — білий, а 50% — найчистіший колір.
Як позначаються білий і чорний?
Білий має всі канали на максимумі: #FFFFFF / RGB(255, 255, 255) / HSL(0, 0%, 100%). Чорний має всі канали на нулі: #000000 / RGB(0, 0, 0) / HSL(0, 0%, 0%). Відтінки сірого мають насиченість (S) 0% і відрізняються лише світлістю (L).
Що станеться, якщо значення RGB вийдуть за межі діапазону 0-255?
Кожен канал перед перетворенням на HEX автоматично обмежується (clamp): значення нижче 0 стають 0, а вище 255 — 255. Наприклад, RGB(300, -10, 128) обробляється як RGB(255, 0, 128), що дає #FF0080.
Чи можна одразу скопіювати результати перетворення?
Так. Натисніть на будь-який перетворений код HEX, RGB або HSL, щоб скопіювати його в буфер обміну, а попередній перегляд кольору дозволяє візуально підтвердити справжній колір, щоб вставити його прямо в CSS або інструмент дизайну.
Характеристики пристроїв 2026

Пов'язані Калькулятори

Калькулятор PPI/DPIPPI = sqrt(w^2 + h^2) / diagonalКалькулятор Співвідношення Сторінratio = w/gcd(w,h) : h/gcd(w,h)Калькулятор ПідмережCIDR bitwise maskКонвертер Систем ЧисленняparseInt(value, fromBase).toString(toBase)