Rgb расшифровка аббревиатуры

.
.

Rgb расшифровка аббревиатуры

Rgb расшифровка аббревиатуры

Джеймс Клерк Максвелл, Томас Саттон. Ленточка из шотландки, 1861. Первое в истории достоверное цветное фотографическое изображение.

Когда мы применяем компьютерную графику в проектах, то часто говорим про цветовую модель RGB. А те, кто занимается печатью фотографий и журналов, говорят про CMYK. Сегодня разберёмся, чем отличается CMYK от RGB и как они устроены.

👉 Это для общего кругозора и понимания мира компьютеров. Прикладных знаний сегодня не будет.

Что такое HSB?

Перед тем, как подвести итог, подчеркнём: модели RGB и CMYK не так хорошо соответствуют понятию собственно цвета, как цветовая модель HSB. Это аббревиатура с английских слов: Hue, Saturation, Brightness — тон, насыщенность, яркость. HSB основана на модели RGB, но у неё другая система координат: каждый цвет в этой модели получается путем добавления к основному спектру черной или белой краски. При этом тон — это собственно цвет и есть, насыщенность — процент добавленной к цвету белой краски, а яркость — процент добавленной чёрной краски.

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

Rgb расшифровка аббревиатуры

Цветовая модель RGB была изначально разработана для описания цвета на цветном мониторе, но, поскольку, мониторы разных моделей и производителей различаются, были предложены несколько альтернативных цветовых пространств, соответствующих «усредненному» монитору. К таким относятся, например, sRGB и Adobe RGB.

Варианты этого цветового пространства отличаются разными оттенками основных цветов, разной цветовой температурой, разным показателем гамма-коррекции.

Представление базисных цветов RGB согласно рекомендациям ITU, в пространстве кельвинов (дневной свет)

Красный: x=0.64 y=0.33
Зелёный: x=0.29 y=0.60
Синий: x=0.15 y=0.06

Матрицы для перевода цветов между системами RGB и яркости при преобразовании изображения в чёрно-белое):

X = 0.431*R+0.342*G+0.178*B
Y = 0.222*R+0.707*G+0.071*B
Z = 0.020*R+0.130*G+0.939*B

R = 3.063*X-1.393*Y-0.476*Z
G = -0.969*X+1.876*Y+0.042*Z
B = 0.068*X-0.229*Y+1.069*Z

Цветовая модель RGB была изначально разработана для описания цвета на цветном мониторе, но поскольку мониторы разных моделей и производителей различаются, были предложены несколько альтернативных цветовых моделей, соответствующих «усредненному» монитору. К таким относятся, например, sRGB, Adobe RGB и ProPhoto.

Цветовая модель RGB может использовать разные оттенки основных цветов, разную цветовую температуру (задание «белой точки»), и разный показатель гамма-коррекции.

Представление базисных цветов RGB согласно рекомендациям ITU, в пространстве XYZ: Температура белого цвета: 6500 кельвинов (дневной свет)

Красный: x = 0,64 y = 0,33
Зелёный: x = 0,29 y = 0,60
Синий: x = 0,15 y = 0,06

Матрицы для перевода цветов между системами RGB и XYZ (величину Y часто ставят в соответствие яркости при преобразовании изображения в чёрно-белое):

X = 0,431 * R + 0,342 * G + 0,178 * B
Y = 0,222 * R + 0,707 * G + 0,071 * B
Z = 0,020 * R + 0,130 * G + 0,939 * B

R = 3,063 * X – 1,393 * Y – 0,476 * Z
G = -0,969 * X + 1,876 * Y + 0,042 * Z
B = 0,068 * X – 0,229 * Y + 1,069 * Z

RGB-цветовая модель представленная в виде куба

В компьютерах для представления каждой из координат традиционно используется один октет, значения которого обозначаются для удобства целыми числами от 0 до 255 включительно. Следует учитывать, что чаще всего используется гамма-компенсированое цветовое пространство RGB, обычно с показателем 1.8 (Mac) или 2.2 (PC).

В шестнадцатеричных цифр, без пробелов. Например, #RrGgBb-запись белого цвета — #FFFFFF.

COLORREF — стандартный тип для представления цветов в Win32. Использует для определения цвета в RGB виде. Размер — 4 байта. При определении какого-либо RGB цвета, значение переменной типа COLORREF можно представить в шестнадцатиричном виде так:

