Цветовая модель RGB: аддитивное смешение, каналы и глубина цвета

RGB — это аддитивная цветовая модель, в которой любой цвет собирается сложением света трех каналов: красного (Red), зеленого (Green) и синего (Blue). Название — это первые буквы этих трех цветов. Модель описывает не «как записать цвет в коде», а как устроен сам цвет на светящемся экране: пикселя без подсветки не видно, а нужный оттенок получается тем, насколько ярко горит каждый из трех каналов.

Ниже разберем, почему сложение называют аддитивным и откуда взялись именно эти три цвета, что такое глубина цвета и градации от 0 до 255, чем RGB отличается от CMYK и что такое цветовой охват (sRGB, Display P3). Код в статье прогнан, вывод в блоках — реальный.

Аддитивное смешение: цвет из света

Аддитивная модель означает, что цвет складывается из излучаемого света. Отправная точка — полная темнота: если ни один канал не светит, пиксель черный. Чем больше света добавляем, тем светлее результат, а когда все три канала горят на максимуме — получается белый.

Это легко представить как три прожектора — красный, зеленый и синий, — направленные в одну точку на темной стене. Там, где лучи накладываются попарно, видны вторичные цвета:

• красный плюс зеленый — желтый;
• зеленый плюс синий — голубой (cyan);
• синий плюс красный — пурпурный (magenta);
• все три вместе — белый.

Здесь важно не спутать модель со школьным смешением красок. Краски на бумаге работают наоборот: там каждый слой отнимает часть света, и смешение ведет к темному. RGB отнимать ничего не может — он только добавляет свет, поэтому и называется аддитивным. Отсюда же правило: минимум во всех каналах — черный, максимум — белый.

Почему именно красный, зеленый и синий

Выбор трех каналов — не случайность и не техническое удобство, а следствие устройства зрения. В сетчатке глаза есть три типа колбочек, каждый из которых сильнее всего реагирует на свой диапазон длин волн: условно «красный», «зеленый» и «синий». Мозг оценивает цвет по соотношению откликов этих трех типов.

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

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

Каналы и градации: значения 0-255

Чтобы задать цвет, каждому каналу назначают число — насколько ярко он горит. В самом распространенном формате на канал отводится 8 бит, то есть 256 градаций от 0 (канал погашен) до 255 (максимум). Три канала по 8 бит — это 24 бита на пиксель, такой режим называют True Color.

Несколько опорных цветов в записи (R, G, B):

• (0, 0, 0) — черный, света нет;
• (255, 255, 255) — белый, все каналы на максимуме;
• (255, 0, 0) — чистый красный;
• (0, 255, 0) — чистый зеленый;
• (0, 0, 255) — чистый синий;
• (128, 128, 128) — серый (все каналы равны и в середине шкалы).

Когда все три канала равны между собой, цвет всегда получается серым (от черного через серые к белому) — это удобный признак нейтрального тона. Оттенок задается именно разницей между каналами.

Глубина цвета: сколько цветов помещается

Глубина цвета — это число бит на канал; от нее зависит, сколько оттенков различимо. При 8 битах на канал каждый из трех каналов имеет 256 значений, а всего цветов получается 256 в кубе. Профессиональные дисплеи и HDR-контент используют 10 бит на канал — это уже 1024 градации и заметно больше цветов, что убирает видимые полосы (бандинг) на плавных градиентах.

Посчитаем аддитивное смешение и число цветов прямо в коде:

# Аддитивное смешение: складываем каналы (R, G, B), значения 0..255
red   = (255, 0, 0)
green = (0, 255, 0)
blue  = (0, 0, 255)

def mix(*colors):
    # канал = сумма по цветам, но не ярче максимума (экран не светит выше 255)
    r = min(255, sum(c[0] for c in colors))
    g = min(255, sum(c[1] for c in colors))
    b = min(255, sum(c[2] for c in colors))
    return (r, g, b)

print("красный + зеленый =", mix(red, green))       # ожидаем желтый
print("зеленый + синий   =", mix(green, blue))       # ожидаем голубой
print("синий + красный   =", mix(blue, red))         # ожидаем пурпурный
print("все три канала     =", mix(red, green, blue))  # ожидаем белый

