Цветовые модели передачи цвета в web-дизайне

LAB и LCh

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

LAB

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

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

Изображение: Wikimedia Commons

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

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

Параметр 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.

LCh

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

Применение LAB

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

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

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

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

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

Кейс

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

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

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

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

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

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

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

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

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

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

обложка: Meery Mary для Skillbox

Цвета в дизайне веб-страниц

Цветовая модель RGB для HTML была официально принята в качестве стандарта Интернета в HTML 3.2, хотя до этого использовалась некоторое время. Первоначально ограниченная глубина цвета большинства видеооборудования привела к ограниченной цветовой палитре из 216 цветов RGB, определенной цветным кубом Netscape. С преобладанием 24-битных дисплеев использование полных 16,7 миллионов цветов цветового кода HTML RGB больше не создает проблем для большинства зрителей.

Веб-безопасной цветовой палитры состоит из 216 (6 3 ) комбинации красного, зеленого и синего цветов , где каждый цвет может принимать одно из шести значений (в шестнадцатеричном формате ): # 00, # 33, # 66, # 99, #CC или #FF (в зависимости от диапазона от 0 до 255 для каждого значения, описанного выше). Эти шестнадцатеричные значения = 0, 51, 102, 153, 204, 255 в десятичном формате, что = 0%, 20%, 40%, 60%, 80%, 100% с точки зрения интенсивности. Это кажется прекрасным для разделения 216 цветов в куб размерности 6. Однако без гамма-коррекции воспринимаемая интенсивность на стандартном 2,5 гамма ЭЛТ / ЖКД составляет всего: 0%, 2%, 10%, 28%, 57%, 100%. См. Фактическую палитру веб-безопасных цветов для визуального подтверждения того, что большинство получаемых цветов очень темные.

Синтаксис в CSS :

rgb(#,#,#)

где # равно пропорции красного, зеленого и синего соответственно. Этот синтаксис можно использовать после таких селекторов, как «background-color:» или (для текста) «color:».

CMYK

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

Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).

Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).

Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 — жёлтой краски, и 46 — чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).

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

Кодирование цвета в формате HEX — это, по сути, шестнадцатеричное представление рассмотренной выше модели RGB.

Все коды цветов этой модели представляются в комбинированном виде из триады цифр в шестнадцатеричной системе счисления, в которой каждая из трёх групп отвечает за свой составляющий цвет. Длина группы фиксированная – 2 символа. Такой подход позволяет всё так же указать 256 состояний нужного цветового коэффициента. Значения каждого из групп коэффициентов должны быть между 00 и FF.

Для браузеров возможна и упрощённая форма записи цвета в HEX-формате, где указываются всего три символа кода вместо 6. В таком случае, подразумевается что каждая из трёх групп состоит из одинаковых символов. Например, AAFF11, можно сократить до AF1.

Примеры передачи цвета в WEB при помощи HEX-модели для CSS-стилей элементов:

Помимо указанных особенностей, HEX-модель поддерживает и alpha-канал для управления прозрачностью, в таком случае добавляется четвертый коэффициента в диапазоне от 00 и FF (256 значений). В таком случае использование сокращённой формы записи уже недопустимо.

Пример передачи цвета в WEB при помощи HEXA-модели для CSS-стилей элементов:

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Практические рекомендации

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

Собственно съёмка

Многие камеры позволяют фотографу выбирать между sRGB и Adobe RGB. Цветовым пространством по умолчанию является sRGB, и я настоятельно советую вам не трогать этот пункт меню, вне зависимости от того, снимаете ли вы в RAW или в JPEG.

Если вы снимаете в JPEG, то, скорее всего, делаете это для экономии времени и сил, и не склонны подолгу возиться с каждым снимком, а значит Adobe RGB вам точно ни к чему.

Если же вы снимаете в RAW, то выбор цветового пространства вообще не имеет никакого значения, поскольку RAW-файл в принципе не обладает такой категорией, как цветовое пространство – он просто содержит все данные, полученные с цифровой матрицы, которые лишь при последующей конвертации будут ужаты до заданного диапазона цветов. Даже если вы собираетесь конвертировать свои снимки в Adobe RGB или ProPhoto RGB, в настройках камеры следует оставить sRGB, чтобы избежать лишних трудностей, когда вам внезапно понадобится внутрикамерный JPEG.

