Как компьютер создаёт цвета: RGB, HEX и двоичные числа

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

#FF0000

#00FF00

#0000FF

Сверху вниз: красный, зелёный, синий. Именно так компьютер называет цвета. Разберём, откуда берётся эта запись.

RGB — три буквы, из которых создаётся цвет

Red, Green, Blue. Три первичных цвета света. Смешивая их в разных пропорциях, можно получить любой видимый цвет.

Мы видим RGB каждый день

RGB встречается везде, где есть экран.

Монитор / Телевизор — каждый пиксель состоит из трёх точек: красной, зелёной и синей
Экран смартфона — та же структура, только пиксели меньше
Игровая клавиатура с подсветкой — под каждой клавишей три 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

Восьмизначное число справа — это двоичное представление данного канала. Двигайте слайдер — число меняется вместе с ним. Следующая тема: как из нулей и единиц получается 256 вариантов.

Почему именно от 0 до 255?

Компьютер оперирует только нулями и единицами. Одна ячейка, содержащая 0 или 1, называется битом (bit). С каждым добавленным битом количество возможных значений удваивается.

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 байт (byte). Один цвет — три канала 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)

Почему именно шестнадцатеричная система?

Четырёхзначное двоичное число (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.