Цветовая система rgb: 2.116 Цветовые системы. История вопроса (часть 59)

Содержание

Цветовые модели RGB,CMYK, HSB — Все что надо знать

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

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

цветовая модель rgb

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

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

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

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

Цветовая схема CMYK

цветовая модель cmyk

Состоит из 4 основных цветов, расшифровка CMYK:

  • С (сyan) – синий – можно охарактеризовать как насыщенный голубой;
  • M (magenta) – малиновый – цвет, приближенный к темно-розовому или фуксии;
  • Y (yellow) – желтый – ортодоксальный привычный цвет без понижения или повышения тона;
  • K (key) – черный.

У нее меньший цветовой охват в сравнении с таблицей цветов RGB

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

На данный момент именно эта модель является стандартом в офсетной полноцветной печати в Европе, США, Японии. В большинстве случаев используется цветовая схема CMYK, при которой оттенки исчисляются от 0 до 100, однако есть и другая модель – CMYK 255. В ней оттенки исчисляются от 0 до 255. Приведем пример.

Допустим, требуется получить чисто черный, тогда показатели должны быть максимальными (в стандартной схеме – по 100), если же белый (то есть отсутствие цвета) – 0. Регулируя каждый из 4 показателей, можно добиться требуемого оттенка. Обычно для дизайнеров помощниками выступают специальные инструменты, как, например, пипетка в редакторе Photoshop. Она определяет не просто вид конкретного оттенка, но и его цветовую схему. Тогда для достижения идентичного результата (при множественном тираже или различных вариантах корпоративной продукции) достаточно знать цифровое значение каждого цвета в системе.

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

цветовое пространство hsb

Эта модель разработана для первых графических редакторов еще в 90-х годах. Ее отличием является трехканальное построение спектра. Она определяет не просто какой-то оттенок смешением красок, данный тип цветопередачи основан на показателях цвета, а именно:

  1. Hue – цветовой тон. Выбирается один из спектра радуги, имеет радиальное расположение, определяется углом от 0 до 360 градусов на окружности с оттенками. С другой стороны, параметр эквивалентен длине световой волны, которую воспринимает человеческое зрение.
  2. Saturation – насыщенность. Регулирует контрастность оттенка по отношению к печатному или виртуальному носителю. Это как при подмешивании белой краски. Наиболее насыщенные цвета находятся по краям круга, чем ближе к центру, тем они становятся более бледными. Соответствует интенсивности цветовой волны.
  3. Brightness – яркость, где 0 – это полностью белый, а 100 – черный. Данный параметр задает освещенность цветовой волны.

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

История цветовой модели RGB / Хабр

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

Пионеры исследований цветовосприятия


Сегодня мы знаем, что сетчатка человеческого глаза содержит три разных типа фоторецепторных клеток, называемых колбочками. Каждый из трёх типов колбочек содержит белок из семейства белков опсинов, который поглощает свет в различных частях спектра:
Поглощение света опсинами

Колбочки соответствуют красной, зелёной и синей частям спектра и часто называются длинными (L), средними (M) и короткими (S) согласно длинам волн, к которым они наиболее чувствительны.

Одной из первых научных работ о взаимодействии света и сетчатки был трактат «Hypothesis Concerning Light and Colors» Исаака Ньютона, написанный между 1670-1675 гг. У Ньютона была теория, что свет с различными длинами волн приводил к резонансу сетчатки с теми же частотами; эти колебания затем передавались через оптический нерв в «сенсориум».


«Лучи света, падая на дно глаза, возбуждают колебания в сетчатке, которые распространяются по волокнам оптических нервов в мозг, создавая чувство зрения. Разные типы лучей создают колебания разной силы, которые согласно своей силе возбуждают ощущения разных цветов…»

(Рекомендую вам обязательно прочитать отсканированные черновики Ньютона на веб-сайте Кембриджского университета. Я, конечно, констатирую очевидное, но каким же он был гением!)

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

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

В 1850 году Герман Гельмгольц первым получил экспериментальное доказательство теории Юнга. Гельмгольц попросил испытуемого сопоставить цвета различных образцов источников света, регулируя яркость нескольких монохромных источников света. Он пришёл к выводу, что для сопоставления всех образцов необходимо и достаточно трёх источников света: в красной, зелёной и синей части спектра.

Рождение современной колориметрии


Перенесёмся в начало 1930-х. К тому времени научное сообщество имело достаточно хорошее представление о внутренней работе глаза. (Хотя потребовалось ещё 20 лет, чтобы Джорджу Уолду удалось экспериментально подтвердить присутствие и функции родопсинов в колбочках сетчатки. Это открытие привело его к Нобелевской премии по медицине в 1967 году.) Commission Internationale de L’Eclairage (Меж­ду­на­род­ная комиссия по освещению), CIE, поставила задачу по созданию исчерпывающей количественной оценки восприятия цвета человеком. Количественная оценка была основана на экспериментальных данных, собранных Уильямом Дэвидом Райтом и Джоном Гилдом при параметрах, схожих с выбранными впервые Германом Гельмгольцем. Базовыми настройками были выбраны 435,8 нм для синего цвета, 546,1 нм для зелёного и 700 нм для красного.
Экспериментальная установка Джона Гилда, три ручки регулируют основные цвета

Из-за значительного наложения чувствительности колбочек M и L невозможно было сопоставить некоторые длины волн с сине-зелёной частью спектра. Для «сопоставления» этих цветов в качестве точки отсчёта нужно было добавить немного основного красного цвета:

Если мы на мгновение представим, что все основные цвета вносят отрицательный вклад, то уравнение можно переписать так:

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