Редактирование

Стандартное цветовое пространство назначается изображению только в момент конвертации RAW-файла в TIFF или JPEG. До этого момента вся обработка в RAW-конвертере происходит в некоем условном ненормированном цветовом пространстве, соответствующем цветовому охвату матрицы фотоаппарата. Именно поэтому RAW-файлы позволяют столь вольно обращаться с цветом при их обработке. По завершению редактирования, цвета, выходящие за рамки целевой палитры, автоматически подгоняются под наиболее близкие им значения в пределах выбранного вами цветового пространства.

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

Некоторые фотографы предпочитают конвертировать файлы в Adobe RGB для того, чтобы иметь большую свободу при последующей обработке изображения в Фотошопе. Это справедливо в том случае, если вы действительно собираетесь проводить глубокую цветокоррекцию. Лично я всю работу с цветом предпочитаю осуществлять в RAW-конвертере, поскольку это проще, удобнее и обеспечивает лучшее качество.

А что насчёт ProPhoto RGB? Забудьте о нём! Это математическая абстракция и целесообразность практического её применения ещё ниже, чем у Adobe RGB.

Кстати, если вы всё-таки вынуждены редактировать снимки в Фотошопе в пространствах, отличных от sRGB, не забывайте использовать разрядность в 16 бит на канал. Постеризация в цветовых пространствах с большим охватом становится заметной при равной разрядности раньше, чем в sRGB, поскольку одно и то же число бит используется для кодирования большего диапазона оттенков.

Печать

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

Интернет

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

***

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

Спасибо за внимание!

Василий А.

HSL

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

HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
4. h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */

HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

Проверка цветовой модели в CorelDraw

Файл (File) — Сведения о документе (Document Proporties)
В появившемся окне просмотрите информацию, указанную под заголовками:
Объекты растровой графики (Bitmap Objects)
Заливки (Fills) — здесь указаны цветовые модели заливки векторных объектов
Абрисы (Outlines) — здесь указаны цветовые модели контуров (обводки) векторных объектов
Могут быть указаны модели: CMYK, grayscale, Pantone (только если печатается специальной краской), недопустимы модели RGB и CMYK255.
Если они имеются, их обязательно нужно перевести в CMYK, растровую графику желательно переводить в CMYK в растровых редакторах (таких как Adobe Photoshop)

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

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

Система цветопередачи RGB

Этот алгоритм оттенков выстраивается на 3 основных цветах:

• R (red) – красный;
• G (green) – зеленый;
• B (blue) – голубой.

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

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

Таблица цветов Pantone

В таблице представлен Pantone Color Bridge Coated Process. Данный каталог цветов содержит лишь ближайшие CMYK и RGB аналоги к смесевым цветам. Далеко не каждый цвет из палитры Pantone возможно передать триадными красками, — цветовой диапазон смесевых цветов Pantone гораздо шире, чем у триадных красок CMYK.