rr, gg, bb — значение интенсивности соответственно красной, зеленой и синей составлющих цвета. Максимальное их значение — 0xFF.

Определить переменную типа COLORREF можно следующим образом:

COLORREF C = (b,g,r);

b, g и r — интенсивность (в диапазоне от 0 до 255) соответственно синей, зеленой и красной составляющих определяемого цвета C. То есть ярко-красный цвет может быть определён как (255,0,0), ярко-фиолетовый — (255,0,255), чёрный — (0,0,0), а белый — (255,255,255)

Что такое RGB

Начнём с цифр. 16,7 миллионов оттенков отображает современный монитор компьютера или хорошее печатающее устройство. Такая большая палитра получается смешением всего трёх цветов в разных пропорциях — красного, синего и зелёного. В графических редакторах каждый из них представлен 256 оттенками (256х256х256=16,7 миллионов).

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

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

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

Rgb расшифровка аббревиатуры

RGB-цветовая модель, представленная в виде куба

В компьютерах для представления каждой из координат традиционно используется один октет, значения которого обозначаются для удобства целыми числами от 0 до 255 включительно. Следует учитывать, что чаще всего используется гамма-компенсированое цветовое пространство sRGB, обычно с показателем 1.8 (Mac) или 2.2 (PC).

В HTML используется #RrGgBb-запись, называемая также шестнадцатеричной: каждая координата записывается в виде двух шестнадцатеричных цифр, без пробелов (см. цвета HTML). Например, #RrGgBb-запись белого цвета — #FFFFFF.

COLORREF — стандартный тип для представления цветов в Win32. Используется для определения цвета в RGB виде. Размер — 4 байта. При определении какого-либо RGB цвета, значение переменной типа COLORREF можно представить в шестнадцатеричном виде так:

rr, gg, bb — значение интенсивности соответственно красной, зеленой и синей составляющих цвета. Максимальное их значение — 0xFF.

COLORREF C = ( r, g, b );

r, g и b — интенсивность (в диапазоне от 0 до 255) соответственно красной, зеленой и синей составляющих определяемого цвета C. То есть ярко-синий цвет может быть определён как (0,0,255), красный как (255,0,0), ярко-фиолетовый — (255,0,255), чёрный — (0,0,0), а белый — (255,255,255)

Rgb расшифровка аббревиатуры

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

RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая модель, описывающая способ синтеза цвета. В российской традиции иногда обозначается как КЗС.

Выбор основных цветов обусловлен особенностями физиологии восприятия цвета сетчаткой человеческого глаза. Цветовая модель RGB нашла широкое применение в технике.

Аддитивной она называется потому, что цвета получаются путём добавления (англ. ) к черному. Иначе говоря, если цвет экрана, освещённого цветным прожектором, обозначается в RGB как (r1, g1, b1), а цвет того же экрана, освещенного другим прожектором, — (r2, g2, b2), то при освещении двумя прожекторами цвет экрана будет обозначаться как (r1+r2, g1+g2, b1+b2).

Изображение в данной цветовой модели состоит из трёх каналов. При смешении основных цветов (основными цветами считаются красный, зелёный и синий) — например, синего (B) и красного (R), мы получаем пурпурный (M magenta), при смешении зеленого (G) и красного (R) — жёлтый (Y yellow), при смешении зеленого (G) и синего (B) — циановый (С cyan). При смешении всех трёх цветовых компонентов мы получаем белый цвет (W).

В телевизорах и мониторах применяются три электронные пушки (светодиода, светофильтра) для красного, зеленого и синего каналов.

Цветовая модель RGB имеет по многим тонам цвета более широкий цветовой охват (может представить более насыщенные цвета), чем типичный охват цветов

Что такое CMY(K)

Эти три цвета лежат в основе цветовой модели CMYK — субстрактивная модель (от англ. слова subtraсt — «вычитать»), которая основана на вычитании из белого первичных цветов: голубой цвет вычитает из белого цвета красный, желтый — синий, а пурпурный — зелёный. Модель CMY(K) используется в полиграфии для стандартной триадной печати и в сравнении с RGB-моделью обладает меньшим цветовым охватом. Бумага и другие печатные материалы — это поверхности, которые отражают свет. Согласитесь, гораздо удобнее считать, какое количество света отразилось от той или иной поверхности, чем считать, сколько поглотилось.

