Цветовая модель RGB: каналы R/G/B, hex и rgb() для дизайнера

RGB — это аддитивная цветовая модель, в которой цвет собирается сложением трех каналов света: красного (red), зеленого (green) и синего (blue). Каждый канал задается числом от 0 до 255, а их комбинация описывает конкретный оттенок на экране. Ниже разберем, как устроены каналы и запись hex, как оформить цвет в CSS через rgb() и rgba(), чем RGB отличается от CMYK и от HSV/HSL, и что дает пространство sRGB.

Сразу важная оговорка. RGB — это модель для устройств, которые сами излучают свет: мониторов, телефонов, телевизоров, светодиодов. Для печати на бумаге используют другую модель — CMYK, о ней отдельный раздел.

Как устроены каналы R, G, B и диапазон 0-255

В RGB три канала: red, green, blue. Каждый отвечает за интенсивность своего цвета света. Чем больше значение, тем ярче светится этот компонент.

Стандартная запись — 8 бит на канал, то есть значение от 0 до 255 (256 уровней). Три канала по 256 уровней дают 256 x 256 x 256 = 16 777 216 сочетаний, отсюда и известная цифра «около 16,7 миллиона цветов». Это называют глубиной цвета 24 бита (True Color).

Логика сложения света простая:

• (0, 0, 0) — все каналы выключены, света нет, это черный.
• (255, 255, 255) — все каналы на максимуме, свет складывается в белый.
• (255, 0, 0) — чистый красный, (0, 255, 0) — зеленый, (0, 0, 255) — синий.
• (255, 255, 0) — красный плюс зеленый дают желтый.

Именно поэтому модель называют аддитивной: цвет получается прибавлением света, а не смешиванием красок. На физическом уровне пиксель экрана состоит из трех субпикселей (красный, зеленый, синий), и глаз воспринимает их совместное свечение как единый оттенок.

Запись цвета RGB в вебе: hex, rgb() и rgba()

В вебе один и тот же цвет RGB записывают несколькими способами. Самый частый — шестнадцатеричный (hex) в формате #RRGGBB, где каждая пара символов кодирует один канал в значениях от 00 до ff (это 0-255 в десятичной системе).

/* Три записи одного цвета - насыщенного синего (0, 0, 255) */
.link {
  color: #0000ff;        /* hex, формат #RRGGBB */
  color: rgb(0, 0, 255); /* классический синтаксис rgb() */
  color: rgb(0 0 255);   /* современный синтаксис CSS Color 4, через пробел */
}

Если в каждой паре hex символы одинаковые, запись можно сократить до трех символов: #ff6600 эквивалентно #f60.

:root {
  --brand: #ff6600;      /* оранжевый: R=255, G=102, B=0 */
  --brand-short: #f60;   /* та же краска в сокращенной форме */
}

Для прозрачности добавляют четвертый канал — альфу. В функции rgba() альфа задается числом от 0 (полностью прозрачно) до 1 (непрозрачно). В новом синтаксисе rgb() альфу пишут после слэша, и функции rgb() и rgba() в современных браузерах работают одинаково.

.overlay {
  background: rgba(255, 0, 0, 0.5); /* красный, непрозрачность 50% */
  background: rgb(255 0 0 / 50%);   /* то же значение, синтаксис CSS Color 4 */
}

Альфу можно записать и в hex — форматом #RRGGBBAA (8 символов): #ff000080 — это красный примерно с 50% непрозрачности (80 в hex — это 128 из 255).

Чем RGB отличается от CMYK

CMYK — модель для печати. Ее каналы: cyan (голубой), magenta (пурпурный), yellow (желтый) и key (черный, буква K). Она субтрактивная: краска на бумаге не излучает свет, а поглощает часть отраженного. Чем больше краски, тем меньше света возвращается в глаз, тем темнее результат.

Не путайте RGB и CMYK. RGB складывает свет: больше каждого канала — ближе к белому. CMYK вычитает свет, отраженный от бумаги: больше краски — ближе к черному. Поэтому один макет на экране и в печати выглядит по-разному, а файл для типографии готовят в CMYK, а не в RGB.

Сравнение трех моделей в одной таблице:

Отдельно про охват: RGB-экраны и CMYK-печать перекрывают разные наборы цветов. Насыщенные экранные оттенки (яркий синий, кислотно-зеленый) печать часто воспроизвести не может, поэтому при подготовке к печати цвета корректируют вручную.

RGB и HSV/HSL: зачем нужны еще одни координаты

HSV и HSL — это не новые цвета и не замена RGB. Это другой способ записать те же самые цвета из RGB-пространства, удобный для подбора руками. Любое значение HSV/HSL однозначно пересчитывается обратно в три числа R, G, B.

Каналы там смысловые, а не физические:

• H (hue) — тон, положение на цветовом круге от 0 до 360 градусов (0 — красный, 120 — зеленый, 240 — синий).
• S (saturation) — насыщенность, от серого (0%) до чистого цвета (100%).
• V (value) в HSV — яркость; L (lightness) в HSL — светлота. Это близкие, но не тождественные параметры: у HSL при L=50% цвет самый насыщенный, а при L=100% всегда белый.

RGB и HSV/HSL описывают одно и то же цветовое пространство разными координатами. Переход между ними — это пересчет, а не смена палитры. Разница только в удобстве: в RGB трудно «сделать чуть светлее, не меняя оттенок», а в HSL для этого достаточно поднять одно число.

В CSS для HSL есть функция hsl(). Чтобы перебрать оттенки одной насыщенности и светлоты, меняют только первое число — тон:

/* Один тон-круг: меняем только H, S и L оставляем прежними */
.tag-red   { background: hsl(0 70% 50%); }   /* красный */
.tag-green { background: hsl(120 70% 50%); } /* зеленый */
.tag-blue  { background: hsl(240 70% 50%); } /* синий */

/* Осветлить цвет, не трогая тон и насыщенность: растет только L */
.tag-blue-light { background: hsl(240 70% 80%); }

sRGB и цветовой охват: почему (255, 0, 0) — это еще не полный ответ

Тройка чисел (255, 0, 0) сама по себе не задает физически точный красный. Она говорит «максимум красного канала», но какой именно красный увидит зритель, зависит от цветового пространства устройства.

sRGB — это стандартное цветовое пространство, которое фиксирует, какому реальному цвету соответствуют конкретные значения R, G, B. Оно предложено HP и Microsoft и стало умолчанием для веба и большинства бытовых экранов. Если для файла не указан профиль, браузеры и многие программы трактуют его как sRGB.

Существуют пространства с более широким охватом, например Display P3: те же числа каналов означают там более насыщенные цвета. В CSS Color 4 к ним обращаются через функцию color():

.accent {
  /* обычный sRGB-красный */
  color: rgb(255 0 0);
  /* более насыщенный красный в пространстве Display P3 (шире охват) */
  color: color(display-p3 1 0 0);
}

Практический вывод для дизайнера: одни и те же RGB-числа на разных экранах и в разных профилях выглядят неодинаково, поэтому важные бренд-цвета проверяют на целевых устройствах, а не только в редакторе.

Где RGB работает: веб, игры, экраны

RGB — основа всего, что светится. Мониторы, телефоны, телевизоры и билборды строят изображение из красных, зеленых и синих субпикселей. Веб-страницы, интерфейсы, игры и цифровое фото хранят и обрабатывают цвет в RGB.

В игровых движках цвет тоже задают каналами R, G, B, но часто нормализованными числами от 0.0 до 1.0 вместо 0-255 (например, красный — это 1, 0, 0). Это те же каналы модели RGB, просто в масштабе, удобном для расчетов освещения.

RGB-подсветка корпусов и клавиатур работает на том же принципе: в каждом светодиоде три источника (красный, зеленый, синий), контроллер меняет их интенсивность и получает нужный оттенок.

Выводы

• RGB — аддитивная модель для излучающих экранов: цвет собирается сложением каналов red, green, blue, каждый от 0 до 255, что дает 16 777 216 оттенков.
• В CSS цвет RGB пишут как hex #RRGGBB, функциями rgb() и rgba(); альфа задает прозрачность (0-1 или проценты).
• CMYK — это другая, субтрактивная модель для печати; RGB и CMYK покрывают разные наборы цветов, макет для типографии готовят в CMYK.
• HSV и HSL — не новые цвета, а удобные координаты того же RGB-пространства для подбора тона, насыщенности и светлоты.
• Тройка R, G, B означает точный цвет только вместе с цветовым пространством; веб по умолчанию использует sRGB, для широкого охвата есть Display P3.

Где применяется / связь с практикой

Понимание RGB — базовый навык всюду, где цвет живет на экране: в веб-верстке, в интерфейсах и особенно в разработке игр. Геймдизайнеру важно уметь задавать цвет каналами, отличать экранную модель от печатной и осознанно работать с палитрой уровней и UI, а не подбирать оттенки наугад.

FAQ

Сколько цветов дает 8-битный RGB?
При 8 битах на канал каждый из трех каналов имеет 256 уровней, всего 256 в кубе, то есть 16 777 216 сочетаний. Для более тонких градиентов используют 10 или 16 бит на канал (глубокий цвет).

Можно ли перевести RGB в CMYK без потерь?
Не всегда точно: часть насыщенных экранных цветов выходит за охват печати, поэтому при конвертации их приближают к ближайшим печатным. Итог зависит от профиля печати и бумаги, поэтому цветопробу делают заранее.

Чем hex-запись отличается от rgb()?
Ничем по сути — это две формы одного и того же значения. #0000ff и rgb(0, 0, 255) задают один цвет; hex компактнее, а rgb() нагляднее показывает числа каналов и удобнее для генерации в коде.