Функции сопоставления цветов RGB по CIE 1931

Разумеется, цвета с отрицательным красным компонентом невозможно отобразить с помощью основных цветов CIE.

Теперь мы можем найти трихромные коэффициенты для света распределения спектральной интенсивности S как следующее внутреннее произведение:

Может казаться очевидным, что чувствительность к различным длинам волн можно проинтегрировать таким образом, но на самом деле она зависит от физической чувствительности глаза, линейной по отношению к чувствительности к длинам волн. Это было эмпирически подтверждено в 1853 году Германом Грассманом, и представленные выше интегралы в современной формулировке известны нам как закон Грассмана.

Термин «цветовое пространство» возник потому, что основные цвета (красный, зелёный и синий) можно считать базисом векторного пространства. В этом пространстве различные цвета, воспринимаемые человеком, представлены лучами, исходящими из источника. Современное определение векторного пространства введено в 1888 году Джузеппе Пеано, но более чем за 30 лет до этого Джеймс Клерк Максвелл уже использовал только зародившиеся теории того, что позже стало линейной алгеброй, для формального описания трихроматической цветовой системы.

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

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

яркость CIE (подробнее о ней можно почитать в замечательной статье Color FAQ Чарльза Пойнтона (Charles Poynton)).

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

Координаты x и y известны как координаты цветности, и вместе с яркостью Y CIE они составляют цветовое пространство xyY CIE. Если мы расположим на графике координаты цветности всех цветов с заданной яркостью, у нас получится следующая диаграмма, которая вам наверно знакома:


Диаграмма xyY CIE 1931

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

С течением времени появилось несколько новых цветовых пространств, которые в различных аспектах вносили улучшения в пространства CIE 1931. Несмотря на это, система xyY CIE остаётся самым популярным цветовым пространством, описывающим свойства устройств отображения.

Передаточные функции


Прежде чем рассматривать видеостандарты, необходимо ввести и объяснить ещё две концепции.
Оптико-электронная передаточная функция

Оптико-электронная передаточная функция (optical-electronic transfer function, OETF) определяет то, как линейный свет, фиксируемый устройством (камерой) должен кодироваться в сигнале, т.е. это функция формы:

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

Электронно-оптическая передаточная функция

Электронно-оптическая передаточная функция (electronic-optical transfer, EOTF) выполняет противоположную OETF задачу, т.е. она определяет, как сигнал будет преобразован в линейный свет:

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

Отношение между EOTF и OETF

Понятия EOTF и OETF хоть и взаимосвязаны, но служат разным целям. OETF нужна для представления захваченной сцены, из которого мы потом можем реконструировать исходное линейное освещение (это представление концептуально является буфером кадра HDR (High Dynamic Range) обычной игры). Что происходит на этапах производства обычного фильма:
  • Захват данных сцены
  • Инвертирование OETF для восстановления значений линейного освещения
  • Цветокоррекция
  • Мастеринг под различные целевые форматы (DCI-P3, Rec. 709, HDR10, Dolby Vision и т.д.):
    • Уменьшение динамического диапазона материала для соответствия динамическому диапазону целевого формата (тональная компрессия)
    • Преобразование в цветовой пространство целевого формата
    • Инвертирование EOTF для материала (при использовании EOTF в устройстве отображения изображение восстанавливается как нужно).

Подробное обсуждение этого техпроцесса не войдёт в нашу статью, но я рекомендую изучить подробное формализованное описание рабочего процесса ACES (Academy Color Encoding System).

До текущего момента стандартный техпроцесс игры выглядел следующим образом:

  • Рендеринг
  • Буфер кадра HDR
  • Тональная коррекция
  • Инвертирование EOTF для предполагаемого устройства отображения (обычно sRGB)
  • Цветокоррекция

В большинстве игровых движков используется метод цветокоррекции, популяризованный презентацией Нэти Хофмана (Naty Hoffman) «Color Enhancement for Videogames» с Siggraph 2010. Этот метод был практичен, когда использовался только целевой SDR (Standard Dynamic Range), и он позволял использовать для цветокоррекции ПО, уже установленное на компьютерах большинства художников, например Adobe Photoshop.
Стандартный рабочий процесс цветокоррекции SDR (изображение принадлежит Джонатану Блоу (Jonathan Blow))

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

Теперь мы готовы рассмотреть различные стандарты, используемые в настоящее время для описания форматов телевизоров.

Видеостандарты


Rec. 709

Большинство стандартов, относящихся к вещанию видеосигналов, выпущено Меж­ду­на­род­ным союзом элект­рос­вя­зи (International Telecommunication Union, ITU), органом ООН, в основном занимающимся информационными технологиями.

Рекомендация ITU-R BT.709, которую чаще называют Rec. 709 — это стандарт, описывающий свойства HDTV. Первая версия стандарта была выпущена в 1990 году, последняя — в июне 2015 года. В стандарте описываются такие параметры, как соотношения сторон, разрешения, частота кадров. С этими характеристиками знакомо большинство людей, поэтому я не буду рассматривать их и сосредоточусь на разделах стандарта, касающихся воспроизведения цвета и яркости.

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

Их относительная интенсивность должна быть настроена таким образом, чтобы белая точка имела цветность

(Эта белая точка также известна как CIE Standard Illuminant D65 и аналогична захвату координат цветности распределения спектральной интенсивности обычного дневного освещения.)

Свойства цветности можно визуально представить следующим образом:


Охват Rec. 709

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

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

Здесь есть две проблемы:

  1. Не существует спецификации о том, чему соответствует физическая яркость L = 1
  2. Несмотря на то, что это стандарт вещания видео, в нём не указана EOTF

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