Если вычесть из белого три первичных цвета — RGB, получаются три дополнительных цвета CMY.

Rgb расшифровка аббревиатуры

Цветовая модель CMYK

В модель CMYK добавлен дополнительный черный цвет, и на это есть веские причины. В теории при смешении трёх основных цветов должен получиться чёрный цвет. В реальности же в красках есть примеси, и вместо чистого черного получается неопределенный грязно-коричневый. Тем более при печати смешение сразу трёх цветов ради получения черного очень сильно увлажняет бумагу, возрастает риск ее переувлажнения при не всегда идеальных внешних условиях и в силу особенностей самих красителей. Именно поэтому в модель введён чёрный цвет для получения тёмных оттенков и непосредственно самого чёрного. Буква К в названии модели CMYK взята у слова Black, и она обозначает ключевой цвет — Key Color.

Rgb расшифровка аббревиатуры

Rgb расшифровка аббревиатуры

Ограничение RGB по возможности передачи цветов

Rgb расшифровка аббревиатуры

RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая модель, как правило, описывающая способ синтеза цвета для цветовоспроизведения.

Аддитивной она называется потому, что цвета получаются путём добавления (англ. ) к черному. Иначе говоря, если цвет экрана, освещённого цветным прожектором, обозначается в RGB как (r1, g1, b1), а цвет того же экрана, освещенного другим прожектором, — (r2, g2, b2), то при освещении двумя прожекторами цвет экрана будет обозначаться как (r1+r2, g1+g2, b1+b2).

Изображение в данной цветовой модели состоит из трёх каналов. При смешении основных цветов (основными цветами считаются красный, зелёный и синий) — например, синего (B) и красного (R), мы получаем пурпурный (M magenta), при смешении зеленого (G) и красного (R) — жёлтый (Y yellow), при смешении зеленого (G) и синего (B) — циановый (С cyan). При смешении всех трёх цветовых компонентов мы получаем белый цвет (W).

В телевизорах и мониторах применяются три электронных пушки (светодиода, светофильтра) для красного, зелёного и синего каналов.

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

Что такое цветовые модели и какими они бывают

Небо голубое, незабудковое или, может быть, бирюзово-синее? Наше восприятие субъективно. Объективны компьютерные цветовые модели.

Иллюстрация: Оля Ежак для Skillbox Media

Rgb расшифровка аббревиатуры

Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

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

Цветовых пространств много: в них заложены разные принципы работы с цветами и разные возможности для их отображения. Рассказываем о тех, с которыми чаще всего работают в Photoshop и других графических редакторах.

Одно из ранних пространств, которое лежит в основе системы управления цветом в Photoshop. Lab — это система координат из трёх осей:

За единицу в пространстве принимается минимальное цветовое различие, воспринимаемое человеческим глазом. Поэтому Lab имеет максимальный цветовой охват.

Rgb расшифровка аббревиатуры

Так можно визуально представить модель LabИзображение: Public Domain

Давайте, например, возьмём бирюзовый цвет и взглянем на него на диаграмме. Значение L показывает светлоту. Значение а — то, что он ближе к зелёному, чем к красному. Значение b — что в нём больше синего, чем жёлтого:

Rgb расшифровка аббревиатуры

Изображение: Skillbox Media

Именно с Lab удобно работать при цветокоррекции, ретуши и подготовке к печати. Её главное преимущество — корректировка яркости с помощью значения L без изменения цвета.

При описании цвета в быту большинство из нас оперирует тремя характеристиками: это сам цветовой оттенок, его насыщенность и яркость. На этих же сущностях построена система HSB. Она состоит из трёх координат:

Визуально цветовое пространство HSB можно представить в виде цилиндра. Насыщенность и яркость варьируются от 0 до 100%, а тон измеряется в градусах от 0 до 360.

Rgb расшифровка аббревиатуры

Так выглядит наглядное представление цветового пространства HSBИзображение: Wikimedia Commons

Это пространство понятно, и в нём легко ориентироваться. Кроме того, оно используется по умолчанию при выборе цвета в Photoshop.

Rgb расшифровка аббревиатуры

На шкале предлагается выбрать цветовой оттенок, а в квадратном поле — нужную насыщенность и яркостьИзображение: Skillbox Media