Образец	Цвет Pantone	C	M	Y	K	HTML	R	G	B
	PANTONE 100	56	#FCEA76	252	234	118
	PANTONE 101	68	#FCE85F	252	232	95
	PANTONE 102	95	#FEE500	254	229
	PANTONE 103	5	5	100	16	#D0BC00	208	188
	PANTONE 104	7	13	100	28	#BBA30D	187	163	13
	PANTONE 105	13	18	88	45	#998730	153	135	48
	PANTONE 106	75	#FCE85D	252	232	93
	PANTONE 107	92	#FDE724	253	231	36
	PANTONE 108	5	98	#F9DA00	249	218
	PANTONE 109	9	100	#F8D500	248	213
	PANTONE 110	2	22	100	8	#DBB216	219	178	22
	PANTONE 111	8	21	100	28	#B69920	182	153	32
	PANTONE 112	10	20	100	40	#A48C1A	164	140	26
	PANTONE 113	2	83	#FAE34E	250	227	78
	PANTONE 114	4	87	#F9DE45	249	222	69
	PANTONE 115	6	87	#F8DB46	248	219	70
	PANTONE 116	14	100	#F5CB08	245	203	8
	PANTONE 117	6	27	100	12	#CDA31F	205	163	31
	PANTONE 118	7	28	100	30	#B48F1F	180	143	31
	PANTONE 119	17	22	100	47	#937F20	147	127	32
	PANTONE 120	5	64	#F7DD76	247	221	118
	PANTONE 121	8	70	#F6D86F	246	216	111
	PANTONE 122	11	80	#F5D258	245	210	88
	PANTONE 123	19	89	#F2C541	242	197	65
	PANTONE 124	30	100	#EDB220	237	178	32
	PANTONE 125	6	32	100	24	#BB9121	187	145	33
	PANTONE 126	11	31	100	36	#A7861D	167	134	29
	PANTONE 127	4	62	#FAE17B	250	225	123
	PANTONE 128	7	75	#F8D962	248	217	98
	PANTONE 129	11	78	#F6D15A	246	209	90
	PANTONE 130	32	100	#EDAC1A	237	172	26
	PANTONE 131	2	39	100	10	#D0941F	208	148	31
	PANTONE 132	9	38	100	32	#AB7F20	171	127	32
	PANTONE 133	19	37	100	59	#775F1F	119	95	31
	PANTONE 134	12	60	#F5D27A	245	210	122
	PANTONE 135	21	76	#F1C15C	241	193	92
	PANTONE 136	28	87	#EFB646	239	182	70
	PANTONE 137	41	100	#EAA124	234	161	36
	PANTONE 138	52	100	#E68C28	230	140	40
	PANTONE 139	7	49	100	25	#B27827	178	120	39
	PANTONE 140	19	49	100	54	#7D5A25	125	90	37
	PANTONE 141	16	65	#F5CD66	245	205	102
	PANTONE 142	24	78	#F2BF4C	242	191	76
	PANTONE 143	32	87	#F0B336	240	179	54
	PANTONE 144	51	100	#EA961C	234	150	28
	PANTONE 145	4	53	100	8	#D08921	208	137	33
	PANTONE 146	7	50	100	34	#A97620	169	118	32
	PANTONE 147	19	38	90	58	#786428	120	100	40
	PANTONE 148	17	43	#F4D199	244	209	153
	PANTONE 149	24	51	#F2C688	242	198	136
	PANTONE 150	41	78	#EDAA50	237	170	80
	PANTONE 151	60	100	#E88D21	232	141	33
	PANTONE 152	66	100	#E68523	230	133	35
	PANTONE 153	5	64	100	17	#C17723	193	119	35
	PANTONE 154	8	66	100	41	#9D6120	157	97	32
	PANTONE 155	12	34	#F5D7A5	245	215	165
	PANTONE 156	23	49	#F1C382	241	195	130
	PANTONE 157	42	74	#EBA344	235	163	68
	PANTONE 158	62	95	#E47E1A	228	126	26
	PANTONE 159	1	72	100	7	#D0651E	208	101	30
	PANTONE 160	6	71	100	31	#AB5A20	171	90	32
	PANTONE 161	16	67	100	71	#66401D	102	64	29
	PANTONE 162	25	35	#F0C4A0	240	196	160
	PANTONE 163	44	52	#EBA677	235	166	119
	PANTONE 164	59	80	#E68A48	230	138	72
	PANTONE 165	70	100	#E37828	227	120	40
	PANTONE 166	76	100	#E06C2A	224	108	42
	PANTONE 167	5	77	100	15	#BB5D29	187	93	41
	PANTONE 168	12	80	100	60	#6F3B20	111	59	32
	PANTONE 169	30	26	#EEBCA8	238	188	168
	PANTONE 170	48	50	#E89C77	232	156	119
	PANTONE 171	61	72	#E4834E	228	131	78
	PANTONE 172	73	87	#E06E37	224	110	55
	PANTONE 173	82	94	2	#D7572B	215	87	43
	PANTONE 174	8	86	100	36	#9C4124	156	65	36
	PANTONE 175	18	79	78	56	#77402E	119	64	46
	PANTONE 176	35	18	#EDB9B4	237	185	180
	PANTONE 177	54	38	#E7948A	231	148	138
	PANTONE 178	70	58	#E27865	226	120	101
	PANTONE 179	87	85	#DD5143	221	81	67
	PANTONE 180	3	91	86	12	#C1433C	193	67	60
	PANTONE 181	21	93	88	50	#80352F	128	53	47
	PANTONE 182	31	8	#ECBEC5	236	190	197
	PANTONE 183	49	17	#E79CA6	231	156	166
	PANTONE 184	73	32	#DF6B7C	223	107	124
	PANTONE 185	93	79	#D93740	217	55	64
	PANTONE 186	2	100	85	6	#C92A39	201	42	57
	PANTONE 187	7	100	82	26	#AC2B37	172	43	55
	PANTONE 188	16	100	65	58	#7D2935	125	41	53
	PANTONE 189	39	10	#EBB3BC	235	179	188
	PANTONE 190	56	18	#E58F9E	229	143	158
	PANTONE 191	79	36	#DE6276	222	98	118
	PANTONE 192	94	64	#DB3B50	219	59	80
	PANTONE 193	2	99	62	11	#C32E4C	195	46	76
	PANTONE 194	8	100	55	37	#9D2945	157	41	69
	PANTONE 195	19	90	50	55	#7E3545	126	53	69
	PANTONE 196	23	6	#EFCAD0	239	202	208
	PANTONE 197	46	12	#E8A1B0	232	161	176
	PANTONE 198	82	37	#DC5672	220	86	114
	PANTONE 199	100	72	#D82949	216	41	73