где L = 1 соответствует яркость примерно 100 кд / м² (единицу кд / м² в этой отрасли называют «нит»). Это подтверждается ITU в последних версиях стандарта следующим комментарием:

В стандартной производственной практике функция кодирования источников изображения регулируется таким образом, чтобы конечное изображение имело требуемый вид, соответствующий видимому на эталонном мониторе. В качестве эталонной принимается функция декодирования из Рекомендации ITU-R BT.1886. Эталонная среда просмотра указана в Рекомендации ITU-R BT.2035.
Rec. 1886 — это результат работ по документации характеристик ЭЛТ-мониторов (стандарт опубликован в 2011 году), т.е. является формализацией существующей практики.
Кладбище слонов ЭЛТ

Нелинейность яркости как функции приложенного напряжения привела к тому, как физически устроены ЭЛТ-мониторы. По чистой случайности эта нелинейность (очень) приблизительно является инвертированной нелинейностью восприятия яркости человеком. Когда мы перешли к цифровому представлению сигналов, это привело к удачному эффекту равномерного распределения ошибки дискретизации по всему диапазону яркости.

Rec. 709 рассчитана на использование 8-битного или 10-битного кодирования. В большинстве контента используется 8-битное кодирование. Для него в стандарте указано, что распределение диапазона яркости сигнала должно распределяться в кодах 16-235.

HDR10


Что касается HDR-видео, то в нём есть два основных соперника: Dolby Vision и HDR10. В этой статье я сосредоточусь на HDR10, потому что это открытый стандарт, который быстрее стал популярным. Этот стандарт выбран для Xbox One S и PS4.

Мы снова начнём с рассмотрения используемой в HDR10 части цветности цветового пространства, определённой в Рекомендации ITU-R BT.2020 (UHDTV). В ней указаны следующие координаты цветности основных цветов:

И снова в качестве белой точки используется D65. При визуализации на схеме xy Rec. 2020 выглядит следующим образом:


Охват Rec. 2020

Очевидно заметно, что охват этого цветового пространства значительно больше, чем у Rec. 709.

Теперь мы переходим к разделу стандарта о яркости, и здесь снова всё становится более интересным. В своей кандидатской диссертации 1999 года “Contrast sensitivity of the human eye and its effect on image quality” («Контрастная чувствительность человеческого глаза и её влияние на качество изображения») Питер Бартен представил немного пугающее уравнение:

(Многие переменные этого уравнения сами по себе являются сложными уравнениями, например, яркость скрывается внутри уравнений, вычисляющих E и M).

Уравнение определяет, насколько чувствителен глаз к изменению контрастности при различной яркости, а различные параметры определяют условия просмотра и некоторые свойства наблюдателя. «Минимальная различаемая разница» (Just Noticeable Difference, JND) обратна уравнению Бартена, поэтому для дискретизации EOTF, чтобы избавиться от привязки к условиям просмотра, должно быть верно следующее:

Общество инженеров кино и телевидения (Society of Motion Picture and Television Engineers, SMPTE) решило, что уравнение Бартена будет хорошей основой для новой EOTF. Результатом стало то, что мы сейчас называем SMPTE ST 2084 или Perceptual Quantizer (PQ).

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

Дискретизированные значения EOTF можно найти с помощью следующей рекуррентной формулы нахождения k < 1. Последним значением дискретизации будет являться необходимая максимальная яркость:

Для максимальной яркости в 10 000 нит с использованием 12-битной дискретизации (которая используется в Dolby Vision) результат выглядит следующим образом:


EOTF PQ

Как можно заметить, дискретизация не занимает весь диапазон яркости.

В стандарте HDR10 тоже используется EOTF PQ, но с 10-битной дискретизацией. Этого недостаточно, чтобы оставаться ниже порога Бартена в диапазоне яркости в 10 000 нит, но стандарт позволяет встраивать в сигнал метаданные для динамической регуляции пиковой яркости. Вот как 10-битная дискретизация PQ выглядит для разных диапазонов яркости:


Разные EOTF HDR10

Но даже так яркость немного выше порога Бартена. Однако ситуация не настолько плоха, как это может показаться из графика, потому что:

  1. Кривая логарифмическая, поэтому относительная погрешность на самом деле не так велика
  2. Не стоит забывать, что параметры, взятые для создания порога Бартена, выбраны консервативно.

На момент написания статьи телевизоры с HDR10, представленные на рынке, обычно имеют пиковую яркость 1000-1500 нит, и для них достаточно 10 бит. Стоит также заметить, что изготовители телевизоров могут сами решать, что им делать с яркостями выше диапазона, который они могут отображать. Некоторые придерживаются подхода с жёсткой обрезкой, другие — с более мягкой.

Вот пример того, как выглядит 8-битная дискретизация Rec. 709 с пиковой яркостью 100 нит:


EOTF Rec. 709 (16-235)

Как можно видеть, мы намного выше порога Бартена, и, что важно, даже самые неразборчивые покупатели будут настраивать свои телевизоры на значительно большие 100 нит пиковые яркости (обычно на 250-400 нит), что поднимет кривую Rec. 709 ещё выше.

В заключение


Одно из самых больших различий между Rec. 709 и HDR в том, что яркость последнего указывается в абсолютных значениях. Теоретически это означает, что контент, предназначенный для HDR, будет выглядеть одинаково на всех совместимых телевизорах. По крайней мере, до их пиковой яркости.

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

Что означает RGB и где применяется?

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