Это пространство для отображения цвета на экранах. В нём каждый цвет кодируется значениями базовых цветов: Red (красный), Green (зелёный) и Blue (голубой). Это три оси, которые имеют градацию значений от 0 до 255. Если все три значения сделать нулевыми, то получится чёрный цвет, а если 255 — белый.

Для наглядности посмотрим, как получить ярко-красный цвет в пространстве RGB. Для этого нужно высокое значение по шкале R и низкие значения по двум другим:

Rgb расшифровка аббревиатуры

В левом верхнем углу наш цвет с координатами (255; 0; 0)Изображение: Skillbox Media

Наглядно пространство RGB можно представить как раскрашенный кубик:

Rgb расшифровка аббревиатуры

В двух углах расположены чёрные и белые точкиИзображение: Wikimedia Commons

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

Даже при создании макетов для печати работа на компьютере преимущественно ведётся в RGB, а лишь на этапе предпечатной подготовки переводится в другое пространство — CMYK.

Диапазон цветов на печати уже, чем на экранах. Поэтому при подготовке изображения к печати его переводят в CMYK, чтобы заранее отследить все возможные проблемы отображения.

Пространство CMYK построено на смешении четырёх типографских красок: Cyan (сине-зелёный), Magenta (пурпурный), Yellow (жёлтый) и Key («ключевой» цвет — чёрный). Значение каждого может меняться от 0 до 100%. Белый цвет в пространстве CMYK — это отсутствие краски.

Так выглядит любая напечатанная картинка при большом увеличении:

Rgb расшифровка аббревиатуры

Новые цвета получаются путём наложения трёх основных друг на друга в разных пропорцияхИзображение: Public Domain

Согласно идеальной модели, розовый, голубой и жёлтый на печати в сумме дают чёрный. Однако в CMYK есть отдельный чёрный цвет. Он нужен по трём причинам:

Обычно изображения не редактируют в CMYK. В это пространство конвертируют готовый файл из RGB, Lab или HSB, чтобы проверить совпадение цветов и предельно допустимую сумму красок под нужный тип бумаги.

Пространства Lab, HSB, RGB и CMYK — основные, с которыми сталкиваются дизайнеры, иллюстраторы и фотографы. Они упрощают работу, но реальная цветопередача не так предсказуема.

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

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

Rgb расшифровка аббревиатуры

Нейросети вам помогут. Большой вебинар по нейросетям. 15 экспертов, 7 топ-нейросетей. Научитесь использовать ИИ в своей работе и повысьте эффективность.

CMYK

C детства мы помним, что если смешать красный и жёлтый цвета, то получится оранжевый, а если голубой и жёлтый — то будет зелёный. Мы смешивали эти краски на палитре и рисовали.

В принципе, смешивать можно было не на палитре, а на самом листе: можно было нарисовать светло-голубой листочек, потом пройтись сверху прозрачным жёлтым, и получился бы зелёный листочек. Так делают, когда рисуют акварелью.

Rgb расшифровка аббревиатуры

Примерно так же работают все современные принтеры и печатные станки. В них залито несколько красок. Сначала принтер проходит одним цветом, потом другим, потом третьим, как бы смешивая эти цвета на листе. И получаются цветные изображения.

Чтобы давать принтеру указания, где какую краску наносить, используют цветовую модель CMYK.

CMYK — это компьютерная цветовая модель, которая имитирует смешивание красок на бумаге. Первые три буквы — это названия цветов, из которых всё смешивается:

Cyan — голубой

Magenta — пурпурный

Yellow — жёлтый

Смешивая в разных пропорциях эти цвета, мы можем получить на бумаге оттенки любого цвета.

CMYK используют для разработки полиграфической продукции, то есть для всего, что печатается на бумаге. Модель CMYK говорит принтеру или печатному станку: «Вот тут нанеси пурпурного, а там нанеси голубого, тут всё залей жёлтым». И если принтер правильно всё нанесёт, получится нужное нам цветное изображение.

Например, если принтеру поручат напечатать одну из наших обложек, он воспримет эту инструкцию так:

Rgb расшифровка аббревиатуры

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

Чтобы получить чёрный цвет, можно смешать все три базовых цвета, но появится проблема: бумаге нужно будет впитать довольно много краски. Если на картинке будет много чёрного, бумага размякнет и может испортиться. А ещё от смешения всех цветов мы в реальности получим не чёрный, а скорее грязно-коричневый.

