Цвет в вебе: почему #FF0000 — это красный

Дизайнер прислал макет, а цвета в нём подписаны загадочно: #2563EB, #FF0000, #0F172A. Решётка, цифры, буквы — на оттенок совсем не похоже. Между тем это самый обычный способ записать цвет, и, разобравшись один раз, вы будете читать эти коды как названия. Начнём с того, из чего вообще складывается цвет на экране.

Экран собирает цвет из трёх лучей

Любая точка экрана светится тремя цветами сразу: красным, зелёным и синим. Отсюда и название системы — RGB, red-green-blue. Смешивая их в разной яркости, экран получает любой оттенок. Яркость каждого канала задают числом от 0 (канал погашен) до 255 (канал на максимуме):

rgb(255, 0, 0)  — красный на максимуме, остальные погашены = чистый красный
rgb(37, 99, 235) — немного красного, побольше зелёного, много синего = синий

Смешение здесь не как у красок на бумаге, а как у лучей света: цвета складываются. Все три канала на максимум — получается белый rgb(255, 255, 255). Все три в ноль — чёрный rgb(0, 0, 0). С красками наоборот: чем больше намешал, тем темнее. А на экране «всё вместе» даёт свет.

Почему 255, а не 100

Логичный вопрос: почему яркость меряют до 255, а не по-человечески до 100? Потому что 256 градаций (от 0 до 255) — это ровно один байт, минимальная удобная порция памяти. Компьютеру дешевле хранить канал в одном байте, чем в проценте. А 256 значений на канал — это уже достаточно тонкая градация, чтобы глаз не замечал ступенек между соседними оттенками.

HEX — та же тройка, только шестнадцатеричная

Писать rgb(37, 99, 235) длинно. Поэтому те же три числа записывают компактно — в шестнадцатеричном виде, и это и есть HEX-код. Фокус в том, что число от 0 до 255 умещается ровно в две шестнадцатеричные цифры (от 00 до FF, где FF = 255). Три канала по две цифры — шесть знаков после решётки:

#RRGGBB
#2563EB → 25 = 37 (R), 63 = 99 (G), EB = 235 (B) → rgb(37, 99, 235)

Буквы A–F в коде — это просто «цифры» больше девяти: шестнадцатеричная система считает 0–9, потом A(10), B(11)…F(15). Тот же принцип, что и с двоичным счётом в байтах и гигабайтах, только основание не 2 и не 10, а 16. Теперь #FF0000 читается сразу: FF — красный на максимум (255), зелёного и синего по нулю. Чистый красный.

Перевести цвет в любую сторону — RGB в HEX или обратно — и заодно увидеть HSL и контрастность можно в конвертере цвета RGB ⇄ HEX.

Сколько всего таких цветов

Раз у каждого из трёх каналов 256 значений, всего комбинаций:

256 × 256 × 256 = 16 777 216

Почти 17 миллионов оттенков — это и есть «True Color», 24-битный цвет, который сегодня показывает любой монитор. Отсюда понятно, почему цвета не записывают словами: названий на 17 миллионов не напасёшься. В CSS зарезервированных имён вроде red или teal всего около полутора сотен, а HEX и RGB задают точно любой из миллионов.

Сокращённая запись

Иногда HEX короче — три знака вместо шести: #27E. Это не другой формат, а сокращение: каждую цифру просто удваивают. #27E разворачивается в #2277EE. Работает такая запись только когда в каждом канале обе цифры одинаковы, поэтому в макетах чаще пишут полную форму из шести знаков — она описывает любой цвет без ограничений.

Коротко

Цвет на экране — это яркости трёх каналов (красный, зелёный, синий), каждая от 0 до 255. HEX-код записывает те же три числа шестнадцатеричными парами: #FF0000 — это 255 красного и по нулю остального, то есть красный. Всего таких цветов 16,7 миллиона, и именно поэтому их удобнее задавать кодом, а не словом.