RGB — это сокращение от «Red Green Blue», и, как вы уже догадались, оно относится к цветам и их составу. Вы можете спросить, почему красный, зеленый и синий? Ответ в том, что красный, зеленый и синий являются основными цветами, которые вы можете комбинировать в различных количествах, чтобы получить любой другой цвет из видимого спектра, который может видеть человеческий глаз.

RGB — это аддитивная цветовая модель. Другими словами, чтобы получить другие цвета, вы смешиваете основной красный, зеленый и синий цвета. Если вы смешаете все три цвета с максимальной интенсивностью (100%), вы получите белый цвет. С другой стороны, если вы смешаете их все с минимальной интенсивностью (0%), вы получите черный цвет.

Другими словами, смешивая равные части 100% красного, зеленого и синего, вы получите свет, а если вы смешаете 0% красного, зеленого и синего, вы получите темноту.

RGB также может рассматриваться как противоположность CMY, что означает «Cyan Magenta Yellow». Почему наоборот? Поскольку CMY как цветовая модель, является противоположностью RGB: объединение голубого, пурпурного и желтого при максимальной интенсивности 100% дает вам черный цвет, а минимальная интенсивность 0% дает белый.

Способы использования RGB

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

Для сравнения, CMYK, что означает «Cyan Magenta Yellow Key (Black)» и является производным от CMY, является отражающей цветовой моделью, означающей, что ее цвета отражаются, а не освещаются, и используются в основном в печати. Вот почему при калибровке принтера вы работаете с цветовым пространством CMY, а при калибровке дисплея компьютера — с RGB.

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

О цветовых пространствах / Хабр

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

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

Наиболее популярными на сегодняшний день являются следующие цветовые модели: RGB (используется в основном в мониторах и камерах), CMY(K) (используется в полиграфии), HSI (широко используется в машинном зрении и дизайне). Существует множество других моделей. Например, CIE XYZ (стандартные модели), YCbCr и др. Далее дан краткий обзор этих цветовых моделей.

Цветовой куб RGB

Из закона Грассмана возникает идея аддитивной (т.е. основанной на смешении цветов от непосредственно излучающих объектов) модели цветовоспроизведения. Впервые подобная модель была предложена Джеймсом Максвеллом в 1861 году, но наибольшее распространение она получила значительно позже.

В модели RGB (от англ. red – красный, green – зелёный, blue – голубой) все цвета получаются путём смешения трёх базовых (красного, зелёного и синего) цветов в различных пропорциях. Доля каждого базового цвета в итоговом может восприниматься, как координата в соответствующем трёхмерном пространстве, поэтому данную модель часто называют цветовым кубом. На Рис. 1 представлена модель цветового куба.

Чаще всего модель строится так, чтобы куб был единичным. Точки, соответствующие базовым цветам, расположены в вершинах куба, лежащих на осях: красный – (1;0;0), зелёный – (0;1;0), синий – (0;0;1). При этом вторичные цвета (полученные смешением двух базовых) расположены в других вершинах куба: голубой — (0;1;1), пурпурный — (1;0;1) и жёлтый – (1;1;0). Чёрный и белые цвета расположены в начале координат (0;0;0) и наиболее удалённой от начала координат точке (1;1;1). Рис. показывает только вершины куба.

Цветные изображения в модели RGB строятся из трёх отдельных изображений-каналов. В Табл. показано разложение исходного изображения на цветовые каналы.

В модели RGB для каждой составляющей цвета отводится определённое количество бит, например, если для кодирования каждой составляющей отводить 1 байт, то с помощью этой модели можно закодировать 2^(3*8)≈16 млн. цветов. На практике такое кодирование избыточно, т.к. большинство людей не способно различить такое количество цветов. Часто ограничиваются т.н. режимом «High Color» в котором на кодирование каждой компоненты отводится 5 бит. В некоторых приложениях используют 16-битный режим в котором на кодирование R и B составляющих отводится по 5 бит, а на кодирование G составляющей 6 бит. Этот режим, во-первых, учитывает более высокую чувствительность человека к зелёному цвету, а во-вторых, позволяет более эффективно использовать особенности архитектуры ЭВМ. Количество бит, отводимых на кодирование одного пиксела называется глубиной цвета. В Табл. приведены примеры кодирования одного и того же изображения с разной глубиной цвета.

Субтрактивные модели CMY и CMYK

Субтрактивная модель CMY (от англ. cyan — голубой, magenta — пурпурный, yellow — жёлтый) используется для получения твёрдых копий (печати) изображений, и в некотором роде является антиподом цветового RGB-куба. Если в RGB модели базовые цвета – это цвета источников света, то модель CMY – это модель поглощения цветов.

Например, бумага, покрытая жёлтым красителем не отражает синий свет, т.е. можно сказать, что жёлтый краситель вычитает из отражённого белого света синий. Аналогично голубой краситель вычитает из отражённого света красный, а пурпурный краситель вычитает зелёный. Именно поэтому данную модель принято называть субтрактивной. Алгоритм перевода из модели RGB в модель CMY очень прост:

При этом предполагается, что цвета RGB находятся в интервале [0;1]. Легко заметить, что для получения чёрного цвета в модели CMY необходимо смешать голубой, пурпурный и жёлтый в равных пропорциях. Этот метод имеет два серьёзных недостатка: во-первых, полученный в результате смешения чёрный цвет будет выглядеть светлее «настоящего» чёрного, во-вторых, это приводит к существенным затратам красителя. Поэтому на практике модель СMY расширяют до модели CMYK, добавляя к трём цветам чёрный (англ. black).

Цветовое пространство тон, насыщенность, интенсивность (HSI)

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

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

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

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