Решение придумали такое: добавить в модель чёрный цвет. Так появилась модель CMYK: Cyan, Magenta, Yellow, Black. Чёрный используют, чтобы печатать текст и дополнительно подкрашивать чёрные участки изображений.

Rgb расшифровка аббревиатуры

Обратите внимание, что цвета на этой картинке не «вырвиглазные» и яркие, а приглушённые. Это компьютер пытается отобразить на экране, как эти цвета будут выглядеть на бумаге

Цветовые пространства

Всё, что нужно знать о CMYK, RGB, HSL, HSB, LAB и чистых градиентах.

Rgb расшифровка аббревиатуры

Ведущий интерфейсный дизайнер в K&K TEAM, увлечён дизайном, технологиями и людьми. В свободное время ведёт Telegram-канал «Karoza Ҩ»

Для работы с цветом необходимо хорошо понимать, как он устроен. Есть системы представления цвета, с которыми дизайнер сталкивается каждый день. Но есть и другие, не столь популярные модели. Разберёмся, как они устроены, чем отличаются и как эти знания можно применить на практике.

Цветовые модели RGB и CMYK соответствуют физическому представлению цвета на носителе. RGB отвечает за то, с какой интенсивностью светятся диоды красного, зелёного и синего цветов внутри пикселя монитора. CMYK задает пропорции смешиваемой краски на листе бумаги.

Цветовое пространство CMYK — субтрактивное: если сложить все цветовые компоненты, то итоговый цвет будет чёрным. По этому же принципу работают обычные краски, а потому пространство CMYK используется в полиграфии. Через процентные соотношения в нём записаны пропорции смешения четырёх красок: бирюзовой (Cian), пурпурной (Magenta), жёлтой (Yellow) и чёрной (Key color, blacK). Интенсивность каждого цвета задаётся в процентах от 0 до 100.

Дизайнеры, работающие с печатью, знают, что не все видимые на экране цвета возможно воспроизвести в CMYK. Связано это с тем, что модель RGB ― с ней работает монитор ― построена на излучении света, а CMYK ― на поглощении.

График сравнения цветовых пространств. Изображение: Wikimedia Commons, Александр Кароза

Для более точного отображения цветов при печати требуется допечатная подготовка. Во время неё экранные цвета пространства RGB переводятся в CMYK, чтобы получаемые оттенки на экране и бумаге были максимально приближены друг к другу.

Pantone — американская компания, основанная в пятидесятые годы в Нью-Йорке и занимающаяся производством пигментов и продажей чернил. Компания разработала систему стандартизации цветов Pantone Matching System (PMS), в которой каждому цвету присваивается специальный код.

Поскольку не все цвета можно воспроизвести в CMYK наложением четырёх стандартных красок во время печати, в полиграфии существует дополнительная палитра Pantone. Например, серый и жёлтый, которые Pantone выбрала в качестве цветов 2021 года, получить наложением палитры CMYK на листе невозможно.

Rgb расшифровка аббревиатуры

Выбор цветов Pantone шире, потому что его на бумагу наносят одной краской, тон которой получен смешением пигментов ещё на фабрике. Также цвета Pantone используют при печати больших тиражей в один-три цвета.

PMS — Pantone Matching System — система подбора цвета, но не цветовое пространство, так как у цветов есть код, но нет значений цветовых координат.

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

RGB ― это цветовое пространство, здесь каждый цвет задаётся в виде трёх координат. Смешение цвета происходит по аддитивному принципу ― если сложить все три основных цвета, то результат будет не чёрным, а белым. Поэтому RGB используется в системах, построенных на излучении света, что делает её самой распространённой ― с ней работают все экраны.

Цветовой оттенок в RGB создаётся смешиванием красного (Red), зелёного (Green) и синего (Blue) каналов с разной интенсивностью излучения. Яркость каждого из трёх основных цветов закодирована числом от 0 до 255, то есть занимает 256 бит или 32 байта.

Например, RGB (90, 0, 157) соответствует фиолетовому, а RGB (255, 223, 0) — жёлтому.

Rgb расшифровка аббревиатуры

Соответствие 32-байтных координат цвета HEX-значениям. Изображение: Александр Кароза

Для удобства записи придуманы HEX-коды обозначения цветов, в которых интенсивность каждого из трёх цветов задаётся через двузначное число в шестнадцатеричной системе, что даёт те же 256 комбинаций или 32 байта, ведь 16 × 16 = 256.