# Глубина цвета: сколько всего цветов при N битах на канал
for bits in (8, 10):
    per_channel = 2 ** bits
    total = per_channel ** 3
    print(f"{bits} бит/канал: {per_channel} градаций, всего {total:,} цветов")

Реальный вывод:

красный + зеленый = (255, 255, 0)
зеленый + синий   = (0, 255, 255)
синий + красный   = (255, 0, 255)
все три канала     = (255, 255, 255)
8 бит/канал: 256 градаций, всего 16,777,216 цветов
10 бит/канал: 1024 градаций, всего 1,073,741,824 цветов

Число 16 777 216 («16,7 миллиона цветов» из рекламы мониторов) — это и есть 256 в кубе при 8 битах на канал. Складываются именно значения каналов, а не какие-то «оттенки»: желтый — это не отдельная краска, а красный плюс зеленый на полной яркости.

RGB и CMYK: сложение против вычитания

RGB работает там, где источник света сам излучает — экраны, проекторы, камеры. Для печати применяют CMYK: голубой (Cyan), пурпурный (Magenta), желтый (Yellow) и черный (Key/blacK). Это субтрактивная модель — краска на бумаге не излучает, а поглощает часть падающего света и отражает остаток.

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

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

Цветовой охват: sRGB, Display P3

Одни и те же числа (R, G, B) на разных экранах дают немного разный цвет, потому что зависят от цветового пространства — конкретной привязки базовых красного, зеленого и синего к реальным длинам волн. RGB задает принцип, а цветовое пространство — точные координаты.

• sRGB — стандарт по умолчанию для веба и большинства мониторов; если пространство не указано, обычно подразумевают его.
• Display P3 — более широкий охват, распространен на современных экранах Apple и мобильных устройствах; те же оттенки насыщеннее.
• Adobe RGB — широкий охват для допечатной подготовки, лучше перекрывает диапазон CMYK.

Для веб-разработки практический вывод простой: браузер по умолчанию трактует значения как sRGB, поэтому цвета в макете и в верстке совпадут, если оба в sRGB. Более широкие пространства (P3) в CSS задают отдельно и осознанно, когда экран это поддерживает.

Выводы

• RGB — аддитивная модель: цвет собирается сложением света трех каналов (красный, зеленый, синий), от черного (нет света) к белому (все каналы на максимуме).
• Три канала выбраны под три типа колбочек глаза — экрану достаточно обмануть три приемника, а не воспроизвести весь спектр.
• Градации задают числами 0-255 при 8 битах на канал; это 256 в кубе, то есть 16 777 216 цветов (True Color), а 10 бит на канал дают более миллиарда.
• RGB (сложение света, экраны) противоположна CMYK (вычитание, поглощение краской, печать); их вторичные цвета взаимно меняются местами.
• Одни и те же числа зависят от цветового пространства: для веба база — sRGB, для широких экранов — Display P3.

Где применяется и что учить дальше

Цветовая модель RGB — основа всего, что показывает светящийся экран: интерфейсов сайтов, мобильных приложений, игр, фото- и видеотехники. Для верстальщика это не абстракция: любой цвет в CSS — фон, текст, границы, градиенты — это те же три канала RGB, просто записанные числами или в шестнадцатеричном виде, а прозрачность добавляет четвертый параметр (альфа-канал).

Смежные темы: Верстка на CSS и использование Grid.

FAQ

RGB и HEX — это одно и то же? Модель одна: HEX (например, #FFA500) — это те же три канала RGB, записанные в шестнадцатеричном виде по паре знаков на канал. Меняется форма записи, а не принцип смешения.

Почему на экране черный — это «выключенный» цвет, а на бумаге — краска? Потому что экран излучает свет и черный получается отсутствием излучения, а бумага отражает свет, и черный на ней нужно нанести краской, поглощающей все каналы.

Что означает четвертое число в записи вида (255, 0, 0, 0.5)? Это альфа-канал — прозрачность, а не часть цветовой модели RGB. Он задает, насколько цвет перекрывает фон под собой, от 0 (полностью прозрачный) до 1 (непрозрачный).