Аддитивный синтез цвета[править | править код]

Основная статья: Аддитивный синтез цвета

Рисунок Аддитивного синтеза цвета RGB

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

В модели цвета RGB, три цветовых луча сведённых вместе, создают ощущение того или иного заключительного цвета.,

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

Вторичный цвет может быть сформирован суммой двух первичных цветов равной интенсивности, например: циан — зелёный+синий, фуксин — красный+голубой, и желтый — красный+зелёный. Каждый вторичный цвет — дополнение одного первичного цвета; при смешивании первичного цвета и его дополнительного вторичного цвета результатом будет ощущение — белого цвета (голубой и красный цвета, фуксин и зеленый, желтый и синий).

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

История теории и использования цветовой модели RGB

Цветовая модель RGB основана на теории Юнга-Гельмгольца в трехцветной цветового зрения , разработанная Томасом Юнгом и Герман фон Гельмгольц в начале к середине девятнадцатого века, и Джеймс Клерк Максвелл цветового треугольника «s, конкретизирующие эту теорию (около 1860 ).

Ранние цветные фотографии

Первая постоянная цветная фотография, сделанная Дж. Максвеллом в 1861 году с использованием трех фильтров, а именно красного, зеленого и фиолетово-синего.

Фотография Мухаммеда Алим-хана (1880–1944), эмира Бухары , сделанная в 1911 году Сергеем Прокудиным-Горским с использованием трех экспозиций с синим, зеленым и красным фильтрами.

Фотография

Первые эксперименты с RGB в ранней цветной фотографии были проведены в 1861 году самим Максвеллом и включали процесс объединения трех отдельных кадров с цветовой фильтрацией. Для воспроизведения цветной фотографии потребовались три одинаковых проекции на экране в темной комнате.

Аддитивная модель RGB и варианты, такие как оранжево-зеленый-фиолетовый, также использовались в цветных пластинах Autochrome Lumière и других технологиях экранных пластин, таких как цветной экран Joly и процесс Педжета в начале двадцатого века. Цветная фотография с использованием трех отдельных пластин использовалась другими пионерами, такими как россиянин Сергей Прокудин-Горский в период с 1909 по 1915 год. Такие методы использовались примерно до 1960 года с использованием дорогостоящего и чрезвычайно сложного процесса трехцветного карбюратора Autotype .

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