В шестнадцатеричной системе цифры обозначаются от 0 до F, в результате HEX-коды выглядят вот так: #5A009D — фиолетовый, #FFDF00 — жёлтый. Преимущество такой записи ― стандартизация и удобство копирования короткого цветового значения.

Иногда HEX-код в CSS или графических редакторах содержит только три знака, в таком случае каждый второй символ в записи совпадает с первым. То есть #F45 интерпретируется как #FF4455, #000 — #00000.

Rgb расшифровка аббревиатуры

Сокращённая и полная запись цвета в виде HEX-кодов. Изображение: Александр Кароза

Поскольку с цветовым пространством RGB работают все экраны, то применяется оно практически везде ― от разработки макетов для печати (цвета переводятся в CMYK в самом финале) до разработки сайтов и интерфейсов.

Цветовой тон (Hue) — положение цвета в видимом спектре. Человеческий глаз различает цвета от красного до фиолетового, цветовой тон ― это место цвета в спектре. Красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый — всё это цветовые тона.

Rgb расшифровка аббревиатуры

Изображение спектра видимого излучения и цветовые тона. Изображение: Wikimedia Commons, Александр Кароза

Насыщенность (Saturation) — интенсивность цвета, красочность, степень отличия цвета от равного по светлоте серого. Чем ближе цвет к серому, тем он менее насыщенный.

Rgb расшифровка аббревиатуры

Яркость (Brightness) — приближённость цвета к чёрному. Чем ниже яркость, тем цвет темнее. Нередко яркость путают с насыщенностью, но это разные характеристики.

Rgb расшифровка аббревиатуры

Модель RGB технически подходит для компьютеров и экранов, но в этом пространстве сложно работать, если нужно изменить что-то одно ― яркость, насыщенность или цветовой тон.

Допустим, мы используем синий цвет RGB (63, 42, 255), но для второго макета нам нужен более тёмный синий того же тона или же зелёный той же яркости и насыщенности. При изменении одной характеристики изменились сразу три параметра: синий теперь имеет значения RGB (18, 12, 77), а зелёный — RGB (67, 255, 42).

Rgb расшифровка аббревиатуры

Изменение значений кодирования цвета в системе RGB при смене одного параметра. Изображение: Александр Кароза

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

Rgb расшифровка аббревиатуры

Цветовая палитра в Adobe Photoshop и Figma. Изображение: Александр Кароза

Координаты цвета существуют в кубической системе RGB, но в графических редакторах управление цветом реализовано с использованием другой модели ― цилиндрической версии RGB, которая называется HSB или HSV.

Rgb расшифровка аббревиатуры

Визуализация кубического пространства RGB и цилиндрического HSB. Изображение: Wikimedia Commons

В HSB цветовой тон (Hue) задаётся в градусах на цветовом круге от 0° до 360°, а насыщенность (Saturation) и яркость (Brightness) в процентах от 0% до 100%.

Чтобы получить в HSB чёрный, надо уменьшить яркость до 0%, а тон и насыщенность не важны. Для получения белого нужно понизить насыщенность до 0% — то есть приблизить цвет к серому, а яркость повысить до 100%. Для получения чистых цветов яркость и насыщенность должны быть 100%.

Rgb расшифровка аббревиатуры

Шкала оттенков и некоторые цвета с соответствующими им координатами. Изображение: Wikimedia Commons, Александр Кароза

Иногда цветовое пространство HSB называют HSV (Hue — цветовой тон, Saturation — насыщенность, Value — значение). Не стоит путаться — это альтернативное название, а не другое цветовое пространство.

В CSS помимо HEX-кодов RGB применяют цилиндрическое цветовое пространство HSL, где вместо яркости (Вrightness) используется светлота (Lightness). HSB и HSL очень похожи, но не идентичны.

Главное отличие HSL в том, что при любых значениях тона и насыщенности светлота в 0% даст чёрный, а светлота в 100% — белый. В HSB 100% последнего параметра ― яркости — даёт наиболее яркий цвет, а белый возможен, только если насыщенность равна нулю.

Rgb расшифровка аббревиатуры

Визуализация цветовых пространств HSL (слева) и HSB (справа). Изображение: Wikimedia Commons, Александр Кароза

То есть светлота в HSL отвечает за примесь чёрного или белого, освещённость. При конвертации цвета из системы HSL в HSB изменение параметра L будет влиять на два параметра сразу — S и B, неизменным сохранится только цветовой тон — H.

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