При этом тон (H) задаётся углом относительно оси красного цвета, насыщенность (S) характеризует чистоту цвета (1 означает совершенно чистый цвет, а 0 соответствует оттенку серого). Важно понимать, что тон и насыщенность не определены при нулевой интенсивности.

Алгоритм перевода из RGB в HSI можно выполнить, воспользовавшись следующими формулами:

Цветовая модель HSI очень популярна среди дизайнеров и художников, т.к. в этой системе обеспечивается непосредственный контроль тона, насыщенности и яркости. Эти же свойства делают эту модель очень популярной в системах машинного зрения. В Табл. показано изменение изображения при увеличении и уменьшении интенсивности, тона (выполняется поворот на ±50°) и насыщенности.

Модель CIE XYZ

С целью унификации была разработана международная стандартная цветовая модель. В результате серии экспериментов международная комиссия по освещению (CIE) определила кривые сложения основных (красного, зелёного и синего) цветов. В этой системе каждому видимому цвету соответствует определённое соотношение основных цветов. При этом, для того, чтобы разработанная модель могла отражать все видимые человеком цвета пришлось ввести отрицательное количество базовых цветов. Чтобы уйти от отрицательных значений CIE, ввела т.н. нереальные или мнимые основные цвета: X (мнимый красный), Y (мнимый зелёный), Z (мнимый синий).

При описании цвета значения X,Y,Z называют стандартными основными возбуждениями, а полученные на их основе координаты – стандартными цветовыми координатами. Стандартные кривые сложения X(λ),Y(λ),Z(λ) (см. Рис.) описывают чувствительность среднестатистического наблюдателя к стандартным возбуждениям:

Помимо стандартных цветовых координат часто используют понятие относительных цветовых координат, которые можно вычислить по следующим формулам:

Легко заметить, что x+y+z=1, а это значит, что для однозначного задания относительных координат достаточно любой пары значений, а соответствующее цветовое пространство может быть представлено в виде двумерного графика:

Множество цветов, задаваемое таким способом, называют треугольником CIE.
Легко заметить, что треугольник CIE описывает только цветовой тон, но никак не описывает яркость. Для описания яркости вводят дополнительную ось, проходящую через точку с координатами (1/3;1/3) (т.н. точку белого). В результате получают цветовое тело CIE (см. Рис.):

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

Модель CIELAB

Основной целью при разработке CIELAB было устранение нелинейности системы CIE XYZ с точки зрения человеческого восприятия. Под аббревиатурой LAB обычно понимается цветовое пространство CIE L*a*b*, которое на данный момент является международным стандартом.

В системе CIE L*a*b координата L означает светлоту (в диапазоне от 0 до 100), а координаты a,b – означают позицию между зелёным-пурпурным, и синим-жёлтым цветами. Формулы для перевода координат из CIE XYZ в CIE L*a*b* приведены ниже:


где (Xn,Yn,Zn) – координаты точки белого в пространстве CIE XYZ, а


На Рис. представлены срезы цветового тела CIE L*a*b* для двух значений светлоты:

По сравнению с системой CIE XYZ Евклидово расстояние (√((L1-L2 )^2+(a1^*-a2^* )^2+(b1^*-b2^* )^2 )) в системе CIE L*a*b* значительно лучше соответствует цветовому различию, воспринимаемому человеком, тем не менее, стандартной формулой цветового различия является чрезвычайно сложная CIEDE2000.

Телевизионные цветоразностные цветовые системы

В цветовых системах YIQ и YUV информация о цвете представляется в виде сигнала яркости (Y) и двух цветоразностных сигналов (IQ и UV соответственно).

Популярность этих цветовых систем обусловлена в первую очередь появлением цветного телевидения. Т.к. компонента Y по сути содержит исходное изображение в градациях серого, сигнал в системе YIQ мог быть принят и корректно отображён как на старых чёрно-белых телевизорах, так и на новых цветных.

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

алгоритм и пример кода / Хабр

Если вы не знаете, что такое цветовая температура, начните отсюда.

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


Пример экрана камеры с установкой баланса белого. Источник

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

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

Поэтому я написал собственный алгоритм, и он работает чертовски хорошо. Вот как у меня это получилось.


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

Предупреждение 2: из-за своей относительной простоты этот алгоритм достаточно быстр для работы в реальном времени на изображениях разумного размера (я тестировал его на 12-мегапиксельных снимках), но для достижения наилучших результатов следует применить математические оптимизации, характерные для вашего языка программирования. Я показываю алгоритм без математических оптимизаций, чтобы не усложнять его.

Предупреждение 3: алгоритм предназначен только для использования в диапазоне от 1000 K до 40000 K, что является хорошим диапазоном для фотографии. (На самом деле он намного больше, чем может потребоваться в большинстве ситуаций). Хотя он работает для температур и за пределами этого диапазона, но качество будет снижаться.


Во-первых, должен отдать большой долг и поблагодарить Митчелла Чарити за исходные данные, которые использовал для создания этих алгоритмов: необработанный файл чёрного тела. Чарити предоставляет два набора данных, и мой алгоритм использует 10-градусную функцию сопоставления цветов CIE 1964. Обсуждение 2-градусной функции CIE 1931 с исправлениями Джадда Воса по сравнению с 10-градусным набором выходит за рамки этой статьи, но если вам интересно, можете начать всесторонний анализ с этой страницы.
Вот выдача алгоритма в диапазоне от 1000 К до 40000 К:


Выдача моего алгоритма от 1000 К до 40000 К. Белая точка находится на 6500−6600 К, что идеально подходит для обработки фотографий на современном ЖК-мониторе

