Любой экран — от смартфона до телевизора — способен отображать миллионы оттенков, хотя использует всего три цвета: красный, зелёный и синий. Это возможно благодаря цветовой модели RGB, которая лежит в основе цифровых изображений, интерфейсов, игр, фильмов и фотографий. Разберёмся, как работает эта модель, почему её основой стали красный, зелёный и синий цвета и чем она отличается от CMYK.
Что такое RGB
RGB — это цветовая модель, которая используется практически во всей цифровой технике. С её помощью экран создаёт любые оттенки, комбинируя всего три цвета: Red (красный), Green (зелёный) и Blue (синий). Из этих трёх цветовых каналов складывается изображение на смартфонах, компьютерах, телевизорах и других устройствах с экраном.
Особенность этой модели в том, что она работает со светом. Чем ярче светят красный, зелёный и синий каналы, тем светлее становится итоговый цвет. Поэтому такую модель называют аддитивной — цвет здесь получается за счёт добавления света. Экран сам излучает свет, а не отражает его, как лист бумаги.
Выбор этих трёх цветов связан с тем, как устроено человеческое зрение. В сетчатке глаза есть три типа колбочек — светочувствительных клеток. Одни лучше воспринимают короткие световые волны, другие — средние, третьи — длинные. Благодаря их совместной работе мы различаем множество цветов.
Как работает RGB: пиксели, свет и числа
Что означают числа в RGB
Каждый из трёх каналов RGB задаётся числом от 0 до 255. Ноль означает отсутствие света этого цвета, а 255 — его максимальную яркость. Диапазон именно такой потому, что на каждый канал приходится 8 бит информации — они позволяют хранить 256 различных значений: от 0 до 255.
Цвет записывается в виде трёх чисел. Например:
- rgb(255, 0, 0) — чистый красный;
- rgb(0, 255, 0) — чистый зелёный;
- rgb(0, 0, 255) — чистый синий.
Для профессиональной обработки фотографий и графики часто используют 16 бит на канал. В этом случае увеличивается не цветовой охват, а точность хранения данных. Благодаря этому снижается риск появления цветовых полос и ошибок округления при обработке изображений.
Как получить белый, чёрный и любой другой цвет
Логика RGB очень проста:
- rgb(255, 255, 255) — белый;
- rgb(0, 0, 0) — чёрный;
- rgb(128, 128, 128) — средний оттенок серого.
Если значения всех трёх каналов одинаковы, получается один из оттенков серого. Любой другой цвет возникает благодаря разному соотношению красного, зелёного и синего.
Например, если увеличить красный канал, оттенок станет теплее. Если добавить больше синего или зелёного — холоднее. Именно изменяя яркость трёх каналов, можно получить практически всю палитру цифрового изображения.
Аддитивное смешение: почему свет складывается
Принцип работы RGB называется аддитивным смешением. Это значит, что цвет получается сложением световых потоков:
- Красный + зелёный = жёлтый.
- Зелёный + синий = циан.
- Красный + синий = пурпурный.
Тем, кто привык смешивать краски, это кажется непривычным. В живописи результат будет совсем другим, потому что краски поглощают свет, а не излучают его.
В большинстве современных LCD- и OLED-дисплеев каждый пиксель состоит из трёх субпикселей: красного, зелёного и синего. Экран меняет яркость каждого из них, чтобы получить нужный оттенок. Существуют и другие технологии, например RGBW, WOLED или QD-OLED, где структура пикселей отличается, но принцип формирования цвета остаётся тем же.
RGB и CMYK: в чём разница простыми словами
Экран против бумаги: две разные логики цвета
RGB и CMYK решают одну задачу — передают цвет, но делают это разными способами. RGB используется там, где изображение создаётся светом: в мониторах, смартфонах, планшетах и телевизорах. CMYK применяется в полиграфии: при печати книг, журналов, упаковки, плакатов и флаеров.
Аббревиатура CMYK означает Cyan, Magenta, Yellow и K — чёрный цвет. Буква K используется, чтобы не путать чёрный (Black) с синим (Blue), а также исторически связана с понятием Key — ключевой печатной формы.
Что теряется при переводе RGB в CMYK
Цветовой охват CMYK заметно меньше, чем у большинства RGB-пространств. Поэтому многие яркие оттенки, которые легко отображаются на экране, невозможно воспроизвести на бумаге без потери насыщенности.
Поэтому картинка после перевода из RGB в CMYK может выглядеть немного иначе: часть ярких оттенков станет более тусклой или слегка изменит цвет. Это нормальное явление, связанное с ограничениями печатных красок, а не с ошибкой программы.
Если макет готовится для печати, профессиональные дизайнеры обычно работают в CMYK с самого начала. Такой подход помогает заранее видеть возможные изменения цвета и избежать неприятных сюрпризов после печати.
RGB в работе: дизайн, код и реальные проекты
RGB-код и HEX: два способа записать один цвет
В веб-разработке один и тот же цвет можно записать двумя способами.
- Привычная запись: rgb(255, 0, 0).
- Шестнадцатеричный HEX-код: #FF0000.
Это абсолютно одинаковый цвет. Каждая пара символов HEX соответствует одному цветовому каналу:
- FF = 255;
- 00 = 0;
- 80 = 128.
Например: rgb(255, 128, 0) = #FF8000. HEX удобен своей компактностью, а запись RGB проще читать и изменять вручную.
Как задать цвет в CSS и Figma
В CSS цвет можно записать так:
background-color: rgb(34, 139, 34);
или:
background-color: #228B22;
Оба варианта задают один и тот же оттенок зелёного.
При работе с прозрачностью часто используют запись:
background-color: rgba(255, 0, 0, 0.5);
Последнее число показывает уровень прозрачности. В этом примере цвет будет виден на 50%.
В Figma одновременно отображаются значения R, G, B и HEX-код. Если изменить любой из них, остальные обновятся автоматически. Это помогает быстрее понимать, как изменение отдельных каналов влияет на итоговый цвет.
Почему цвет выглядит иначе на другом экране
RGB — это цветовая модель, а конкретное отображение зависит ещё и от цветового пространства и самого устройства. Два самых известных цветовых пространства — sRGB и Adobe RGB.
sRGB используется практически всеми браузерами, большинством смартфонов и обычных мониторов. Adobe RGB имеет более широкий цветовой охват, особенно в зелёно-бирюзовой области, поэтому применяется в профессиональной фотографии и подготовке изображений к качественной печати.
Именно поэтому при разработке сайтов обычно ориентируются на sRGB — он обеспечивает наиболее предсказуемое отображение на большинстве устройств.
Где ещё встречается RGB: от LED до медицины
RGB используется далеко не только в мониторах. Телевизоры, планшеты, игровые консоли и многие другие устройства строят изображение по тем же принципам.
Большинство цифровых камер регистрирует свет с помощью сенсоров с цветными фильтрами. Чаще всего используется фильтр Байера, в котором зелёных элементов в два раза больше, чем красных и синих. После обработки этих данных камера формирует привычное RGB-изображение.
Игровая периферия тоже использует эту модель. В клавиатурах, мышах и других устройствах каждый RGB-светодиод управляет яркостью красного, зелёного и синего компонентов отдельно. Благодаря этому можно создавать миллионы оттенков и сложные световые эффекты.
В медицинской микроскопии и научной визуализации RGB помогает объединять изображения, полученные с помощью разных красителей или флуоресцентных маркеров. Каждый канал может отображать отдельный тип ткани или биологический маркер, а их сочетание позволяет исследователям получать более информативную картину.
Заключение
Понимание того, как работает RGB, помогает увереннее выбирать цвета в дизайне, разбираться в настройках графических редакторов и писать CSS-код.
