Як комп'ютер створює кольори: RGB, HEX та двійкові числа

#FF0000. #00FF00. #0000FF. Ви напевно вже бачили таке в макетах або коді. Виглядає як шифр або ігровий код. Насправді це назва кольору.

#FF0000

#00FF00

#0000FF

Зверху вниз: червоний, зелений, синій. Саме так комп’ютер називає кольори. Розберімося, звідки береться це позначення.

RGB — три літери, що створюють колір

Red, Green, Blue. Три основних кольори світла. Змішуючи їх у різних пропорціях, отримуємо всі кольори, які ми бачимо.

Ми бачимо RGB щодня

Де є екран — там майже завжди є RGB.

Монітор / TV — кожен піксель складається з трьох точок: червоної, зеленої та синьої
Екран смартфона — та сама структура, але менші пікселі
LED-підсвітка ігрової клавіатури — на кожній клавіші три LED: R, G, B
Підсвітка корпусу ПК — RGB-стрічка і є RGB-сигнал

Якщо достатньо збільшити екран, ви це побачите. Червоний, зелений, синій — і більше нічого. Мільйони маленьких RGB-крапок разом утворюють те зображення, яке ви бачите.

Кольори виходять із суміші

Кожен з RGB-каналів має інтенсивність від 0 до 255.

RGB(255, 0, 0) — лише червоний на максимумі → чистий червоний
RGB(0, 255, 0) — лише зелений на максимумі → чистий зелений
RGB(255, 255, 0) — червоний + зелений → жовтий
RGB(0, 0, 0) — всі вимкнені → чорний
RGB(255, 255, 255) — всі на максимумі → білий

Те, що червоний і зелений дають жовтий, може здаватися нелогічним, але це адитивне змішування світла. Це інше правило, ніж те, що ви вчили на уроках малювання (червоний + зелений = коричневий). Чим більше світла — тим яскравіше; змішавши всі кольори разом, отримаємо білий.

Спробуйте самі — посуньте три повзунки.

#FF5733

RGB · 255 · 87 · 51

R 255 11111111

G 87 01010111

B 51 00110011

8-значне число праворуч — це двійкове представлення цього каналу. Посуньте повзунок — число зміниться. Наступна тема: як з нулів і одиниць виходить 256 значень.

Чому саме від 0 до 255?

Комп’ютер оперує лише 0 та 1. Одна позиція, що зберігає 0 або 1, називається бітом. Що більше бітів — то вдвічі більше значень можна виразити.

0/1

1 біт

= 2 значення

0/10/1

2 біти

= 4 значення

0/10/10/10/1

4 біти

= 16 значень

0/10/10/10/1 0/10/10/10/1

8 бітів

= 256 значень ← один RGB-канал

8 бітів = 1 байт. На один колір припадає три RGB-канали, тобто 3 байти = 24 біти. 24 біти дають близько 16,7 мільйона кольорів. Цього достатньо для людського ока, тому 1 байт став стандартом для одного каналу.

Читаємо двійкові числа самостійно

Кожна позиція має фіксоване значення. Зліва направо: 128, 64, 32, 16, 8, 4, 2, 1 — степені двійки.

1282⁷

642⁶

322⁵

162⁴

82³

42²

22¹

12⁰

Складіть значення всіх позицій, де стоїть 1, — отримаєте десяткове число.

Приклад 1

0128

064

032

016

8 + 2 = 10

Приклад 2

1128

164

132

116

128 + 64 + 32 + 16 = 240

Приклад 3 — усі 8 позицій рівні 1

1128

164

132

116

128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = 255

Ось чому максимальне значення 8-бітного числа дорівнює 255. Саме тому діапазон одного RGB-каналу — від 0 до 255.

HEX — ті самі числа, але коротше

RGB(255, 255, 255) — 16 символів. Вписувати це щоразу в CSS або поле дизайн-інструмента незручно. Тому й з’явився коротший спосіб запису тих самих чисел.

Що таке шістнадцяткова система

Шістнадцяткова система записує значення від 0 до 15 одним символом. Але в звичних цифрах є лише 0–9 — десять символів. Бракуючі шість запозичені з алфавіту.

0→0

1→1

2→2

3→3

4→4

5→5

6→6

7→7

8→8

9→9

10→A

11→B

12→C

13→D

14→E

15→F

Правила прості:

0–9 — як завжди
з 10 починається A
F — максимум для одного символу (= 15)

Чому саме шістнадцяткова?

4-бітне двійкове число (0000–1111) дає рівно 16 значень.

0000→0

0001→1

0010→2

0011→3

0100→4

0101→5

0110→6

0111→7

1000→8

1001→9

1010→A

1011→B

1100→C

1101→D

1110→E

1111→F

4 двійкові біти = 1 шістнадцятковий символ. Чотири символи стискаються до одного. Оскільки RGB-канал — 8 бітів, він перетворюється рівно на два шістнадцяткових символи.

Як перевести RGB у HEX

Перетворимо RGB(255, 87, 51).

Перетворюємо R у шістнадцяткове

255→FF

Перетворюємо G у шістнадцяткове

87→57

Перетворюємо B у шістнадцяткове

51→33

Додаємо # на початку, порядок R·G·B

#FF5733

Запис зі 14 символів стискається до 7 символів.

Розпізнаємо колір по HEX

Поглянувши на HEX у зворотному порядку, можна приблизно визначити колір.

#FF5733 — R максимальний (FF), G середній (57), B низький (33) → помаранчевий з переважанням червоного
#3576E0 — R низький (35), G середній (76), B сильний (E0) → синій з легким фіолетовим відтінком
#29A85A — R низький (29), G сильний (A8), B низький (5A) → свіжий зелений

Якщо лише за трьома парами символів ви розрізняєте «помаранчевий чи синій», дизайнери та розробники починають говорити однією мовою.

Коротко про головне

RGB — три канали (червоний, зелений, синій), кожен від 0 до 255
8-бітне двійкове число — ось звідки беруться 256 значень одного каналу
HEX — та сама числова інформація, записана коротше — двома символами

Коли ці три поняття з’єднуються в одне ціле, кольоровий код перестає бути шифром. Три числа RGB — це ті самі шість символів HEX.

Наступний крок — перекласти ці числа на мову дизайнера. Запити на кшталт «трохи яскравіше», «менш насичено» або «те саме на папері» важко опрацювати лише засобами RGB і HEX. Як із цим справляються HSL, CMYK та OKLCH — читайте в RGB — це ще не все: колірні нотації HSL, CMYK та OKLCH.