Телевидение

До появления практического электронного телевидения еще в 1889 году в России были патенты на системы цветного сканирования с механическим сканированием . Цветной телевизор пионер Джон Логи Бэрд продемонстрировал первый в мире RGB передачи цвета в 1928 году, а также первый в мире цветной вещания в 1938 году в Лондоне . В его экспериментах сканирование и отображение производились механически путем вращения раскрашенных колес.

Columbia Broadcasting System (CBS) , началось экспериментальное RGB — полевой последовательной системы цветности в 1940 году Изображения были отсканированы электрически, но система все еще используется движущуюся часть: прозрачный RGB цветовое колесо вращается со скоростью 1200 оборотов в минуту выше синхронно с вертикальным сканированием. И камера, и электронно-лучевая трубка (ЭЛТ) были монохроматическими . Цвет обеспечивался цветовыми колесами в камере и ствольной коробке. Совсем недавно цветовые круги стали использоваться в проекционных ТВ-приемниках с чередованием полей на основе монохромного DLP-формирователя изображения Texas Instruments.

Современная технология теневой маски RGB для цветных ЭЛТ-дисплеев была запатентована Вернером Флехсигом в Германии в 1938 году.

Персональные компьютеры

Ранние персональные компьютеры конца 1970-х — начала 1980-х годов, такие как Apple и Commodore VIC-20 , использовали композитное видео, тогда как Commodore 64 и семейство Atari использовали производные S-Video . IBM представила 16-цветную схему (четыре бита — по одному разряду для красного, зеленого, синего и интенсивности) с адаптером цветной графики (CGA) для своего первого компьютера IBM PC (1981), позже усовершенствованным с помощью адаптера расширенной графики (EGA). ) в 1984 году. Первым производителем полноцветной графической карты для ПК (TARGA) была Truevision в 1987 году, но только после появления видеографического массива (VGA) в 1987 году технология RGB стала популярной, в основном из-за аналоговой сигналы в соединении между адаптером и монитором, что позволило получить очень широкий диапазон цветов RGB. Фактически, пришлось подождать еще несколько лет, потому что оригинальные карты VGA управлялись палитрой, как EGA, хотя и с большей свободой, чем VGA, но поскольку разъемы VGA были аналоговыми, более поздними вариантами VGA (изготовленными различными производителями под неофициальной название Super VGA) со временем добавил true-color. В 1992 году журналы активно рекламировали оборудование Super VGA с истинным цветом.

Аддитивные красители

Аддитивное смешивание цветов: добавление красного к зеленому дает желтый; добавление зеленого к синему дает голубой; добавление синего к красному дает пурпурный цвет; сложение всех трех основных цветов вместе дает белый цвет.

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

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

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

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

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

Сама цветовая модель RGB не определяет колориметрически, что подразумевается под красным , зеленым и синим , и поэтому результаты их смешивания указываются не как абсолютные, а относительно основных цветов. Когда точные цветности красного, зеленого и синего основных цветов определены, цветовая модель становится абсолютным цветовым пространством , например sRGB или Adobe RGB ; см. цветовое пространство RGB для получения более подробной информации.

Аддитивные и субтрактивные цветовые модели

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

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

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

Цветовые модели CMY и CMYK

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

Голубые чернила поглощают красный свет, но отражают зеленый и синий, пурпурные чернила поглощают зеленый свет, но отражают красный и синий, а желтые чернила поглощают синий свет, но отражают красный и зеленый. Белая подложка отражает проходящий свет обратно к зрителю. Поскольку на практике чернила CMY, подходящие для печати, также отражают немного цвета, что делает невозможным глубокий и нейтральный черный цвет, компонент K (черные чернила), обычно печатаемый в последнюю очередь, необходим для компенсации их недостатков. Использование отдельных черных чернил также является экономически выгодным, когда ожидается большое количество черного содержимого, например, на текстовых носителях, чтобы уменьшить одновременное использование трех цветных чернил. Красители, используемые в традиционных цветных фотопринтах и слайдах , намного более прозрачны, поэтому компонент K обычно не требуется и не используется в этих материалах.