Вот более подробный снимок алгоритма в интересном для фотографии диапазоне от 1500 К до 15000 К:


Тот же алгоритм, но от 1500 K до 15000 K

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


Первым шагом к выведению надёжной формулы было построить график оригинальных значений чёрного тела от Чарити. Вы можете скачать всю электронную таблицу в формате LibreOffice/OpenOffice .ods (430 КБ).

Вот данные после построения графика:


Данные оригинальной температуры (K) в RGB (sRGB), график LibreOffice Calc. Опять же, преобразование основано на 10-градусной CMF-функции CIE 1964. Белая точка, как и требовалось, находится между 6500 K и 6600 K (пик в левой части графика). Источник

Легко заметить, что есть несколько участков, которые упрощают наш алгоритм. В частности:

  • Красные значения ниже 6600 K всегда 255
  • Синие значения ниже 2000 K всегда 0
  • Синие значения выше 6500 K всегда 255

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

С этого момента я разделил данные (без сегментов «всегда 0» и «всегда 255») на отдельные цветовые компоненты. В идеальном мире кривую можно подогнать к каждому набору точек, но, к сожалению, в реальности это не так просто. Поскольку на графике сильное несоответствие между значениями X и Y — все значения x больше 1000 и отображаются в 100 точечных сегментах, в то время как значения y находятся между 255 и 0 — пришлось транспонировать данные x, чтобы получить лучшее соответствие. В целях оптимизации я сначала разделил значение x (температура) на 100 для каждого цвета, а затем вычел сколько нужно, если это значительно помогало в подгонке к графику. Вот результирующие диаграммы для каждой кривой, а также наиболее подходящая кривая и соответствующее значение коэффициента детерминации (R-квадрат):

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

Как видите, все кривые достаточно хорошо выровнены, со значениями коэффициента детерминации выше 0,987. Я мог бы потратить больше времени на подгонку кривых, но для обработки фотографиями этого достаточно. Ни один обыватель не скажет, что кривые неточно соответствуют исходным идеализированным наблюдениям чёрного тела, верно?


Вот алгоритм во всей красе.

Во-первых, псевдокод:

Начнём с температуры в Кельвинах где-то между 1000 и 40000. (Другие значения могут работать, но я не могу дать никаких обещаний о качестве оценок алгоритма выше 40000 K). Обратите внимание, что переменные температуры и цвета должны быть объявлены как переменные с плавающей точкой.

    Set Temperature = Temperature \ 100
    
    Вычисление красного:

    If Temperature <= 66 Then
        Red = 255
    Else
        Red = Temperature - 60
        Red = 329.698727446 * (Red ^ -0.1332047592)
        If Red < 0 Then Red = 0
        If Red > 255 Then Red = 255
    End If
    
    Вычисление зелёного:

    If Temperature <= 66 Then
        Green = Temperature
        Green = 99.4708025861 * Ln(Green) - 161.1195681661
        If Green < 0 Then Green = 0
        If Green > 255 Then Green = 255
    Else
        Green = Temperature - 60
        Green = 288.1221695283 * (Green ^ -0.0755148492)
        If Green < 0 Then Green = 0
        If Green > 255 Then Green = 255
    End If
    
    Вычисление синего:

    If Temperature >= 66 Then
        Blue = 255
    Else

        If Temperature <= 19 Then
            Blue = 0
        Else
            Blue = Temperature - 10
            Blue = 138.5177312231 * Ln(Blue) - 305.0447927307
            If Blue < 0 Then Blue = 0
            If Blue > 255 Then Blue = 255
        End If

    End If

Обратите внимание, что в приведённом псевдокоде Ln() означает натуральный логарифм. Также обратите внимание, что можно опустить проверки «если цвет меньше 0», если температуры всегда в рекомендуемом диапазоне. (Однако всё равно нужно оставить проверки «если цвет больше 255»).

Что касается фактического кода, вот точная функция Visual Basic, которую я использую в PhotoDemon. Она ещё не оптимизирована (например, логарифмы стианут намного быстрее с таблицами соответствия), но хотя бы код краткий и читаемый:

'Для данной температуры (в Кельвинах) вычисляем RGB-эквивалент Private Sub getRGBfromTemperature(ByRef r As Long, ByRef g As Long, ByRef b As Long, ByVal tmpKelvin As Long)

    Static tmpCalc As Double

    'Температура должна быть в диапазоне от 1000 до 40000 градусов
    If tmpKelvin < 1000 Then tmpKelvin = 1000
    If tmpKelvin > 40000 Then tmpKelvin = 40000
    
    'Все вычисления требуют tmpKelvin \ 100, так что можно обойтись однократным преобразованием
    tmpKelvin = tmpKelvin \ 100
    
    'Вычисляем все цвета по очереди
    
    'Сначала красный
    If tmpKelvin <= 66 Then
        r = 255
    Else
        'Примечание: значение R-квадрата для этого приближения 0,988
        tmpCalc = tmpKelvin - 60
        tmpCalc = 329.698727446 * (tmpCalc ^ -0.1332047592)
        r = tmpCalc
        If r < 0 Then r = 0
        If r > 255 Then r = 255
    End If
    
    'Затем зелёный
    If tmpKelvin <= 66 Then
        'Примечание: значение R-квадрата для этого приближения 0,996
        tmpCalc = tmpKelvin
        tmpCalc = 99.4708025861 * Log(tmpCalc) - 161.1195681661
        g = tmpCalc
        If g < 0 Then g = 0
        If g > 255 Then g = 255
    Else
        'Примечание: значение R-квадрата для этого приближения 0,987
        tmpCalc = tmpKelvin - 60
        tmpCalc = 288.1221695283 * (tmpCalc ^ -0.0755148492)
        g = tmpCalc
        If g < 0 Then g = 0
        If g > 255 Then g = 255
    End If
    
    'Наконец, синий
    If tmpKelvin >= 66 Then
        b = 255
    ElseIf tmpKelvin <= 19 Then
        b = 0
    Else
        'Примечание: значение R-квадрата для этого приближения 0,998
        tmpCalc = tmpKelvin - 10
        tmpCalc = 138.5177312231 * Log(tmpCalc) - 305.0447927307
        
        b = tmpCalc
        If b < 0 Then b = 0
        If b > 255 Then b = 255
    End If
    
