← К оглавлению
Alterna · глава 20.1

RGB-цвет и цветовые модели

Аддитивное и субтрактивное смешение. Глубина цвета. HEX и RGB коды.

Цветовые модели: как кодируется цвет

Цветовая модель — это способ описать цвет набором чисел (каналов). Выбор модели зависит от способа вывода: экран использует аддитивную модель, печать — субтрактивную.

🖥 RGB (Red, Green, Blue)

Аддитивная модель — цвет получается сложением света. Все каналы = белый, все = 0 — чёрный. Используется в экранах, камерах, вебе.

Каждый канал: 0…255 (8 бит). Три канала = 24 бита = 16.7 млн цветов

🖨 CMYK (Cyan, Magenta, Yellow, Key)

Субтрактивная модель — цвет получается вычитанием света из белой поверхности. Используется в полиграфии: краска поглощает часть спектра белого.

Чёрный (Key) добавляется для глубины и экономии цветных чернил

🎨 HSV / HSL

Модель «по пользователю»: Hue — оттенок (0-360°), Saturation — насыщенность, Value (яркость) или Lightness (светлота). Удобна для подбора цвета в дизайне.

HSV: cone, HSL: double cone. Photoshop, Figma, GIMP используют HSV-слайдеры

🔬 LAB (L*, a*, b*)

Аппаратно-независимая модель: L — светлота (0…100), a — красно-зелёная ось, b — сине-жёлтая ось. Описывает воспринимаемый цвет, независимый от устройства.

ΔE — разница цветов в LAB. Используется для профессиональной цветопередачи
🎨 Интерактивный RGB-миксер (аддитивное смешение)

Аддитивное (RGB)

Сложение R + G + B = светлота. Двигай ползунки и наблюдай результат.

R 128
G 128
B 128
#808080 rgb(128, 128, 128)

Субтрактивное (CMYK)

Вычитание из белого. C поглощает красный, M — зелёный, Y — синий.

C
M
Y
K
#FFFFFF rgb(255, 255, 255)
🔬 Цветовая схема изображения

Выбери цветовую схему — как изображение будет выглядеть в разных моделях

Модель: RGB — аддитивное смешение
🌈 CIE 1931 — диаграмма цветности (Chromaticity Diagram)

CIE 1931 xyY — двухмерная проекция пространства LAB. Координаты x и y описывают цветность (оттенок и насыщенность), а Y — яркость. Подковообразная кривая (спектральный локус) ограничивает все видимые человеческим глазом цвета: от фиолетового (380 нм) до красного (780 нм). Прямая линия между фиолетовым и красным — «пурпурная граница» (Purple line). Точка D65 — стандартный белый (6500K).

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

● R ● G ● B ● D65 ▲ sRGB ▲ Adobe
Координаты xyY:
x
0.31
y
0.33
Y
0.50
Яркость (Y):
5%50%100%
Цветовые охваты (нажми показать):
Кликни на диаграмму для точных координат. Спектральная кривая — граница видимых цветов.

Глубина цвета

Глубина = сколько бит выделяется на кодирование цвета одного пикселя. Связь с палитрой: N = 2i, где i — глубина в битах. Подробнее формула I = X × Y × i — в главе 9.4.

ГлубинаКаналов на каналФормулаМакс. цветовПример
1 битмонохром2Ч/Б fax, 1-битный скан
4 бита2416Старые игровые консоли (NES)
8 бит1 байт на пиксель28256Grayscale, веб-графика, индексированные PNG
16 бит5+5+5 (RGB565) или 5+6+521665 536HighColor, фото в телефонах (канал ~5-6 бит)
24 бита8+8+8 (по 256 уровней)22416 777 216TrueColor, JPEG, типичные фото
32 бита8+8+8+8 (RGBA)2324 294 967 296PNG с альфа-каналом, HDR-экраны
48 бит16+16+16 (по 65536 уровней)248281 триллионПрофессиональный сканер, RAW, лабораторная печать

Задача: объём изображения

Изображение 1920×1080, глубина 24 бита. Объём = 1920 × 1080 × 24 = 49 766 400 бит = 6 220 800 байт ≈ 5.94 МБ. Формула I = X × Y × i — глава 9.4.

Формулы из главы 9.4 Объём растрового изображения: I = X × Y × i (бит)
Где X, Y — разрешение (пиксели), i — глубина цвета (бит/пиксель)
Перевод в байты: Iбайт = Iбит / 8
Связь палитры и глубины: N = 2i
📷 Камера: анализ цвета в реальном времени
Доминирующий цвет
#808080
rgb(128, 128, 128)
Палитра кадра
Гистограмма яркости
Нажмите «Включить камеру» для доступа к веб-камере
🎯

Мини-тест: 5 вопросов

XP: 0