Цветовая модель RGB: как кодируется один пиксель

Цветовая модель RGB описывает любой цвет на экране как смесь трёх базовых составляющих: красной (Red), зелёной (Green) и синей (Blue). Каждый пиксель изображения хранит не «название цвета», а три числа - яркости этих трёх каналов. Складываясь, они дают итоговый оттенок: это аддитивная модель, в которой нулевые каналы означают чёрный цвет, а все каналы на максимуме - белый. Ниже разберём, как именно кодируется один пиксель, сколько бит он занимает, как из глубины цвета получается число различимых оттенков и как перевести значения каналов в привычный HEX-код. Чтобы сразу увидеть связь чисел и цвета, покрутите калькулятор ниже: он показывает образец цвета, его HEX, число бит на пиксель и общее число цветов, а дальше мы разберём каждую формулу строго.

Что такое канал и глубина цвета

Канал - это одна из трёх базовых составляющих цвета. У каждого канала есть числовое значение яркости: чем оно больше, тем сильнее «горит» соответствующий цвет. Сколько разных значений может принимать канал, определяет глубина цвета - число бит, отведённых на один канал. Обозначим её $b$. Тогда канал принимает $2^b$ различных значений, от $0$ до $2^b - 1$.

Самый распространённый стандарт - 8 бит на канал, его называют TrueColor. При $b = 8$ каждый канал хранит число от $0$ до $255$:

$2^8 = 256, \qquad \text{диапазон} = 0 \dots 255.$

Значение $0$ означает, что канал полностью погашен, а $255$ - что он на максимуме. Например, чистый красный - это $(255, 0, 0)$, белый - $(255, 255, 255)$, серый средней яркости - $(128, 128, 128)$. Менять глубину канала и сразу видеть, как сужается или расширяется диапазон значений, можно прямо в калькуляторе выше.

Рассчитать для своей задачи

Сколько бит занимает один пиксель

Пиксель хранит сразу три канала, поэтому число бит на пиксель равно глубине канала, умноженной на три:

$N_{\text{пикс}} = 3b.$

Для стандартной глубины $b = 8$ это даёт $3 \cdot 8 = 24$ бита на пиксель, то есть ровно $3$ байта. Отсюда и название формата - 24-битный цвет. Если к трём каналам добавляют четвёртый, альфа-канал прозрачности (модель RGBA), пиксель занимает уже $4b = 32$ бита, но сам цвет по-прежнему задают только три цветовых канала.

Зная вес одного пикселя, легко оценить объём всего несжатого изображения: нужно умножить число пикселей на число байт в пикселе. Картинка $1920 \times 1080$ при 8 битах на канал содержит около двух миллионов пикселей, и каждый весит 3 байта.

Рассчитать для своей задачи

На схеме видно, что пиксель - это просто три байта, лежащие подряд: первый отвечает за красный, второй за зелёный, третий за синий. Никакой дополнительной информации о цвете в пикселе нет - только три числа.

Сколько всего цветов кодирует модель RGB

Каждый из трёх каналов независимо принимает $2^b$ значений. Полное число различимых цветов - это число всех сочетаний трёх каналов, то есть произведение возможностей:

$K = 2^b \cdot 2^b \cdot 2^b = \left(2^b\right)^3 = 2^{3b}.$

Для глубины $b = 8$ получаем знаменитое число:

$K = 2^{24} = 16\,777\,216 \approx 16{,}7 \text{ млн цветов.}$

Важно почувствовать, как быстро растёт это число: увеличение глубины всего на один бит на канал утраивает показатель степени и умножает число цветов в $8$ раз. Поэтому переход от 8 к 10 битам на канал (формат для профессиональных дисплеев) поднимает палитру с 16,7 миллиона до более чем миллиарда оттенков. График «цветов от глубины» в калькуляторе показывает этот рост: ось намеренно логарифмическая, иначе 24-битный столбик раздавил бы все остальные.

Как пиксель превращается в HEX-код

В вёрстке и графических редакторах цвет обычно записывают шестнадцатеричным кодом вида #RRGGBB. Это та же тройка каналов, только каждое значение переведено из десятичной системы в шестнадцатеричную и записано двумя цифрами. Один канал в диапазоне $0 \dots 255$ занимает ровно две шестнадцатеричные цифры, потому что $255 = \text{FF}_{16}$, а две цифры дают $16^2 = 256$ комбинаций - столько же, сколько $2^8$.

Перевод одного канала идёт в два шага. Сначала делим значение на $16$ - частное даёт старшую цифру, остаток младшую:

$200 = 12 \cdot 16 + 8 = \text{C}8_{16}.$

Здесь $12$ кодируется буквой C, поэтому канал со значением $200$ превращается в C8. Собрав три канала подряд, получаем полный код цвета. Например, пиксель $(64, 160, 220)$ даёт код #40A0DC, а калькулятор выше пересчитывает HEX мгновенно при любом положении ползунков. Обратный перевод так же прост: каждую пару цифр читают как одно число, и #3FA0DC раскладывается в каналы $(63, 160, 220)$.

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

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

Частые ошибки

• Путают число значений канала и максимум. Канал принимает $2^b$ значений, но крайнее из них равно $2^b - 1$. При 8 битах это $256$ значений и максимум $255$, а не $256$.
• Считают число цветов как $3 \cdot 2^b$ вместо $2^{3b}$. Каналы комбинируются независимо, поэтому возможности перемножаются, а не складываются. Сложение дало бы всего $768$ цветов вместо $16{,}7$ миллиона.
• Забывают умножить на три при подсчёте веса пикселя. Глубина $b$ задана на один канал, а пиксель хранит три канала: на пиксель уходит $3b$ бит, а не $b$.
• Смешивают биты и байты. 24 бита на пиксель - это $3$ байта. При оценке размера файла в байтах не забудьте разделить итог в битах на $8$.
• Записывают HEX одной цифрой на канал. Каждый канал в формате #RRGGBB занимает ровно две шестнадцатеричные цифры, даже если значение маленькое: $5$ записывается как 05, а не как 5.

FAQ

Сколько бит занимает один пиксель в RGB? При стандартной глубине 8 бит на канал пиксель занимает $3 \cdot 8 = 24$ бита, то есть 3 байта. Если добавить альфа-канал прозрачности (RGBA), пиксель занимает 32 бита.

Почему именно 16,7 миллиона цветов? Потому что при 8 битах на канал число цветов равно $2^{24} = 16\,777\,216$. Каждый из трёх каналов даёт 256 значений, и они комбинируются независимо: $256^3 = 2^{24}$.

Как перевести RGB в HEX вручную? Переведите каждый канал из десятичной системы в шестнадцатеричную, дополнив до двух цифр, и запишите их подряд после знака решётки. Например, $(64, 160, 220)$ даёт #40A0DC.

Коротко

Пиксель в цветовой модели RGB кодируется тремя числами - яркостями каналов Red, Green и Blue. При глубине $b$ бит на канал каждый канал принимает $2^b$ значений, пиксель занимает $3b$ бит, а число различимых цветов равно $2^{3b}$. Для стандартных 8 бит это 24 бита на пиксель и $16\,777\,216$ цветов. Тот же цвет записывают HEX-кодом #RRGGBB, переводя каждый канал в две шестнадцатеричные цифры. Калькулятор выше собирает всю эту цепочку - от значений каналов до HEX и числа цветов - за один проход.