End Sub

Функция использовалась для генерации образца выдачи в начале этой статьи, поэтому я могу гарантировать, что она работает.
Вот отличный пример того, что могут сделать регулировки цветовой температуры. Изображение ниже — рекламный плакат для сериала HBO «Настоящая кровь» — зрелищно демонстрирует потенциал регулировки цветовой температуры. Слева — исходный кадр; справа — регулировка цветовой температуры с помощью кода выше. Одним щелчком мыши ночную сцену можно переделать для дневного света.


Регулировка цветовой температуры в действии

Реальный инструмент цветовой температуры в моей программе PhotoDemon выглядит следующим образом:


Инструмент цветовой температуры PhotoDemon

Скачайте программу и посмотрите его в действии.


Рено Бедар сделал отличное онлайн-демо для этого алгоритма. Спасибо, Рено!
Спасибо всем, кто предложил улучшения оригинального алгоритма. Я знаю, что у статьи много комментариев, но их стоит прочитать, если вы планируете реализовать собственную версию.

Хочу выделить два конкретных улучшения. Во-первых, Neil B любезно предоставил лучшую версию для исходных функций подгонки кривой, что слегка меняет температурные коэффициенты. Изменения подробно описаны в его превосходной статье.

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

цветовых систем — RGB и CMYK

RGB или CMYK?

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

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

Следующие иллюстрации и описания определяют различные цветовые системы.


Аддитивная система цвета
Красный — Зеленый — Синий (RGB)

RGB diagram

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

Эта цветовая модель используется в компьютерных мониторах, телевизорах и театре. Если вы положите взгляд на экран телевизора, вы можете увидеть что-то похожее на рисунок ниже.

RGB diagram

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

Эта система применяется только к устройствам, использующим свет, таким как компьютерные мониторы и телевизоры.


Субтрактивная цветовая система
Красный — Желтый — Синий
RGB diagram secondary colors secondary colors

Основные цвета

Вторичные цвета

Третичные Цвета

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

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


CMYK Color System
Голубой — пурпурный — желтый — черный

secondary colors

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

secondary colors

Color Symbolism

Узнайте о другом измерении цвета на веб-сайте Color Matters.
Визит Цветной символики.

.Цветовой код

RGB 🎨 Выбор цвета, коды, преобразователи

HTMLCSSJS
  • редактор
  • Метки
  • Шпаргалка
  • персонажа
  • Генераторы
  • Шаблоны
  • Блог
  • ссылки
  • редактор
  • Шпаргалка
  • Генераторы
  • Блог
  • ссылки
  • редактор
  • Шпаргалка
  • JQuery
  • Блог
  • ссылки
HTML CSS JS

  • Градиент
  • Box Shadow
  • Тень текста
  • Цвет
  • Шрифт
  • Таблица
  • Колонка
  • Граница
  • Радиус границы
  • Преобразование
  • Фон
Поиск по названию:
Сортировать
  • Абсолютный ноль
  • Кислотно-зеленый
  • Аэро
  • Аэро-синий
  • Африканский фиолетовый
  • ВВС синий
  • ВВС синий (ВВС США)
  • превосходство в воздухе синий
  • алибамский
  • 000000
  • 000000 Аликан Alizarin Crimson
  • Сплав Оранжевый
  • Миндаль
  • Амарант
  • Амарант Темно-фиолетовый
  • Амарант Розовый
  • Амарант Фиолетовый
  • Амарант Красный
  • Амазонка
  • 000-я янтарная лилия
  • Android Green
  • Anti-Flash White
  • Antique Brass
  • Antique Bronze
  • Antique Fuchsia
  • Antique Ruby
  • Antique White
  • Ao (английский)
  • Aparine
  • Apar
  • Apar
  • Arctic Lime
  • Army Green
  • Мышьяк
  • Артишок
  • Arylide Желтый
  • Ash Gray
  • Спаржа
  • Atomic Tangerine
  • Auburn
  • Aureolin
  • AuroMetalSaurus
  • Авокадо
  • Удивительный
  • Aztec Gold
  • Azure
  • Azure (Web)
  • Azure Mist
  • Azureish Белые
  • Baby Blue
  • Baby Blue Eyes
  • Baby Pink
  • присыпка
  • Бейкер-Miller Pink
  • Бал Синий
  • Banana
  • Banana Mania
  • Банановый Желтый
  • Бангладеш Грин
  • Барби Пинк
  • Сарай Красный
  • Броненосец Грей
,
Color — Визуальный дизайн — iOS — Руководство по интерфейсу пользователя

Цвет

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

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

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

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

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

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

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

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

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

Посмотрите, как дисплей True Tone влияет на цвет. Дисплей True Tone использует датчики внешней освещенности, чтобы автоматически регулировать белую точку дисплея для адаптации к условиям освещения текущей среды. Приложения, ориентированные в основном на чтение, фотографии, видео и игры, могут усилить или ослабить этот эффект, указав стиль адаптивности белой точки.Для руководства разработчика посмотрите UIWhitePointAdaptivityStyle.

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

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