Основной цвет и созданные в цилиндрической системе дополнительные. Изображение: Александр Кароза

В новой философии дизайна Material You компании Google цвета интерфейса подстраиваются под цвет обоев рабочего стола. Вполне возможно, что для такой автоматической подстройки применяют алгоритмы, использующие цилиндрическое цветовое пространство.

Дано: пользователи двух статусов.

Задача: автоматически создавать аватары пользователям с учётом их статуса. У одних пользователей должны быть светлые буквы на тёмном фоне, а у других — тёмные буквы на светлом.

Rgb расшифровка аббревиатуры

Фрейм с описанием системы в Figma. Иллюстрация: Александр Кароза

Решение: поскольку в CSS можно задавать цвет в координатах HSL, будем использовать это цветовое пространство. Копируем цвет из макета и переводим его в HSL.

Параметр Hue будет зависеть от имени пользователя, которое он ввёл при регистрации. После конвертации букв имени в , они будут возвращаться в виде значений от 0 до 360. Эти значения, установленные для параметра H, и станут определять цвет ― у каждого имени он будет уникальным. Для этой операции можно использовать , но есть и другие решения.

В результате цветовой тон аватарок генерируется автоматически с заданной светлотой, а буквы на них хорошо читаются.

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

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

Трёхмерная визуализация пространства LAB: фронтальный вид и вид сверху. Изображение: Wikimedia Commons

