Конвертер кольорів
Введіть hex-код кольору, щоб побачити його еквіваленти в RGB та HSL із значеннями окремих каналів червоного, зеленого та синього.
Як користуватися цим конвертером кольорів
- Введіть HEX-код кольору
Введіть 6-значний HEX-код у поле (наприклад, FF6B35 або 00FF88). Символ # вказувати не потрібно.
- Перегляньте значення RGB
Результати для червоного (Red), зеленого (Green) та синього (Blue) каналів відображають значення від 0 до 255 для кожного компонента.
- Перевірте результат HSL
Перегляньте результат HSL: відтінок (0–360°), насиченість та світлота — це корисно для коригування кольору.
Як працює цей конвертер кольорів
Цей інструмент перетворює шістнадцятковий код кольору в представлення RGB (червоний, зелений, синій) та HSL (відтінок, насиченість, світлота). Кожна шістнадцяткова пара відповідає 8-бітному значенню каналу (0–255), а перетворення в HSL використовує стандартну математику колірного простору.
R = hex[0:2] → десяткове; G = hex[2:4] → десяткове; B = hex[4:6] → десяткове Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — чистий чорний.
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — чистий білий. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — середній сірий.
- ✓ Введене значення є коректним 6-значним шістнадцятковим кодом кольору.
- ✓ Альфа-канал не підтримується в цій версії.
- Перетворення в CMYK потребує колірного профілю і не включене сюди.
Розуміння колірних моделей
HEX, RGB та HSL — це різні способи опису одного й того самого кольору. HEX кодує RGB як 6-значний шістнадцятковий рядок: кожна пара символів — це один 8-бітний канал (0–255). RGB виражає ті самі значення у вигляді трьох чисел, що відповідають адитивним основним кольорам, які випромінюють екрани. HSL (Hue, Saturation, Lightness) — це циліндрична модель: відтінок (hue) — це кут на колірному колі (0° — червоний, 120° — зелений, 240° — синій), насиченість (saturation) — інтенсивність кольору, а світлота (lightness) — яскравість. Дизайнери часто віддають перевагу HSL при програмному налаштуванні кольорів: зміна лише світлоти робить колір темнішим або світлішим без зміни відтінку, а регулювання насиченості змінює його виразність.
Сценарії використання конвертації кольорів для розробників
Розробники конвертують кольори під час створення дизайн-систем, впровадження тем, генерації колірних палітр та налагодження CSS. Дизайн-токени часто зберігають кольори у форматі HEX; конвертація в RGB або HSL дозволяє виконувати обчислення під час виконання, наприклад, для накладання прозорості або перевірки доступності контрасту. Перемикачі тем можуть потребувати створення світліших або темніших варіантів базового кольору за допомогою HSL. Автоматизовані інструменти доступності конвертують кольори для розрахунку коефіцієнтів яскравості та контрастності. Під час налагодження макета або помилок оформлення перегляд HEX-значення як RGB або HSL допомагає визначити, який канал налаштовано неправильно. Конвертація кольорів також використовується у візуалізації даних, бібліотеках діаграм та динамічному оформленні інтерфейсу.
Часті запитання
Чи можу я ввести 3-значний hex-код?
Наразі цей інструмент очікує 6-значний код. Для 3-значних скорочень, таких як F60, спочатку розгорніть їх до FF6600.
Що таке HSL?
HSL означає Hue (відтінок), Saturation (насиченість), Lightness (світлота). Це альтернативний спосіб опису кольорів, який деякі дизайнери вважають більш інтуїтивним, ніж RGB.