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

Содержание и основные понятия

← К оглавлению
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 = 2
i
, где i — глубина в битах. Подробнее формула
I = X × Y × i
— в
главе 9.4
.
Глубина
Каналов на канал
Формула
Макс. цветов
Пример
1 бит
—
монохром
2
Ч/Б fax, 1-битный скан
4 бита
—
2
4
16
Старые игровые консоли (NES)
8 бит
1 байт на пиксель
2
8
256
Grayscale, веб-графика, индексированные PNG
16 бит
5+5+5 (RGB565) или 5+6+5
2
16
65 536
HighColor, фото в телефонах (канал ~5-6 бит)
24 бита
8+8+8 (по 256 уровней)
2
24
16 777 216
TrueColor, JPEG, типичные фото
32 бита
8+8+8+8 (RGBA)
2
32
4 294 967 296
PNG с альфа-каналом, HDR-экраны
48 бит
16+16+16 (по 65536 уровней)
2
48
281 триллион
Профессиональный сканер, 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 = 2
i
📷
Камера: анализ цвета в реальном времени
Доминирующий цвет
#808080
rgb(128, 128, 128)
Палитра кадра
Гистограмма яркости
Нажмите «Включить камеру» для доступа к веб-камере
🎯
Мини-тест: 5 вопросов
XP: 0