Конвертер HEX у RGB кольори

Що таке HEX-кольоровий код?

HEX-кольоровий код — це шестисимвольний буквено-цифровий рядок, що використовується у веб-дизайні та цифровій графіці для представлення конкретного кольору. Формат відповідає шаблону #RRGGBB, де кожна двосимвольна пара кодує інтенсивність одного з трьох адитивних основних кольорів — червоного (RR), зеленого (GG) та синього (BB) — за допомогою шістнадцяткового запису (основа 16). Кожна пара варіюється від 00 (нульова інтенсивність) до FF (максимальна інтенсивність, що відповідає 255 у десятковому).

HEX-коди виникли з необхідності визначати кольори в HTML та CSS без використання іменованих ключових слів. Хоча CSS тепер підтримує кілька форматів кольорів, включаючи rgb(), hsl() та oklch(), HEX залишається найбільш широко використовуваним записом у front-end розробці, специфікаціях дизайну та посібниках із брендингу. Практично кожен вибір кольорів у таких інструментах, як Figma, Sketch, Adobe Photoshop та Canva, за замовчуванням відображає значення HEX.

Загальна кількість унікальних кольорів, що представляються шестизначними HEX-кодами, становить 16 777 216 (256 × 256 × 256). Це часто називають «True Color» або «24-бітний колір», що відповідає глибині кольору більшості сучасних дисплеїв. Кожен канал отримує 8 бітів (один байт), і три канали разом дають 24 біти кольорових даних.

HEX-коди нечутливі до регістру, тому #ff8000 і #FF8000 відносяться до одного й того самого кольору. Деякі посібники зі стилю надають перевагу великим літерам для зручності читання, тоді як мінімізатори CSS часто виводять малі літери для економії байтів — хоча на практиці різниця незначна.

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

Конвертувати HEX-кольоровий код у його RGB-еквівалент просто. Процес передбачає розділення шестисимвольного рядка на три пари та перетворення кожної пари з шістнадцяткової (основа 16) на десяткову (основа 10). Ось покроковий метод:

1. Видаліть символ решітки. Якщо HEX-код починається з #, видаліть його. Наприклад, #1A2B3C стає 1A2B3C.
2. Розділіть на три пари. Розділіть рядок на три групи по два символи: 1A, 2B, 3C.
3. Перетворіть кожну пару у десяткове. Використовуйте позиційну систему шістнадцяткового числення, де перша цифра множиться на 16, а друга додається:
   • Червоний: 1A → (1 × 16) + 10 = 26
   • Зелений: 2B → (2 × 16) + 11 = 43
   • Синій: 3C → (3 × 16) + 12 = 60
4. Запишіть значення RGB. Об'єднайте три десяткові значення: rgb(26, 43, 60).

Шістнадцяткові цифри та їх десяткові еквіваленти: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Запам'ятовування від A до F — це єдина частина, що відрізняється від стандартної десяткової арифметики.

Для програмного перетворення більшість мов пропонують вбудовані функції. У JavaScript parseInt("1A", 16) повертає 26. У Python int("1A", 16) робить те саме. CSS сам обробляє обидва формати, тому перетворення насамперед корисне, коли потрібно маніпулювати окремими кольоровими каналами у коді.

3-значні та 6-значні HEX-коди

CSS підтримує скорочений 3-значний формат HEX (#RGB) як зручність, коли кожна з трьох пар складається з однакових цифр. У цьому скороченні кожна окрема цифра розгортається шляхом подвоєння. Наприклад:

• #F80 розгортається до #FF8800 → rgb(255, 136, 0)
• #FFF розгортається до #FFFFFF → rgb(255, 255, 255)
• #000 розгортається до #000000 → rgb(0, 0, 0)
• #09C розгортається до #0099CC → rgb(0, 153, 204)
• #A3F розгортається до #AA33FF → rgb(170, 51, 255)

3-значний запис зменшує кількість доступних кольорів з 16,7 мільйона до лише 4 096 (16 × 16 × 16), тому він не може представляти кожен колір. Він найчастіше використовується для простих або добре відомих кольорів у CSS-файлах, де цінується стислість.

CSS також підтримує 4-значні (#RGBA) та 8-значні (#RRGGBBAA) HEX-коди, що включають альфа-канал (прозорість). Значення альфа слідує тій самій шістнадцятковій логіці: FF — повністю непрозорий, 00 — повністю прозорий. Наш конвертер зосереджений на стандартних 3- та 6-значних форматах.

Таблиця довідника HEX у RGB

Нижче наведено таблицю загальних HEX-кольорів та їх RGB-еквівалентів для веб-дизайну, іменованих кольорів CSS та популярних брендових палітр.