Системные цвета

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

Не задавайте жестко системные значения цвета в вашем приложении. Приведенные ниже значения цвета предназначены для справки в процессе разработки приложения.Фактические значения цвета могут колебаться от выпуска к выпуску, в зависимости от различных переменных среды. Всегда используйте API для применения системных цветов; для руководства разработчика, см. UIColor.

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

  • Свет Темный Имя API
    Серый systemGray
    Серый (2) systemGray2
    Серый (3) systemGray3
    Серый (4) systemGray4
    Серый (5) systemGray5
    Серый (6) systemGray6
  • Свет Темный Имя API
    Серый systemGray
    Серый (2) systemGray2
    Серый (3) systemGray3
    Серый (4) systemGray4
    Серый (5) systemGray5
    Серый (6) systemGray6

Цветов Динамической Системы

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

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

С обоими наборами цветов фона вы обычно используете варианты для обозначения иерархии следующими способами:

  • Основная информация для общего вида
  • Вторичный объект для группировки контента или элементов в общем виде
  • Третичный для группировки контента или элементов во вторичных элементах

Для содержимого переднего плана iOS определяет следующие цвета:

Цвет Используется для API
Метка Текстовая метка, которая содержит основной контент. ярлык
Вторичный ярлык Текстовая метка, которая содержит вторичный контент. вторичная метка
Третичная метка Текстовая метка с третичным содержанием. третичная метка
Четвертичная метка Текстовая метка, которая содержит четвертичное содержание. четвертичная метка
Заполнитель текста Заполнитель текста в элементах управления или текстовых представлениях. заполнительТекст
Сепаратор Разделитель, который позволяет некоторому базовому контенту быть видимым. сепаратор
Непрозрачный сепаратор Разделитель, который не позволяет отображать какой-либо нижележащий контент. непрозрачныйSeparator
Ссылка Текст, который функционирует как ссылка. ссылка

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

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

Управление цветом

Применение цветовых профилей к вашим изображениям. Цветовое пространство по умолчанию на iOS — Стандартный RGB (sRGB). Чтобы убедиться, что цвета правильно соответствуют этому цветовому пространству, убедитесь, что ваши изображения содержат встроенные цветовые профили.

Используйте широкий цвет для улучшения визуального восприятия на совместимых дисплеях. Широкие цветные дисплеи поддерживают цветовое пространство P3, которое может создавать более насыщенные и насыщенные цвета, чем sRGB. В результате фотографии и видео, использующие широкий цвет, выглядят более реалистично, а визуальные данные и индикаторы состояния, которые используют широкий цвет, более эффективны.При необходимости используйте цветовой профиль Display P3 со скоростью 16 бит на пиксель (на канал) и экспортируйте изображения в формате PNG. Обратите внимание, что для создания широкоформатных изображений и выбора цветов P3 необходим широкий цветной дисплей.

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

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

СОВЕТ На Mac с широким цветным дисплеем вы можете использовать системную палитру цветов для выбора и предварительного просмотра цветов P3, а также сравнивать их с цветами sRGB.

,

# FFFF00 Color Цветовой код RGB

HTMLCSSJS
  • редактор
  • Метки
  • Шпаргалка
  • персонажа
  • Генераторы
  • Шаблоны
  • Блог
  • ссылки
  • редактор
  • Шпаргалка
  • Генераторы
  • Блог
  • ссылки
  • редактор
  • Шпаргалка
  • JQuery
  • Блог
  • ссылки
HTML CSS JS

  • Градиент
  • Box Shadow
  • Тень текста
  • Цвет
  • Шрифт
  • Таблица
  • Колонка
  • Граница
  • Радиус границы
  • Преобразование
  • Фон
Поиск по названию:
Сортировать
  • Абсолютный ноль
  • Кислотно-зеленый
  • Аэро
  • Аэро-синий
  • Африканский фиолетовый
  • ВВС синий
  • ВВС синий (ВВС США)
  • превосходство в воздухе синий
  • алибамский
  • 000000
  • 000000 Аликан Alizarin Crimson
  • Сплав Оранжевый
  • Миндаль
  • Амарант
  • Амарант Темно-фиолетовый
  • Амарант Розовый
  • Амарант Фиолетовый
  • Амарант Красный
  • Амазонка
  • 000-я янтарная лилия
  • Android Green
  • Anti-Flash White
  • Antique Brass
  • Antique Bronze
  • Antique Fuchsia
  • Antique Ruby
  • Antique White
  • Ao (английский)
  • Aparine
  • Apar
  • Apar
  • Arctic Lime
  • Army Green
  • Мышьяк
  • Артишок
  • Arylide Желтый
  • Ash Gray
  • Спаржа
  • Atomic Tangerine
  • Auburn
  • Aureolin
  • AuroMetalSaurus
  • Авокадо
  • Удивительный
  • Aztec Gold
  • Azure
  • Azure (Web)
  • Azure Mist
  • Azureish Белые
  • Baby Blue
  • Baby Blue Eyes
  • Baby Pink
  • присыпка
  • Бейкер-Miller Pink
  • Бал Синий
  • Banana
  • Banana Mania
  • Banana Yellow
  • Бангладеш Зеленый
  • Barbie Pink
  • Barn Red
  • Броненосец Серый
  • Bazaar B’dazzled Синий
  • Beau Синий
  • Beaver
  • Бежевый
  • Belgion Big Dip O’ruby 9000 4
  • Big Foot Feet
.

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

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