Цветовое пространство dci p3 что это
DCI-P3 в экранах смартфонов — что это значит?
На что влияет и что означает параметр DCI-P3 в дисплея смартфонов.
Человеческий глаз способен распознавать несколько миллионов оттенков различных цветов при том, что сам человек может даже не осознавать этого. Экраны гаджетов, к сожалению, не могут сравниться с этими показателями, поэтому производители дисплеев различных устройств продолжают соревноваться, чей экран лучше передаст цвет.
Для более наглядного сравнения были созданы типовые цветовые пространства, которые часто можно увидеть в технических характеристиках экрана смартфона. Одно из цветовых пространств — DCI-P3 — может похвастаться отображением ярких и насыщенных цветов. Разбираемся, что значит DCI-P3 в экранах смартфонов, а также на что это влияет.
Есть несколько наиболее распространенных цветовых пространств, названия которых можно встретить в списке характеристик при покупке телефона. Например, sRGB — типовой профиль, который является стандартом практически для всех экранов. Более продвинутым цветовым пространством считается Adobe RGB, однако используется он далеко не везде. На отдельной же ступени от двух перечисленных пространств находится DCI-P3. Его особенности более подробно стоит рассмотреть, сравнив его с sRGB и Adobe RGB.
Экран с DCI-P3 передает цвета лучше, чем sRGB — картинка выглядит намного более насыщенной. А вот сравнение с Adobe RGB не такое однозначное. Дело в том, что для человеческого глаза «теплые» цвета важнее, чем «холодные». Общее впечатление от изображения складываются именно по красным, оранжевым и другим теплым оттенкам. Поэтому вместо того, чтобы пытаться перегнать Adobe RGB во всем, создатели DCI-P3 решили сделать упор на красную область спектра цветового пространства. В результате можно сказать, что DCI-P3 хуже Adobe RGB в зеленом спектре, но лучше в красном, что в итоге намного важнее для восприятия человеческим глазом.
Разница для обычного пользователя, который не увлекается фотографией и использует смартфон только для стандартных нужд (мессенджеры, браузер, звонки и т.д.), будет не так критична. Хоть картинка и станет насыщеннее, этот критерий вряд ли сильно повлияет на выбор при покупке. Для тех же, кто профессионально занимается обработкой, съемкой, фотографиями, эта разница может стать существенным поводом выбрать телефон, использующий именно этот цветовой стандарт.
Что такое цветовое пространство? Разбор
Восприятие цвета — довольно субъективная штука. Кто-то любит более насыщенные и контрастные цвета, кто-то наоборот предпочитает более сдержанные оттенки. Тем не менее, даже в таком субъективном вопросе как восприятие цвета — есть строгая наука. Наверняка, вы слышали такие термины как sRGB, дельта E. Сегодня разберемся, что все это значит…
Поэтому сегодня мы поговорим о том, что такое цветовое пространство и цветовой охват?
А также подскажем, на что обратить внимание при покупке монитора, если вы работаете с цветом!
Начнём с с того, как вообще на экране мониторов создаётся цветное изображение. Дело в том, что все люди с нормальным цветовосприятием — трихроматы.
Это значит, что на нашей сетчатке глаза есть три вида рецепторов (колбочек), чувствительных к свету разной длины волны: S, M, L (от англ. short,medium, long). Соответственно S-колбочки преимущественно воспринимают синий цвет, М — зеленый, L — красный.
А это значит, что смешивая три цвета в разных пропорциях мы можем получить любой оттенок. Поэтому пиксели в современных дисплеях состоят из трёх базовых цветов: зеленого, синего и красного.
Получается, что если создать три источника света с эталонными синим, зеленым и красным излучателем, то смешивая цвета в разных пропорциях мы сможем получить любой оттенок. В целом, да. Но есть важная ремарка, в основе такого формирования цвета лежит аддитивная цветовая модель. То есть модель, в которой цвет создаётся путём сложения.
Но бывает еще субтрактивная цветовая модель, где разные цвета формируются путем вычитания. Субтрактивной модели нас учили в детстве, когда рассказывали, как смешивать краски. Эта же модель используется в полиграфии, и более известна вам как CMYK.
Но сегодня мы будем говорить, в основном, про RGB-модели.
Цветовая модель CIE 1931
Итак, мы выяснили, что трёх базовых цветов, достаточно для формирования любого оттенка. Но проблема в том, что все люди воспринимают цвета немного по-разному и для всех эталонный зеленый, красный и синий цвета — будут разными. В таком случае возник вопрос, какие именно оттенки базовых цветов нужно взять за основу? Этим вопросом занялась Международная комиссия по освещению, также известная как CIE — от французского Commission internationale de l’éclairage).
В 1931 году они утвердили цветовую модель CIE XYZ. Вот так она выглядит. Вы наверняка много раз видели эту цветную диаграмму похожую на треугольник. Но что тут вообще изображено?
Смотрите, на этой диаграмме изображены все физически реализуемые цвета видимого спектра электромагнитного излучения, то есть от 380 до 700 нм.
Поэтому, задав координаты X и Y мы можем описать вообще любой цвет, а точнее оттенок, который может теоретически воспринять человеческий глаз. А если добавить еще и третью координату Z, то мы легко сможем описать еще и яркость.
Такой метод описания цвета не лишен недостатков, но оказался настолько удобным, для описания и сравнения цветовых пространств. Этим мы сейчас и займемся.
Начнём с sRGB. Сейчас — это наиболее популярное цветовое пространство и стандарт для графики в интернете.
Стандарт — не новый. Он был разработан еще в 1996 году компаниями HP и Microsoft. А основан он был вообще на стандарте HDTV телевещания BT.709. Поэтому цветовые пространства sRGB и BT.709 идентичным по цветовому охвату.
Скажем так, sRGB не самое широкое цветовое пространство. Оно охватывает только 36% видимых глазу цветов. Здесь не очень зелёный зелёный, он скорее салатовый. Немного коричневатый красный. Но особо большая проблема с голубым, посмотрите насколько он близок к белому цвету.
Зато тут отличный синий и нормальная точка белого. Которая называется D65 и имеет цветовую температуру 6500 К, что типично для рассеянного дневного света.
Но почему пространство такое узкое? Неужели нельзя было выбрать нормальную точку для красного и зеленого цвета?
В 96 году было нельзя. Более того такой выбор был более чем логичен. Ведь основные цвета sRGB — это цвета люминофоров у кинескопов того времени. Именно поэтому старые ЭЛТ-мониторы отлично справлялись с воспроизведением цвета в пространстве sRGB без каких либо дополнительных калибровок.
А вот для современных ЖК-мониторов такая задача совсем нетривиальная. Поэтому сейчас корректное отображение цветового пространства sRGB по-прежнему редкость и встречается только в дорогих мониторах. За редким исключением…
Что такое ΔE? ASUS ProArt Display
Но что значит фраза “корректное отображение цветового пространства”?
За это отвечает показатель показатель ΔE. А что это такое, разберем на примере доступного профессионального монитора ASUS ProArt Display PA278QV, который нам любезно предоставила компания ASUS совместно и с интернет-магазином Ситилинк.
В идеале, цвета которые отображает монитор, должны полностью совпадать с цветами, описанными в рабочем цветовом пространстве. Так как если замерить спектр свечения базового синего, зеленого, красного, а также белого цвета разместить их на диаграмме, новые точки должны полностью совпасть координатами обозначенными в цветовом пространстве.
Но в реальности, к сожалению, так никогда не бывает. Всегда есть какая-то погрешность, вот эта погрешность и является показателем ΔE или Дельта E.
Empfindung — Ощущение
Можно сказать, что ΔE — это среднее расстояние междут этоланными координатами цветового пространства и реальными цветами, которые отображает монитор.
В нашем случае производитель заявляет, что в этом мониторе ΔE Post Views: 5 330
Каким бывает цветовое пространство мониторов и телевизоров и что это такое
Содержание
Содержание
Изображение, выдаваемое мониторами стандартизировано в наиболее существенных его составляющих: разрешение, частота смены кадров, глубина цвета, гамма, цветовое пространство.
Для построения математической модели восприятия цвета человеком двое ученых — Джон Гилд и Дэвид Райт, независимо друг от друга, провели эксперименты на людях с нормальным зрением.
По результатам этих экспериментов в 1931 году был принят стандарт CIE XYZ, легший в основу почти всех прочих стандартов, в которых так или иначе упоминается цвет. Конечно же эта модель неидеальна.
Например, большую часть цветов этого пространства невозможно увидеть в реальности. Области, увеличенные в 10 раз для наглядности, внутри которых цвета для большинства людей неотличимы друг от друга — весьма неравномерны.
Зато эта диаграмма очень удобна для описания цветовых охватов реальных устройств. Прямая линия между двумя цветами на диаграмме показывает те цвета, которые можно получить при их смешении в разной пропорции. Достаточно знать длину волны и ширину пиков основных цветов чтобы без сложных расчетов найти координаты точки прямо на диаграмме.
Существуют альтернативные пространства, отображающие полный цветовой охват, со своими особенностями. Например, CIE Lab в котором из-за нелинейных преобразований сравнивать мониторы неудобно. Но удобно сравнивать печатающие устройства, из-за того, что цвета рассматривается относительно точки белого, которая для напечатанного изображения меняется в зависимости от освещения.
О наиболее распространенных цветовых пространствах и будет рассказано в данном материале.
Стандарты аналогового телевидения. NTSC, SAMPT-C, PAL/SECAM, REC.601
NTSC стандартом на цвет обзавелся в 1953 году. В те далекие времена телевизоры обеспечивали очень широкий цветовой охват, но используемый люминофор оставлял длинные шлейфы и не давал достаточно яркой картинки, что привело к постепенному отказу производителей от этого стандарта.
В итоге появился стандарт SAMPT-C, учитывающий реальный цвет в телевизорах, который продолжили использовать в вещании NTSC.
Этой неразберихой (использование одного названия как для стандарта цветового пространства, так и системы вещания) пользуются хитрые производители, беря для расчётов процента охвата относительно NTSC (NTSC 1953) другой стандарт цветового охвата SAMPT-C (NTSC 1976) устройство на бумаге выглядело «круче» чем на самом деле. В современности стандарт цветового охвата NTSC (1953 года) нигде кроме маркетинга не используется
Чуть позже разработали другие стандарты телевиденья PAL/SECAM, которые описываются единым стандартом REC.601. В современном цифровом мире единственное подходящее его применение — оцифровка кассет, с последующей конвертацией в другое, более подходящее, пространство.
Но есть еще кое-что. Декодеры h.264 в зависимости от размера изображения по-разному преобразуют закодированную информацию о цвете в итоговые значения RGB. В зависимости от размеров изображения иногда неверно используется стандарт REC.601 вместо REC.709. Это проводит к искажению цветов либо в красноватую, либо в желтоватую область.
sRGB, REC.709
sRGB и REC.709 появились примерно так же, как SAMPT-C — чтобы навести порядок в том хаосе, который устроили производители мониторов. И то, что он так свободно перешел на ЖК-панели, можно считать чудом — принцип получения итоговой картинки разный (разные люминофоры, фильтры и так далее). Интересная особенность стандарта — он не имеет постоянной оптоэлектронной световой характеристики(гаммы).
Изначально обратную гамму использовали для компенсации неравномерности светимости люминофора от уровня сигнала управляющего током луча кинескопа, (производителям так было проще) чтобы итоговое изображение выглядело максимально близко к оригиналу. Но современным мониторам это не так уж и необходимо — они могут работать с любой гамма-функцией.
Сейчас гамма нужна для оптимального распределения информации о цвете на числовой последовательности бит. К примеру, в стандарте вещания HDTV (REC.709) числа 0-15,236-255 нужны для синхронизации кадров хотя реально для этой цели используются только 0 и 255. Чтобы учесть потерю этой части диапазона была подобрана соответствующая гамма функция. А что будет с изображением при подаче REC.709 сигнала на sRGB-монитор видно при неправильной настройке HDMI в драйвере видеокарты.
Так вот, несмотря на то, что везде для sRGB указывается гамма 2,2, на самом деле гамма меняется от 1 до 2,4.
Синий — локальное значение гаммы sRGB, пунктир — гамма 2,2, красный — гамма sRGB.
Сделано это как раз для оптимального распределения цвета по битам с учетом отражения освещения в комнате на экране монитора.
А еще все привыкли к тому, что точка белого указывается в кельвинах (к примеру, 6500К), но и это «неправда». По стандарту белый цвет используемый в sRGB соответствует дневному белому при полуденном солнце, выглядит немного зеленее привычного 6500К и называется D65.
Пока что sRGB — это стандарт цвета для интернета. Именно в этом пространстве стоит работать создателям изображений, дизайнерам, фотографам, ориентирующимся на цифровые публикации. А вот создателям видеоконтента стоит использовать другой стандарт — REC.709, у которого, несмотря на тот же самый цветовой охват, есть отличия в уровне точек черного и белого.
Еще одна особенность sRGB — отношение производителей мониторов к этому стандарту. Даже заявляя заводскую калибровку в sRGB, по факту от стандарта может отличаться все, кроме основных цветов, что осложняет работу. Обращайте внимание на обзоры.
AdobeRGB
Adobe RGB считается стандартом в печати, из-за того, что координаты основных цветов для подобраны таким образом, чтобы точно перекрывать swopCMYK — стандарт цветового охвата для печати 4 красками. В области голубого цвета у sRGB очень большие проблемы. Даже дешевенький домашний струйный принтер дает более насыщенный голубой цвет, чем дорогущий дизайнерский монитор, поддерживающий только sRGB.
Точка белого в Adobe RGB не D65, а D50 как соответствующая белому цвету на высококачественной бумаге. Который может доставить кучу неприятностей даже в любительской печати из-за принципа своей работы. Это вещество, преобразующее ультрафиолетовую часть спектра в синий цвет, что делает желтоватую низкосортную бумагу на вид яркой и белой, а отпечатки на такой бумаге сильно меняют цвета в зависимости от источника света.
Картинка, предназначенная для sRGB с отключенным управлением цветом, на таком мониторе, будет заметно отличаться от оригинального цвета, из-за того, что зеленая компонента не только дальше от точки белого, но еще и немного сдвинута в сторону от линии «точка белого/точка зеленого».
Такое пространство не подходит для потребления контента, цвета получаются нетолько более насыщенными, но и меняют оттенки, что больше всего заметно на лицах, к цвету которых глаз более чувствителен. По той же причине создателям контента, не занимающимся печатью, такое пространство доставит больше проблем чем пользы — практически никто не увидит изображение в изначальном виде.
Чтобы использовать такой монитор как следует, к нему потребуется колориметр-спектрофотометр для точной калибровки как самого монитора, так и принтера, источники света D50 и D65 для контроля отпечатков, помещение без окон, окрашенное серой краской. И всё это для того, чтобы исключить влияние внешнего освещения на восприятие цвета. В противном случае это будет просто монитор с насыщенными зелеными и голубыми цветами.
Из-за слишком широкого охвата может наблюдаться эффект постеризации на 8-битных панелях, а калибровка через LUT видеокарты в более «узкие» пространства только усиливает этот эффект. Поэтому в таких мониторах 14-битный LUT в самом мониторе и 10-битный вход — не роскошь, а необходимость.
Но все эти ухищрения недостаточны, когда дело доходит до многоцветных принтеров. Даже обычный потребительский 6-цветный принтер может выйти за пределы возможностей начальных профессиональных мониторов, поэтому превышение охвата монитора над стандартным очень даже желательно.
DCI-P3, Display-P3, P3-D65
Изначально DCI-P3 был стандартом для кинотеатров.
У оригинального стандарта яркость точки белого всего 45 нит (кд/м²) и заметен зеленоватый оттенок, а используемая гамма 2,6. Большинство мониторов даже если выкрутить яркость на минимум, всё равно будут заметно ярче чем полагается экрану в кинотеатре.
Поэтому у стандарта появились адаптации для потребительской техники — Display-P3, P3-D65, отличающиеся точкой белого, и гаммой, которую приняли за 2,2. Общего у них с изначальным стандартом — только основные цвета.
Этот стандарт планируется в качестве замены sRGB. Своим приходом в массы в скором будущем он будет обязан квантовым точкам — дешёвому люминофору позволяющим получить практически любой цвет без применения редкоземельных металлов.
Мониторов, обеспечивающих достаточный уровень покрытия будущего стандарта, становится все больше, но сейчас это вызывает некоторые сложности. Хотя браузеры и научились преобразованию цвета, для этого им требуется знать охват монитора. А Windows 10 знать не знает об этом стандарте. И если вы стали счастливым обладателем монитора с цветовым охватом отличным от sRGB, то при отсутствии настроек это может привести к искажению цветов.
В отличии от Adobe RGB у семейства P3 охват расширен не только в области зеленых, но и красных оттенков. Это приводит к чрезмерно насыщенным, «кислотным» цветам. Чтобы избежать этого достаточно скачать соответствующий профиль и назначить его по умолчанию для монитора.
К сожалению, производители и обзорщики не часто балуют профилями мониторов, а калибровка стоит денег, которые не хочется тратить. В таком случае поможет стандартный профиль, делающий просмотр интернета более приятным.
REC.2020 REC.2100
Новейший формат для цифрового телевидения — REC.2020 REC.2100. Из-за того, что используются монохромные цвета, даже квантовые точки не смогут обеспечить такого охвата, а значит бюджетных устройств с 100% покрытием в обозримом будущем не предвидится. Скорее всего это цветовое пространство ожидает судьба контейнера —цветового пространства, не соответствующего ни одному реальному устройству, но используемое для хранения информации о цвете, чтобы уже само устройство выполнило преобразования цвета в соответствии со своим возможностями. Это уже происходит на YouTube. Где для правильного отображения цвета видео в формате HDR, перед загрузкой рекомендуется конвертация именно в пространство REC.2020.
Заключение
В первую очередь при покупке монитора следует помнить, что отклонение более чем на 5% от стандартного цветового охвата в большую сторону ведет к существенному изменению цвета, которое без калибратора практически не исправить. А отклонение в меньшую сторону ничем не исправить.
Заводская калибровка вовсе не гарантирует, что монитор будет пригоден для работы.
Как ни странно, несмотря на явное желание производителей сделать DCI-P3 новым стандартом мониторов «по умолчанию», Windows 10 даже не знает о существовании этого пространства. Для того чтобы это исправить потребуется вручную назначить монитору соответствующий профиль.
Но это все настолько заморочено, что даже разработчики ПО и оборудования допускают ошибки.
Управление цветом: что это и как настроить свои инструменты
Если вас просят сделать журнальный столик с ножками высотой 50, что это значит? 50 километров? Футов? Дюймов? Миллиметров?
Наверное, 50 сантиметров. Никто об этом не сказал, но можно догадаться: 50 километров, футов или дюймов — слишком много для журнального столика, а 50 миллиметров — слишком мало.
Лучше бы вам указали систему измерения. Значение «50» само по себе бессмысленно, тогда как «50 см» раскрывает абсолютные физические характеристики ножек стола.
Эта статья об управлении цветом для дизайнеров и разработчиков программного обеспечения. Если вы поняли приведённый выше пример, то понимаете самую важную вещь в управлении цветом — одних значений недостаточно для описания цвета. Вам нужно значение цвета и описание пространства, в котором оно существует.
Полностью красный непрозрачный цвет без примесей синего и зелёного можно записать в разных форматах. В сети это может быть #ff0000 или rgb(255, 0, 0), на iOS может быть UIColor(red:1, green:0, blue:0, alpha:1), а на Android — Color.valueOf(0xffff0000). Это всё разные формы одного и того же — полностью красного цвета, без зелёного и синего.
Эти значения похожи на цифру «50» выше — у них нет единиц измерения. Характеристика «полностью красный» не имеет смысла. Какой красный считать «полным»? Разные дисплеи имеют разную максимальную интенсивность для красного. Некоторые могут давать более яркие и глубокие оттенки, чем другие.
Если вы хотите, чтобы красный цвет выглядел одинаково на разных дисплеях, нужно указать единицы измерения. Нам нужен эквивалент сантиметров для цвета, чтобы знать, чему соответствует этот «красный» в видимом спектре света.
Цветовые пространства
Цветовые пространства позволяют нам отображать абсолютные цвета физического мира в системе измерений, подходящей для дисплеев. Вы слышали о «sRGB», «Adobe RGB», «Display P3» или «DCI-P3»? Это и есть цветовые пространства.
Они похожи на «см» из первого абзаца. sRGB — это стандартное цветовое пространство для многих устройств. Adobe RGB, Display P3 и DCI-P3 — это пространства с более широким цветовым охватом, которые можно найти на более новых или дорогих устройствах.
Значение слева, цветовое пространство справа
Цветовые пространства сложнее, чем единицы измерения. Они не просто определяют масштаб, они устанавливают белую точку, диапазон, масштаб и другие свойства для красного, зелёного и синего в видимом спектре.
Есть много способов визуально отразить цветовые профили, но самый удобный и распространённый — с помощью цветовой модели в 3D.
Цветное поле — sRGB, белёсое — Display P3
Перед вами разница между sRGB и Display P3. sRGB отображает меньше цветов, чем Display P3, поэтому на картинке его цветовой охват находится внутри охвата Display P3.
Любой цвет, описанный в пространстве sRGB, также можно описать в Display P3. #ff0000 в sRGB — это #ea3323 в Display P3 (значение может немного отличаться в зависимости от метода преобразования).
Я надеюсь, что трёхмерная модель понятно демонстрирует важный момент — когда вы назначаете значению цвета цветовой профиль, оно становится абсолютным и более полезным. Такое значение предоставляет всю необходимую информацию устройству, отображающему картинку, чтобы воспроизвести цвет максимально точно.
sRGB как стандарт
Я написал, что у значений, указанных выше, нет единиц измерения или цветового пространства. Это не совсем верно. Во многих случаях есть цветовое пространство по умолчанию, которое предполагается, если изначально данных о цветовом пространстве нет.
На iOS и Android также по умолчанию используется sRGB, но обе ОС поддерживают более широкий цветовой охват.
Изображения и видео
Тот же концепт работает для изображений и видео.
Во многих ситуациях изображения и видео должны иметь встроенные цветовые профили. Если их нет, программа считает, что цветовое пространство — sRGB. По этой причине изображения в пользовательском интерфейсе часто идут без встроенных цветовых профилей: это экономит место на диске, а цвета всё равно будут восприняты как существующие в sRGB.
Будущее широкого цветового охвата
Раньше дизайнеры и разработчики могли хорошо работать, не имея знаний об управлении цветом, но скоро без них будет не обойтись.
Распространение дисплеев с широким цветовым охватом означает, что ошибок, связанных с управлением цветом, станет больше и они будут серьёзнее. Хороший пример — на экране новых MacBook Pro и iMac в некоторых приложениях цвета выглядят перенасыщенными.
Если вы работаете с интернет-страницами и приложениями для iOS и Android, важно понимать цветовое пространство, в котором находится проект, и настроить дизайн и среду разработки в соответствии с ним. Скорее всего, вы работаете в sRGB, но важно, чтобы это был осознанный выбор. Важно, чтобы вы знали, при каких условиях происходит преобразование цветов.
Если цвета выбраны в одном цветовом пространстве, а затем не преобразованы, а назначены из другого пространства, они будут выглядеть неправильно. Так часто бывает, когда программа не настроена на широкий цветовой охват и на протяжении всего проекта цвета несут значения для sRGB. Они будут выглядеть ярко в инструменте дизайна и тускло в работающем приложении.
Разница между цветовыми пространствами
Вместо того чтобы сравнивать цветовые пространства с единицами измерения, давайте представим их как линейку.
Цветовой охват
Цветовой охват — это диапазон цветов, которые могут быть представлены цветовым пространством. Он определяет границы того, насколько насыщенными и чистыми могут быть цвета.
В нашей аналогии охват похож на длину линейки. Предположим, у нас есть две линейки, которые представляют два разных цветовых пространства — одна длиной 1 фут (английская система мер), другая длиной 1 метр (метрическая система мер).
Линейки имеют разную длину. У них одинаковое количество делений от 0 до 1, но физическое расстояние между делениями отличается. Значения 1 у метрической и английской линейки находятся совсем в разных точках пространства.
Широкий цветовой охват — это метрическая линейка.
Их относительные масштабы не верны, но условно можно считать, что футовая линейка — это sRGB (цветовое пространство со стандартным цветовым охватом), а метровая линейка — Display P3 (цветовое пространство с широким цветовым охватом).
Фут составляет лишь часть метра. То же самое можно сказать о цветах: #ff0000 в sRGB — это только #ea3323 в Display P3. Наиболее насыщенный красный в sRGB будет лишь одним из цветов линейки «ярко-красного» в Display P3.
При одинаковом количестве делений более длинная линейка имеет меньшую физическую точность. Это верно и для цветовых пространств — пространства с более широким цветовым охватом растягивают значения цвета по большему пространству, поэтому они более склонны к вещам вроде градиентных полосок. Избежать этого поможет увеличение глубины цвета.
Глубина цвета
Когда значение цвета сохраняется компьютером, у него есть определённая глубина, которая зависит от метода хранения информации.
В нашей аналогии с линейкой глубину можно представить в виде делений, тогда каждое значение цвета будет стоять на своём делении. Чем больше делений, тем больше возможная глубина.
Если вы знакомы с HEX-цветами в CSS, то знаете, что #ff0000 — самый яркий чистый красный цвет, а #fe0000 — второй самый яркий чистый красный. Между #ff0000 и #fe0000 нет ничего.
Красный компонент HEX-цвета в CSS изменяется в пределах от 00 до ff в шестнадцатеричном формате или от 0 до 255 в десятичном. Есть только 256 вариантов. Если вам нужно значение 254,5, вам не повезло — оно должно быть 254 или 255. Значение должно быть округлено в большую или меньшую сторону.
Может показаться, что 256 оттенков — это много, но, когда дело доходит до рисования плавных градиентов, преобразования цветового пространства и другой обработки, легко допустить ошибки в округлении, которые можно будет заметить невооруженным глазом. Когда есть несколько этапов обработки, это ведёт к накоплению ошибок и разнице гораздо большей, чем в пол оттенка.
Ошибки округления обычно заканчиваются полосами, постеризацией или выраженным шумом. Дисплеи с широким цветовым охватом обостряют необходимость в большей глубине цвета — если линейка становится длиннее, количество делений, необходимых для создания плавных градиентов, увеличивается.
Вероятно, в будущем мы не будем использовать для цветов значения HEX как основные — они изначально имеют малую глубину, допуская только 8 бит на канал (256 оттенков для каждого цветового канала).
Лучше использовать более «глубокие» значения с плавающей точкой. Числа с плавающей точкой могут выходить за пределы охвата цветового пространства. Самый яркий красный цвет в sRGB можно записать как «1.0 0 0», а красный цвет за пределами охвата sRGB — как «1.2 0 0», если цветовое пространство это позволяет.
Глубина цвета — не часть цветового пространства. Это деталь реализации, оставленная на усмотрение движка рендеринга или инструмента дизайна. Разные инструменты требуют разного подхода, и вероятность возникновения проблем зависит от того, чем и как вы пользуетесь.
Гамма
Гамму цветового пространства можно рассматривать как расстояние между делениями вдоль линейки. Равномерно расположенные деления называются линейной гаммой.
В отличие от обычных линеек, деления на линейке гаммы чаще всего расположены неравномерно. sRGB использует нелинейную гамма-кривую, как на рисунке ниже. Другие популярные цветовые пространства также используют нелинейные гамма-кривые. Гамма-кривая Display P3 идентична гамма-кривой sRGB.
Сверху линейная гамма-кривая, снизу нелинейная
Обратите внимание, на левой стороне линейки больше делений. Это увеличивает глубину в более тёмных цветах, где человеческое восприятие более чувствительно.
Гамму обычно описывают как экспоненциальную кривую, где значение 1,0 является линейным (равномерно расположенные деления), а цифры выше 1 означают, что для более тёмных цветов точность цвета больше, а для более светлых — меньше.
Гамма-кривая sRGB немного сложнее: на ней есть короткая линейная секция, а затем идёт экспоненциальная кривая. Про sRGB обычно говорят, что его гамма равна 2,2, но экспоненциальный участок фактически равен 2,4 (2,2 — это значение средней гаммы).
Вам не нужно много знать про гамма-кривую sRGB, чтобы понимать сферу управления цветом. Это просто интересная вещь, которую стоит рассмотреть, если вы будете копаться в цветовых профилях с помощью Apple ColorSync Utility. Важно помнить, что гамма — это расстояние между делениями на линейке, и что расстояние обычно является нелинейным.
Преобразование цветов
Мы рассмотрели достаточно основ, чтобы перейти к преобразованию цветового пространства, используя нашу аналогию с линейкой.
Если у нас есть исходные цвет и цветовое пространство и конечное цветовое пространство, каким должно быть конечное значение цвета? Иными словами, если положить рядом две линейки и выбрать значение на одной из них, как узнать, чему оно соответствует на другой?
Значение с исходной линейки переносится на ближайшее деление на конечной, как показано выше.
Если значение на исходной линейке находится за пределами значений конечной, его просто «отсечёт», как на рисунке ниже.
Упрощённая аналогия с линейками отлично иллюстрирует, как работает преобразование цветового пространства.
Преобразование цветов с помощью инструментов дизайна
Платформы, для которых вы разрабатываете, и ресурсы, скорее всего, сами диктуют подход к управлению цветом и цветовое пространство.
Когда вы разрабатываете веб-сайт, CSS и SVG работают в sRGB, поэтому ваши документы должны быть настроены под sRGB. CSS level 4, скорее всего, будет поддерживать больше цветовых пространств, SVG тоже наверняка будет улучшен в будущем. Но сейчас, если вы создаете приложение, использующее веб-технологии, пока оставайтесь верны sRGB.
Если вы разрабатываете приложение для iOS, Android или Mac, вам тоже лучше работать в sRGB. Есть ситуации, когда вы можете или должны использовать цветовой профиль с более широким охватом вроде Display P3, но это бывает довольно редко.
Display P3 и другие цветовые пространства становятся всё более распространёнными, но есть простое правило: если вы не уверены, работайте в sRGB. Проблемы управления цветом могут быть невероятно трудными для отладки, поэтому важно принять решение на ранней стадии и убедиться, что все члены команды используют одинаковые настройки для своих инструментов и документов.
Назначить или преобразовать?
При изменении цветового профиля документа можно использовать два подхода: назначить профиль или преобразовать в него. Какой выбрать, зависит от ситуации.
Назначение профиля документу сохраняет исходные значения цвета прежними (#ff0000 останется #ff0000), но внешний вид изменится. Назначение просто даёт документу тег с новым цветовым профилем. Это всё равно что сказать «этот документ в sRGB», не меняя содержимое самого документа.
Преобразование в профиль делает противоположное — исходные значения цвета будут изменены, но внешний вид останется прежним, если это возможно. Может произойти округление и отсечение некоторых значений, это зависит от исходного и конечного профилей.
Преобразование считывает старое значение, преобразует его и записывает новое для каждого цвета в документе. Прежде чем начать его, лучше сохранить резервную копию документа, потому что это необратимо.
Настройки системы
На Mac в панели «Display preference» в «System Preferences» можно изменить цветовой профиль в зависимости от вашего дисплея.
Настройка не может изменить ваш дисплей, она меняет то, каким система будет считать ваш дисплей. Лучше оставить значение по умолчанию («Color LCD» или «iMac», либо аналогичное, вверху списка) или использовать калибровочное устройство. Возиться с этими настройками не рекомендуется.
Я рекомендую отключить «Automatically Adjust Brightness», «Night Shift» и « f.lux », поскольку все они могут повлиять на точность отображения цветов во время вашей работы. Обязательно отключите «True Tone».
Sketch
До сорок восьмой версии в Sketch не было функции управления цветом. Если вы используете старую версию, пожалуйста, обновитесь.
Текущую версию Sketch можно настроить для работы в sRGB или Display P3. По умолчанию в настройках Sketch новые документы создаются как «Unmanaged». Установите значение на sRGB или Display P3 в зависимости от того, какое из пространств вам подходит.
Я порекомендовал бы использовать sRGB по умолчанию, даже если вы планируете с некоторыми документами работать в Display P3.
Чтобы назначить цветовой профиль существующему документу, выберите «Change Color Profile» в меню «File».
Если документ уже настроен на sRGB или Display P3, программа спросит вас, хотите вы назначить или преобразовать цвета в документе.
Важно понимать, что делает опция «Save For Web», её описание в Sketch немного неточно. EXIF данные никогда сохраняются, даже если «Save For Web» отключена, в экспортируемое изображение может быть включён только профиль ICC.
Описание опции «Save For Web» в Sketch: «Для уменьшения размера файла цветовой профиль и EXIF метаданные будут удалены».
При экспорте PNG из документа в пространстве sRGB, если включена функция «Save For Web», то результат будет содержать фрагмент гаммы. Если функция «Save For Web» отключена, он будет содержать блок sRGB.
Я бы порекомендовал отключить функцию «Save For Web» при экспорте PNG-файлов в sRGB из Sketch, поскольку фрагмент sRGB является лучшим описанием содержимого файла. Фрагмент sRGB на 3 байта меньше фрагмента гаммы, поэтому отключение функции «Save For Web» поможет уменьшить размер итогового файла.
Если при экспорте PNG из документа в Display P3 включен параметр «Save For Web», результат будет содержать фрагмент гаммы. Если параметр «Save For Web» отключён, он будет содержать фрагмент профиля ICC.
Я бы порекомендовал отключить функцию «Save For Web» при экспорте PNG-файлов в Display P3 из Sketch, поскольку для файлов в Display P3 очень важен профиль ICC (большинство браузеров и платформ считают, что изображение существует в sRGB, если нет профиля ICC).
Photoshop
В Photoshop есть функция управления цветом, и его можно настроить для работы в sRGB или Display P3. Даже если вы хотите создавать документы в Display P3, разумно по-прежнему устанавливать sRGB по умолчанию. Для этого выберите «Color Settings» в меню «Edit» и убедитесь, что для рабочего пространства установлено значение sRGB, а для документов RGB выбран параметр «Preserve Embedded Profiles». Также неплохо бы отключить параметр «Blend Text Colors Using Gamma».
Чтобы назначить цветовой профиль существующему документу, выберите «Assign Profile» в меню «Edit». Чтобы преобразовать в цветовой профиль, выберите «Convert to Profile» в меню «Edit».
При экспорте PNG-файлов в Display P3 с помощью Photoshop через «Save For Web» или «Export As» убедитесь, что параметр «Embed ICC profile» включен, а «Convert to sRGB» отключен.
Я также попробовал экспорт через «Generator», и не думаю, что он сохраняет изображения с профилями ICC, независимо от того, какие настройки используются. Так что« Generator» нельзя использовать для ресурсов Display P3.
Настройки для «Save For Web» и «Export As» показаны ниже.
Illustrator
В Illustrator есть функция управления цветом, и его можно настроить для работы в sRGB или Display P3. Даже вы хотите создавать документы в Display P3, разумно установить пространство sRGB по умолчанию. Для этого выберите «Color Settings» в меню «Edit» и убедитесь, что для рабочего пространства установлено значение sRGB, а для документов RGB выбран параметр «Preserve Embedded Profiles».
Чтобы назначить цветовой профиль существующему документу, выберите «Assign Profile» в меню «Edit». Чтобы преобразовать в цветовой профиль, выберите «Convert to Profile» в меню «Edit».
Я не думаю, что можно сохранить PNG-файл из Illustrator с профилями ICC, поэтому эта программа не подходит для экспорта ресурсов Display P3. В «Export For Screens» нет настроек, связанных с управлением цветом, поэтому здесь нечего менять, если вы сохраняете PNG в sRGB. В «Save For Web» есть опция «Convert to sRGB», но это не возымеет эффекта, если ваш документ уже в sRGB.
В Adobe XD нет функции управления цветом и нет никаких подходящих для этого настроек.
Adobe написали больше приложений для управления цветом и имеют больше опыта в этом, чем любая другая компания. К сожалению, в главном инструменте Adobe для дизайна интерфейса отсутствует эта функция. Надеюсь, что скоро она появится.
Affinity Designer
В Affinity Designer есть функция управления цветом и можно задать настройки для работы в sRGB или Display P3. Можно по умолчанию установить цветовой профиль RGB в «Preferences» в разделе цветов.
Чтобы назначить документу цветовой профиль или преобразовать существующий, выберите «Document Setup» в меню «File». Цветовой профиль документа можно найти во вкладке «Color».
В Affinity Designer исключительные параметры экспорта, они дают полный контроль над тем, что сохраняется. Для PNG в sRGB я бы рекомендовал 8 бит на канал, без метаданных и без профиля ICC. Для PNG в Display P3 я бы рекомендовал 16 бит на канал, без метаданных и включить в файл профиль ICC.
Affinity Designer делает именно то, что указано в настройках экспорта. Было бы неплохо иметь возможность включать в файл фрагмент sRGB для изображений в sRGB, но это не обязательно.
Figma
В Figma нет функции управления цветом и нет никаких настроек для этого.
Приложение Figma для рабочего стола отображает цвета в профиле дисплея — если вы ориентируетесь на sRGB, документы будут выглядеть слишком яркими на экране Display P3 (протестировано с помощью Figma Desktop 3.5.3). При использовании Figma через Chrome (протестировано с использованием версии 64.0.3282.186) или через Safari (протестировано с 11.0.3) все цвета отображаются правильно, но только если вы ориентируетесь на sRGB.
Если вы ориентируетесь на Display P3, не думаю, что получится правильно отобразить цвета. При запуске Figma через Firefox нет управления цветом. Возможно, какие-то настройки самого браузера способны исправить ситуацию.
Обновление от февраля 2019 года : в Electron 2.0.6 добавили флаг «ColorCorrectRendering», который означает, что все цвета будут обрабатываться как sRGB и корректно преобразовываться в цветовое пространство дисплея. Чтобы включить эту функцию в Figma, выполните команду:
Следует отметить, что это только частичное решение, а не полное управление цветом.
InVision Studio
В InVision Studio нет функции управления цветом, и нет никаких настроек для этого.
Обновление от февраля 2019 : InVision Studio теперь поставляется с выставленным флагом Electron «ColorCorrectRendering». Это ставит его в один ряд с Figma с точки зрения управления цветом.
Сравнение
В настоящее время только три из протестированных инструментов дизайна могут полно работать с sRGB и Display P3.
В таблице ниже «sRGB canvas» (холст sRGB) означает, что приложение может правильно отображать цвета sRGB на холсте. «Display P3 canvas» (холст Display P3) означает то же самое, но в отношении Display P3.
«sRGB PNGs» (PNG в sRGB) означает, что приложение может экспортировать изображения PNG с правильными цветами и фрагментом sRGB или вообще без включенного профиля ICC, поскольку обычно предполагается, что PNG без данных цветового профиля — это изображение в sRGB.
«Display P3 PNGs» (PNG в Display P3) означает, что приложение может экспортировать изображения PNG с правильными цветами и встроенным ICC профилем Display P3.
Столбцы слева направо: холст sRGB, холст Display P3, PNG в sRGB, PNG в Display P3
Сравнение получилось довольно поверхностным — экспорт WebP, импорт изображений, битовая глубина и многие другие факторы также стоило бы протестировать и включить в таблицу.
Стоит отметить, что управление цветом идёт по принципу «всё или ничего» и решение частных моментов не помогает. Нужен отлаженный процесс от начала и до конца. В целом индустрия довольно плохо справляется с предоставлением функции управления цветом для наших инструментов.