Сидящий рядом дизайнер, глядя на палитру цветов, говорит: «Чего-то не хватает ... Я знаю, что нужный цвет есть, не могу найти ...»
Я сразу же самодовольно объясняю: «Известно со школы - нервные окончания глаз реагируют на красный, зелёный и синий света, а цвета - всего лишь их смеси. У вас красный, зелёный и синий на экране, их можно смешивать в какие угодно цвета».
Минутой позже я понял, что ошибался. Всё немного сложнее и я постараюсь объяснить, почему.
В этой статье мы рассмотрим цветовые модели, их цвета и описание. Затем перейдём к цветовому пространству, близкому родственнику цветовых моделей, для точного описания цветов. Мы узнаем, что есть цвета, которые невозможно воспроизвести на мониторе. Наконец, перейдём к управлению цветом, процессу, необходимому для правильного назначения цветов в дизайне.
1. Как можно описать цвет?
Что такое цветовая модель?
Любой работник типографии посмеётся над моим компьютерным толкованием красного, зелёного и синего взгляда на мир - все знают, что цвета смешаны из cyan, magenta, yellow и black. Но мы оба будем правы - это разные цветовые модели, методы разбивки цветов на компоненты для условного и цифрового обозначения.
Полагаю, большинство дизайнеров, знакомых с понятиями RGB и CMYK, могут пропустить половину первого раздела до менее популярных, но полезных цветовых моделей HSB и Lab.
Что такое цветовая модель RGB?
Начнём с модели цвета RGB. Эта модель, иногда называемая additive color model, описывает, как волны света образуют цвета. Представьте себя в тёмной комнате с затемняемыми красной, зелёной и синей лампами, где, регулируя их яркость, вы можете добиться освещения любого цвета. Если все лампы выключены, вы находитесь в темноте - это чёрный! Если горят красная и зелёная, свет будет жёлтым, а когда включите синюю лампу, комната станет белой.
Почему красный, зелёный и синий? Из школьных уроков вы можете вспомнить спектр частот света от красного цвета радуги до синего и фиолетового. С научной точки зрения свет является смесью любых из этих monochromes света одной частоты.
В сетчатке глаза у нас есть светочувствительные клетки, называемые колбочками, они определяют количество света в красной, зелёной и синей областях спектра. Из-за этого «чистый» жёлтый свет, который находится между красным и зелёным на спектре, будет смесью красного и зелёного света.
С точки зрения дизайна это не имеет значения, поэтому мы можем определить любой видимый цвет, как смесь красного, зелёного и синего.
Спектр цветов
Поэтому такие устройства как мониторы, телевизоры и светодиоды, воспроизводят свет с помощью источников излучения красного, зелёного и синего. А устройства захвата света, такие как камеры или сканеры, имитируют человеческий глаз с помощью датчиков этих трёх цветов.
В цифровом мире Red, Green и Blue часто описываются как числа от 0 до 255. Почему 255? Можете обвинять программистов - благодаря им они имеют "8-bit" форматы, которые могут хранить 256 значений. Можете ругать их ещё больше, имея дело с веб-сайтами и hexadecimal encoded numbers, такими как # FF4E3A!
Цветовая модель смешивания Red, Green and Blue
Что такое цветовая модель CMYK?
Так зачем же описывать цвета каким-то другим способом? Ну, печатный мир будет хорошим примером Не получится описать свет, испускаемый печатными изданиями. Будем описывать цвет пигмента чернил, нанесённых на лист бумаги и свет, испускаемый этим цветом. Конечно, это снова красный, зелёный и синий? Если вы уже печатали или рисовали, то знаете, что это не так.
Основные цвета в мире печати - пигменты Cyan, Magenta и Yellow, нанеся два из них на белый лист бумаги, мы получаем Red, Green или Blue. Добавляя третий, мы видим мутный коричневый цвет, но, добавляя четвёртый, чёрный пигмент, мы можем получить большинство цветов. Эта цветовая модель формирует цвета вычитанием, поэтому ее иногда называют subtractive model, более знакомой, как CMYK. Доля каждого пигмента в цифровом виде выражается 0 до 100.
Исключающее смешение Cyan, Magenta и Yellow даёт основные цвета, а добавление чёрного (справа) любые другие.
Хорошее наглядное объяснение цветовых моделей RGB и CMYK есть в видео от Kirk Nelson.
Но есть и другие цветовые модели. Если вы запустите средство выбора цвета в Adobe Photoshop CC или перейдёте на colorizer.org, вы увидите цветовую модель HSB.
Эта модель цвета в виде комбинации Hue (оттенка), Saturation (насыщенности) и Brightness (яркости).
Saturation определяет яркость: 100% будет ярким и сочным, 50% - более пастельным, а ненасыщенный цвет будет серым.
Brightness (иногда вместо этого называется Value по цветовой модели HSV) можно рассматривать как объём чёрного в цвете, при =0% полностью черный, =100% либо белый, либо цвет в зависимости от saturation.
Наконец, Hue означает колер, то есть цвет, знакомый по радуге: красный, оранжевый, жёлтый и т. д. Hue определяется градусами цветового круга от 0 до 360.
При этом меня всегда беспокоило, что если saturation равна 0%, то при любом значении hue цвет будет одним и тем же (серым), и, что ещё хуже, если Brightness равна 0%, ни Hue, ни Saturation не имеют значения, это будет чёрный.
Цветовая модель HSL разделяет определение Hue, но добавляет Lightness, имеющее меру от белого до чёрного с яркими цветами посередине, очень похожее на saturation.
Цветовые модели HSB и HSV
Что такое цветовая модель Lab?
Наконец, цветовая модель Lab, которая менее понятна, но более приближена к тому, как работает визуальная система человека.
«Но подождите», - слышу я, - «Вы только что говорили, что глаза человека воспринимают красный, зелёный и синий!». Да, это называется Trichromatic model of vision, она описывает работу колбочек глаз, но не совсем точно визуальную систему в целом.
Систему лучше понять через Opponent model of vision, которая предполагает, что зрение связано с различиями, а не со значениями, которые отмечают колбочки. Система видит различия между Greenness и Redness, Bleness и Yellowness, Light и Dark.
Модель Lab's a & b воспринимает color-opponency, где "a" описывает спектр от красного до зелёного, а "b" соотношение синий/жёлтый. Значение L для Lightness похоже на HSL, но с двумя основными отличиями. В то время как другие модели основаны на интенсивности самого света, Lab основана на человеческом восприятии этой интенсивности. В результате удвоение lightness воспринимается, как удвоение, чего нельзя сказать о предыдущих системах.
Отделение человеческого восприятия lightness от цвета оставляет a & b измерения chromaticity яркости, не зависящей от цвета. Это важно, поскольку некоторые цвета выглядят ярче или темнее, даже когда они имеют одинаковую интенсивность. Например, мы воспринимаем насыщенный жёлтый цвет намного ярче, чем насыщенный синий. Эти изменения приводят к единообразию цветовой модели восприятия.
Что касается диапазонов, L измеряется от 0 (тёмный) до 100 (светлый), от -120 (красный) до +120 (зелёный) и b от +120 (жёлтый) до -120 (синий).
Понимание восприятия, безусловно, полезно исследователям человеческого зрения, но помогает ли это дизайнерам?
Единообразие восприятия действительно благо. Например, независимость цветности от уровня brightness может, безусловно, быть полезной. Вы можете, например, настроить кривые, чтобы добавить немного синевы, не изменяя яркость изображения.
Существуют ли другие цветовые модели?
Можем ли мы разбить цвет другими способами? Безусловно! Сохраняя независимое описание Lightness в Lab, что, если разбить цветность на Hue и Saturation, такие как HSV? У нас есть Munsell system, в ней saturation называется «Chroma» и Lightness «Value» и применяется для исследования почвы, а не для дизайна!
Ссылка colorizer.org является фантастическим способом разобраться, предлагая слайдеры для различных измерений различных систем. Есть ещё несколько цветовых моделей, таких как YPbPr и XYZ. Это более специализированные модели, не так для дизайнеров, но удобные разработчикам видеокодеков, чтобы сжать побольше контента в полосу.
Отойдя от цифры, системы вроде Pantone можно охарактеризовать как цветовые системы, способ уточнения цветов, чтобы два удалённых дизайнера с одним и тем же образцом одинаково понимали Cerulean или Hot Pink!
Если отойти от человеческих глаз, взять восприятие цвета животными, инфракрасных камер или даже спутников, мы обнаружим чувствительность на других частотах, кроме красного, зелёного и синего. Затем мы переходим в область имитации цветов, чтобы сделать невидимые цвета понятными.
Возвращаясь к началу урока, после того, как мы прошлись по цветовым моделям, становится понятной моя неправота. Возможно, вы довели часть своего задания до совершенства, настраивая цвета только затем, чтобы на печати увидеть, как они расползлись.
Если в документе указано 100% Red или 100% Cyan,что это значит? Значит, это 100% того, что может дать устройство, полный красный пиксель или полный Cyan. Тут две основные проблемы: возможности устройств различаются, поэтому красный цвет будет различаться между мониторами, а во-вторых, как мы будем перемещаться между цветовыми моделями, в то же время точно отображая цвета?
Чтобы всё делать правильно, нам требуется Color Management. Я полностью опишу это в разделе 3, но сначала мы должны понять цветовые пространства, близкие моделям цветов.
Что такое цветовое пространство?
Цветовые пространства - это модель описания цвета по точкам координат. Цветовые пространства точно определяют, как должны быть представлены цвета компонентов, как именно должна выглядеть их смесь и при какой реальной яркости любое заданное значение должно светиться с экрана.
Понятие цветового пространства работает для любой цветовой модели. Pantone, о котором я упоминал ранее, лучше описать, как цветовое пространство, поскольку он называет точные цвета. Существуют общие цветовые пространства для RGB и CMYK, но сначала мы рассмотрим Lab.
Цветовые пространства CIE Lab и XYZ
Значения L, a & b цветовой модели Lab зависят от того, к какому цветовому пространству Lab они относятся. Исходное цветовое пространство Lab получил Richard S. Hunter в 1948 году, но Международная комиссия по освещению (CIE) постепенно улучшала определения значений Lab для уточнения человеческого восприятия в цветовом пространстве CIE 1976, CIE 1994 и CIE 2000 определения. Technically значения CIE следует называть L *, a * и b *, поскольку они отличаются от значений Hunter 1948, но я следую определениям Photoshop модели Lab.
Каждая из этих систем основана на значениях XYZ и определена в CIE1931 XYZ color space. Если вас не интересует человеческая зрительная система, детали этих параметров несущественны, за исключением того факта, что X и Y являются мерами хроматичности и мы можем игнорировать lightness, чтобы отобразить все цвета по XY шкале цветности; мы называем это chromaticity diagram. На диаграмме цветности, показанной ниже, выгнутая кривая представляет собой диапазон цветов, которые может видеть человеческое зрение (цветности, поскольку у нас нет lightness). По диаграмме можно сравнить диапазоны различных цветовых пространств.
Диаграмма цветности, показывающая диапазон человеческого зрения в цветовом пространстве CIE 1931 xy
Что такое Color Gamut?
Диапазон цветового пространства описывается как его цветовая гамма. Вы можете найти цветовое пространство и цветовую гамму неразличимыми, но лучший способ понять разницу - вернуться к диаграмме Chromaticity CIE 1931 выше. Цветная область - это цветовое пространство человеческого зрения, а толстая линия, отмечающая экстенты, является цветовой гаммой человеческого зрения.
Цветовое пространство sRGB
Цветовые гаммы полезны, когда мы приходим к описанию цветовых пространств. Давайте взглянем на sRGB. Если набраться смелости, можно взглянуть на спецификацию цветового пространства sRGB. Цветовое пространство sRGB можно считать цветовым пространством по умолчанию для модели RGB. Почти все устройства захвата и отображения, работающие в цветовой модели RGB, поддерживают как минимум sRGB.
Взгляните на диаграмму Chromaticity ниже - треугольник показывает диапазон sRGB по сравнению с Human Vision (CIE1931). Как вы можете видеть, многие области внутри гаммы Human Vision выходят за пределы цветового пространства sRGB. По сути, это цвета, которые мы можем видеть, но которые не могут быть представлены в цветовом пространстве sRGB, и такие цвета называются Out of Gamut для цветового пространства sRGB. Тот факт, что так много человеческого видения находится за пределами цветового пространства sRGB, объясняет, почему он является минимальным, и рассматривается, как narrow gamut.
Диаграмма цветопередачи, показывающая цветовое пространство sRGB по сравнению с Human Vision (CIE 1931)
Если на вашем мониторе отображается только sRGB, почему не все цвета в треугольнике sRGB? И как вы можете видеть цвета вне его?
На самом деле цвета вдоль выгнутого края диаграммы являются чистыми монохроматическими цветами; углы треугольника sRGB будут лучшими зелеными, синими и красными, которые может воспроизводить монитор. Я только что растянул диапазон цветов по всему спектру человеческого зрения для лучшей иллюстрации.
Цветовые пространства в Adobe & ProPhoto RGB
Что, если нам нужен цвет вне цветового пространства sRGB, но всё ещё в модели RGB? Нам нужно более широкое цветовое пространство гаммы RGB.
Их много, но мы рассмотрим два основных. Во-первых, это цветовое пространство Adobe RGB, представленное в 1998 году, которое, как вы можете видеть ниже, позволяет лучше представлять зелень поверх sRGB.
Во-вторых, Kodak ProPhoto RGB, ещё известный, как ROMM RGB. На самом деле в цветовой гамме ProPhoto RGB имеются цветовые гаммы, которые не подходят для CIE 1931, что говорит о том, что насыщенные blues и greens в этом цветовом пространстве представляют собой цвета, которые человеческий глаз не может увидеть!
ICC Profiles
Итак, какое цветовое пространство RGB использует моя камера/монитор/сканер? Вероятно, никакое! Хотя они могут быть близки к стандарту, каждая модель устройства будет иметь свое собственное цветовое пространство.
В связи с этим Международный цветовой консорциум разработал профиль ICC, способ определения цветовых пространств для устройств и обмена ими. Такое пространство может быть доступно у изготовителя или создано самостоятельно, как описано в разделе 3.
Цветовые пространства CMYK
Перейдя от цветовой модели RGB, мы рассмотрим цветовые пространства CMYK. Это намного сложнее из-за необходимости запрашивать информацию не только о чернилах, но и о бумаге и других деталях печати. Посмотрите this guide, чтобы ознакомиться с ассортиментом доступных профилей. Мы просто возьмем SWOP color space от American Web Coated.
Неправильное шестиугольное пространство - это гамма для SWOP, я снова выбрал треугольную гамму sRGB, чтобы мы могли сравнить их. У нас есть некоторые цветовые гаммы для каждого цветового пространства по отношению к другому, поэтому подразумевается, что мы не можем тривиально перемещаться между CMYK и RGB - нам нужно управление цветом.
3. Что такое управление цветом?
Вы (надеюсь) понимаете цветовые пространства, но как вы их используете? С помощью процесса управления цветом.
Color Management - это цепочка систем для управления цветом через рабочий процесс части носителя. Оно включает:
Управление цветовыми пространствами в файлах
Преобразование между цветовыми пространствами
Характеристика и калибровка устройств для точного отображения (или захвата) в цветовом пространстве
Характеристика / Калибровка устройств
Поэтому первым шагом будет обеспечение правильного отображения цвета на нашем устройстве. Как мы уже говорили, устройства будут иметь собственное цветовое пространство, называемое профилем ICC Этот профиль может быть доступен у производителя, но чтобы быть действительно точным, лучше всего создать его самостоятельно, так как устройства могут отличаться по допускам и условиям.
Характеристика - это процесс измерения возможностей устройства. Это достигается с помощью Colorimetry, измеряющей внешний вид цветов, воспринимаемых людьми, Colorimeter.
Далее берётся эта характеристика и устройство настраивается для более точного представления цвета; это называется Calibration. Как правило, дисплей колориметров будет поставляться с программным обеспечением для калибровки дисплея, а затем выполнить окончательную характеристику для создания профиля ICC.
Я указал несколько уроков по ссылкам ниже. Jordan Merrick проводит процесс для обоих методов на дисплее Mac, Daniel Sone показывает использование другого недорогого колориметра для калибровки, а Jeffery Opp показывает процесс характеристики для камеры.
Мы знаем, что такое цветовое пространство, но как выбрать его для документа? Как правило, мы ограничены устройствами, которые используем, и предполагаемым носителем или устройством захвата с точки зрения фотографии и сканирования. Итак, мы просто используем цветовое пространство с наибольшей доступной гаммой? Это лучший подход и мы не хотим ограничиваться, но есть некоторые подводные камни, о которых нужно помнить.
Во-первых, помните о конечном цветовом пространстве на печати или экране. Разумеется, используйте широкую гамму на пробных документах, так как это даст вам больше данных для работы, но цель в том, чтобы цвета были в пределах конечного цветового пространства. По крайней мере, узнайте, что это за цветовое пространство и конвертируйте в него. Это позволит вам увидеть, приведет ли к отсечению цветового пространства любые избыточные цвета.
Вторая потенциальная ошибка заключается в том, что, когда мы представляем цифровую модель, мы помещаем число в размеры цветовой модели, и каждое из этих чисел имеет bit depth, по существу, количество подразделов интенсивности для каждого основного цвета.
Обычно это будет 8 или 16 бит, что соответствует 256 и 65536 возможным значениям для Red, Green and Blue. Поэтому, очевидно, мы хотим, чтобы более высокая битовая глубина представляла больше цветов, но иногда мы ограничиваемся более низкими битовыми глубинами (возможно, для размера конечного файла).
В этом случае более крупные гаммы дальше друг от друга, а это означает, что впустую насыщенные цвета на самом деле тратят полезные биты данных. Поэтому, если у вас ограничена битовая глубина, выберите цветовое пространство в соответствии с тем, что вы пытаетесь представить в документе.
Преобразование между цветовыми пространствами
К счастью,Color Management имеет дело с математической частью перемещения между цветовыми пространствами. Роль дизайнера в этом - выбор отображения, чтобы иметь дело с изменением гаммы и распределением цветов между цветовыми пространствами; это называется Render Intent.
Relative colorimetric направлено на точное отображение цветов, которые могут быть представлены в обоих цветовых пространствах, и представлять из цветов гаммы как ближайший цвет. Предполагая, что большинство цветов в документе находятся в общем пространстве обеих гамм, это, как правило, похоже на человеческий глаз, что очень удобно для фотографии. Большим недостатком является то, что любые цвета вне целевой гаммы «обрезаются» до ближайшего цвета, и, следовательно, информация теряется.
Perceptual преобразование вместо этого сжимает все цвета исходного цветового пространства, чтобы вписаться в результирующее цветовое пространство. Это изменяет вид всех цветов, но информация не теряется. Ничто не потеряно, но могут произойти большие изменения в цвете и яркости.
Единственное, о чём я умалчивал - это white point в цветовом пространстве, в котором описывается расположение самого чистого белого цвета; это отличается от одного цветового пространства к другому. Относительное колориметрическое намерение пытается поддерживать белую точку на экране, искажая цвета, но absolute colormetric не делает этого. Это может изменить white balance изображения, поэтому это не хорошо для фотографии, но очень полезно для упаковки и брендинга, поскольку оно воспроизводит точные цвета.
Saturation может быть полезным для перехода к более широкой гамме, поскольку она поддерживает относительное насыщение. Это сделает фотографию слишком яркой, но хорошо для упаковки и инфографики.
Кажется, это тяжелая работа, я должен беспокоиться?
Ответ зависит от дизайна. Если вы работаете с печатными изданиями, да. Если весь рабочий процесс является цифровым, вы можете просто придерживаться sRGB, но вы должны хотя бы знать об этих темах. О необходимости калибровки в Thomas Cannon's дискуссии Is Color Calibration Necessary in Web Design?.
Если вы снимаете изображения (сканер и камеры) или помещаете изображения (принтеры), вы действительно должны знать этот материал и я бы порекомендовал вам прочитать, как ваши устройства и программное обеспечение взаимодействуют с цветовыми пространствами и управлением цветом.
В любом случае, имейте в виду, что бывают цвета, которых нет в наборе вашей палитры. И даже не упоминайте о металлических чернилах, так как это совсем другое дело!
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
James Thomas studied as a traditional Computer Scientist, but years spent working with artists, designers, makers, educators and researchers have broadened James's expertise. Capable of work throughout the spectrum of digital artifice, from hardware to software, digital manufacture and CAD work to algorithm design, and much besides. Current specialism in producing small prototype digital artefacts with unusual user interaction and nuanced physical form connected to complex digital systems. Recent collaborations working with Microsoft, NASA and the V&A museum.
CustomizationHow to Calibrate Your Mac's Display
ReviewsReview of X-Rite's ColorMunki Monitor Calibrator
Colour Correction100% Perfect Color in Product Photos With a ColorChecker