Значения цвета в LAB задаются через светлоту (Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность. A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.

Rgb расшифровка аббревиатуры

Параметр L варьируется от 0 до 100, а параметры A и B в большинстве сервисов для работы с LAB имеют значения от −128 до 128, поскольку координаты A и B обозначают не просто интенсивность какого-то цвета, а спектр между двумя цветами.

Система достаточно сложная, но можно попытаться представить её как смешение четырёх цветов — зелёного, красного, синего и жёлтого. На самом насыщенном срезе цветового пространства со светлотой 100 по углам находятся: зелёный — LAB (100, −128, 128), красный — LAB (100, 128, 128), фиолетовый — LAB (100, 128, −128), бирюзовый — LAB (100, −128, −128), а в самом центре белый — LAB (100, 0, 0). Как и в случае с RGB, настраивать цветовой тон удобнее в цилиндрической версии LAB — LCh.

Цилиндрическая версия LAB называется LCh, вместо прямоугольных в ней используются полярные координаты. Параметр C (Chroma — хроматическая составляющая, насыщенность) отвечает за длину радиуса и удалённость от центра цветового круга, а h (Hue) за угол поворота в градусах — то есть цветовой тон.

LAB используют как промежуточное цветовое пространство для конвертирования RGB в CMYK и наоборот, поскольку оно не привязано к конкретному носителю.

В цветокоррекции его применяют, чтобы быстро убрать желтизну или усилить естественные цвета фотографии. Некоторые цветокорректоры предпочитают LAB, если с его помощью внести изменения будет проще, нежели через корректирующие слои.

Также ранее LAB использовали для удаления шума на цифровых фотографиях. Для этого достаточно было размыть цветовые каналы A или B, а поскольку цифровой шум состоит из бледных разноцветных точек, такой подход делал их менее насыщенными.

Отдельное преимущество LAB — возможности для создания чистых градиентов между насыщенными цветами. Красивые градиенты важны не только в проектировании интерфейсов и дизайн-макетов, но и в информационном дизайне.

Rgb расшифровка аббревиатуры

Использование градиентов в оформлении переходов на схеме Московского метрополитена. Изображение: Студия Артемия Лебедева

Задача: создать чистый градиент между насыщенными цветами.

Проблема: из-за технических нюансов RGB между некоторыми насыщенными цветами при построении градиента возникает странный сероватый оттенок.

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

Rgb расшифровка аббревиатуры

Расположение оттенков в кубическом пространстве RGB и примеры созданных в RGB градиентов. Изображение: Wikimedia Commons, Александр Кароза

Решение: использовать LAB-градиент.

Rgb расшифровка аббревиатуры

Открываем Lch and Lab colour and gradient picker, выбираем два цвета, между которыми надо сделать переход, и вводим желаемое количество ступеней.

Rgb расшифровка аббревиатуры

Интерфейс Lch and Lab colour and gradient picker. Иллюстрация: David Johnstone

Копируем цвета из колонки Lab и переносим в редактор, делая линейный градиент из выбранного количества шагов.

Rgb расшифровка аббревиатуры

Интерфейс Figma с настройкой градиента. Иллюстрация: Александр Кароза

Если в качестве редактора вы используете Figma, то нужно установить плагин Chromatic Figma, который автоматически исправляет градиенты через LAB. Результат будет немного отличаться от инструмента Дэвида Джонстона.

Что где применяется

CMYK используют в печати. Но чтобы вывести изображение на печать, его сначала делают на компьютере, включая в графическом редакторе цветовую модель CMYK.

Полиграфисты проверяют, нет ли «перезалива» (когда на бумаге будет слишком много краски); контролируют чистоту смесей, прилаживают цветовые слои друг к другу. Там свой мир, но суть в том, что CMYK — это инструкция для печатной машины.

RGB — это цвета для веба, сайтов, приложений, игр, а также для фильмов, Ютуба и всего остального, что выводится на экране или проекторе.

Применение на практике

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

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

С бумажной печатью всё понятно, но с отображением на экране всё иначе. Дело в том, что экран — это куча светящихся пикселей, которые работают по другому принципу. Если при печати мы не поставим на бумагу ни одну каплю краски, она останется белой. А вот если мы не включим на экране ни один пиксель, то он останется чёрным. Всё дело в том, что бумага отражает свет, а экран — наоборот, излучает его.

Каждый пиксель на экране монитора состоит из трёх субпикселей — красного, зелёного и синего.

Rgb расшифровка аббревиатуры

Субпиксели в матрице экрана компьютера или смартфона

На бумаге при смешивании чернил мы получали более тёмные цвета. А на экране всё наоборот: при смешивании мы получаем более яркие и более светлые цвета. Это происходит потому, что при смешивании у нас увеличивается количество светящихся пикселей и количество света, который видит глаз.

В итоге цвета в RGB могут быть более вырвиглазными, яркими, сочными и контрастными — ведь вы не отражаете, не поглощаете, а излучаете цвет.

Rgb расшифровка аббревиатуры

А если все три субпикселя будут светиться со стопроцентной яркостью, то мы увидим белый цвет:

Rgb расшифровка аббревиатуры

Rgb расшифровка аббревиатуры

И зачем мне это знать?

Вот несколько практических примеров:

Как выглядит цветовая модель RGB?

Представьте, что мы направили лучи красного, зелёного и синего цветов в одну точку на белой стене. В центре получится белое пятно, интенсивность цветов в этой точке достигает 100 %. В местах, где лучи соприкасаются, вы увидите новые оттенки:

В чем отличие RGB от CMYK?

Итак, подведем краткий итог:

Разница между CMYK и RGB заключается в том, что RGB-цвет по сути лишь излучаемый цвет (или свет), а CMYK-цвет — цвет отражаемый (краска). Первый образуется за счёт интенсивности свечения, а второй получается как результат наложения красок в полиграфии. Соответственно, любые изображения в электронном виде — рисунки на мониторе компьютера, фотографии на экране телефона — основываются на RGB-модели. Модель CMYK применяется для полноцветной печати. А чтобы цвета не потерялись, изображение перед печатью выводят из аддитивной модели в субстрактивную. Говоря на языке дизайнеров и специалистов подготовки макетов, модель CMYK — рабочий инструмент офсетной типографии, который выводит цвета на бумагу.

Rgb расшифровка аббревиатуры

Отличие систем цветопередачи RGB и CMYK

Различия цветовых моделей RGB, CMYK, HSB

28 сентября 2018

Заявка на расчёт

Очень часто у людей, напрямую не связанных с полиграфией, возникают вопросы: «Что такое CMYK?», и «Почему нельзя использовать ничего, кроме CMYK?». В этой статье постараемся разобраться, что такое цветовые пространства CMYK, RGB и HSB и почему один и тот же фирменный цвет в макете на экране компьютера и на бумаге выглядит по-разному.

Загадочные RGB и CMYK относятся к базовым знаниям графического дизайна. Мы поговорим о различиях цветопередачи для того, чтобы стало понятно, почему один и тот же цвет в макете на экране компьютера и на бумаге будет выглядеть по-разному. Возможно, вы уже сталкивались с чем-то подобным при заказе полиграфии.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *