CSS Color Manager: hex # разметка color-gamut в стандартах p3 и rec2020

теоретические и практические аспекты колориметрии, системы управления цветом
Ответить
Аватара пользователя
mihas
Администратор
Сообщения: 1431
Зарегистрирован: 18 авг 2004, 16:58
Откуда: Москва
Контактная информация:

CSS Color Manager: hex # разметка color-gamut в стандартах p3 и rec2020

Сообщение mihas »

Изображение
Сравнение результата калибровки нового iMac со стандартом Display P3 - практически точное совпадение колорантов на 98.9%

Изображение
Тело - охват sRGB, сетка - охват Display P3

Изображение
Проекция ab охватов P3 (белая сетка) и Adobe RGB (мелкая сетка)
Охват Rec. 2020 в локусе CIE xy (1931)
Охват Rec. 2020 в локусе CIE xy (1931)
• 527.3 КБ • 7433 просмотра
Несложная утилита с графическим интерфейсом CSS Color Manager позволяет добавить к имеющейся цветовой разметке hex (формат цвета для WEB по типу #0F0 или #00FF00) в стандарте sRGB также и дополнительную разметку для мониторов большого цветового охвата Display P3 и Rec. 2020. Факультативно Adobe RGB (1998), в теге @media color-gamut охват a98-rgb не поддерживается, хотя поддерживается в иных вариантах разметки; пусть для них будет пересчет на всякий.

Если вы хотите, чтобы ваш цвет одинаково отображался на мониторах как с маленьким цветовым охватом sRGB, так и с бОльшими - просто добавьте @media color-gamut tag в качестве дополнительной разметки к уже имеющейся. А утилита CSS Color Manager верно пересчитает весь имеющийся цвет sRGB в разметке hex в три дополнительных популярных стандарта - Display P3, Rec. 2020 и Adobe RGB.

Вот что любопытно: CSS пока определил всего лишь три возможных значения для @media тега color-gamut: srgb, p3, rec2020.

Уже охват типа Adobe RGB или a98-rgb так просто пока не пропишешь в отдельный @media, браузеры пока проигнорируют.

Пример работы CSS Color Manager, три нижних поля посчитаны как дополнение к имеющемуся первому sRGB:
A:link { color: #006000; text-decoration: none }
A:visited { color: #007000; text-decoration: none }
A:active { color: #008500; text-decoration: none }
A:hover { color: #090; text-decoration: underline; font-style: italic }
A IMG { border: 0px }
A:hover IMG { filter: none; border: 0px }
@media (color-gamut: p3) {
A:link { color: #275E16; text-decoration: none }
A:visited { color: #2F6E1C; text-decoration: none }
A:active { color: #398223; text-decoration: none }
A:hover { color: #439629; text-decoration: underline; font-style: italic }
A IMG { border: 0px }
A:hover IMG { filter: none; border: 0px }
}
@media (color-gamut: rec2020) {
A:link { color: #21440B; text-decoration: none }
A:visited { color: #2A5210; text-decoration: none }
A:active { color: #376613; text-decoration: none }
A:hover { color: #437919; text-decoration: underline; font-style: italic }
A IMG { border: 0px }
A:hover IMG { filter: none; border: 0px }
}
/* In Future */
@media (color-gamut: a98-rgb) {
A:link { color: #366016; text-decoration: none }
A:visited { color: #3F6F1A; text-decoration: none }
A:active { color: #4A831E; text-decoration: none }
A:hover { color: #559723; text-decoration: underline; font-style: italic }
A IMG { border: 0px }
A:hover IMG { filter: none; border: 0px }
}
Вообще тег @media пришелся ко двору не сразу. Поначалу дизайнеры создавали отдельные страницы для мобильных устройств, и только потом пришла "резиновая" верстка, когда в тегах @media стали оговаривать разные условия просмотра, при разных разрешениях и ширине экрана, адаптировать через @media одну и ту же страницу для всех возможных условий просмотра. Ну типа "@media (max-width: 768px) {/*ipad*/" и так далее для экрана конкретного устройства Айпада.

Поэтому включение в CSS 4 версии трех стандартных и актуальных способа цветопередачи в @media - в принципе хорошая идея. CSS предусмотрел и другие варианты цветоуказания, в том числе даже CIE Lab и CIE LCh, которые пока не поддерживаются большинством браузеров. Но мне показалось, что отдельное прописывание в @media привычных hex # цветоуказаний для мейнстримных на сегодня и в близком будущем цветовых охватов устройств - решение правильное. Ведь hex хорош своей однозначностью, в нем не может быть отрицательных значений или значений с перебором, не нужно быть колористом, чтобы правильно интерпретировать тот или иной hex в браузере при его проектировании. Тогда как для цветоуказания в LCh потребуется и написание матричной хроматической адаптации, и написание гамут-маппинга, и однозначности представления цвета в таком случае просто не будет, потому что гамут-маппингов много, и никогда несколько колористов не сойдутся в единой оценке - а кто сжал "правильнее". А никто, все хорошо, каждый по-своему, на любой вкус. То есть LCh в CSS ведет к энтропии цвета, к неоднозначности его интерпретации за рамками охвата устройства отображения, а в старой доброй RGB разметке hex никакой энтропии, все однозначно, ничего заохватного. Если даже ведущий продавец спотовых красок Pantone вообще не умеет просчитывать гамут-маппинг для представления Lab цвета красок в модели sRGB в своем небесплатном сервисе Pantone Connect - то что ждать от бесплатных браузеров?

У меня на заглавной странице сайта есть красный цвет в оформлении некоторых слов, которые не должны быть чересчур красными, красный не должен резать глаза чрезмерной насыщенностью и яркостью. Этот красный цвет я задавал когда-то не слишком насыщенным и ярким в модели sRGB, дефолтной для веб, но для бОльших охватов p3 и rec2020 тот же hex слишком насыщенный на мой вкус. Я хочу красный, но не хочу, чтобы пользователей крутых профессиональных устройств отображения такой мой красный ослеплял или раздражал избыточностью светлоты с насыщенностью. Я попробовал приделать к основному стилю CSS сайта пару посчитанных в обсуждаемой утилите @media и получил на своем стандартном P3 экране большого охвата ровно то что хотел - такой же не слишком режущий по глазам красный, как и на мониторах небольшого охвата sRGB.

Как-то так выглядит сейчас мой css в самом низу дополнительной разметки:

@media (color-gamut: p3) {
.red {color: #CC2F20;}
.novinka {color: #CC2F20;}
}

@media (color-gamut: rec2020) {
.red {color: #9B2B10;}
.novinka {color: #9B2B10;}
}


при том, что в основном теле мейнстримной разметки для традиционного sRGB этот красный цвет представлен в hex как #df0e07.

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

Если вам покажется, что моей утилите категорически недостает пересчета rgba разметки цвета - напишите, я подумаю, можно ли и ее вписать сюда же в эту утилиту. Все зависит от того, нужно ли написанное людям, полезно ли, или всем цветовая разметка сайта под разные мейнстримные стандартные условия просмотра пофиг, и можно даже не стараться что-то программировать, если это никому не нужно. Цветофобия, игнорирование непростых вопросов, связанных с такой многогранной штукой, как цвет - присуще бывает и полиграфистам, и веб-дизайнерам, и людям, далеким от этих профессий. Не разобравшись в вопросе, мне уже успели попенять, что hex представление цвета сайта - это вообще полная ерунда, и ни в чем, кроме как в LCh мы не приемлем цветовую разметку для веб. Я очень удивился, потому что LCh попал в CSS версии 4 совсем недавно, и практически никакие браузеры на сегодня разметки LCh не поддерживают. А поддержка LCh в будущем внесет скорее неоднозначность и вариативность представления, нежели однозначность и предсказуемость. Я не против уже несколько лет как давно анонсированному LCh в CSS - но каждому сверчку свой шесток, без уверенного владения непростой колориметрией, и программисты браузеров, и веб-дизайнеры, еще нам наворотят проблем в LCh, предполагаю. С матричной хромадаптацией PCS D50 к белой точке монитора справятся, конечно, а вот с гамут-маппингом точно будет кавардак. Простая и непростая арифметика показывает, что в том же Фотошопе доступно координат CIE Lab на 6 502 500 ΔE³ (100×255×255), тогда как весь объем HVS видимых цветов CIE Lab = 2 482 961 ΔE³. Как программисты барузеров будут утилизировать цветовые координаты несуществующих цветов за границами HVS - под большим вопросом. Тут хотя бы слайдерами нельзя задать несуществующего цвета, но веб-дизайнеры обязательно создадут несуществующие цвета LCh и Lab в том же Фотошопе и иже с ним.

Что важно отрефлексировать каждому, связанному с веб-дизайном. CSS версии 4 впервые в истории явно указал, что любые просто rgba и hex значения в разметке относятся к стандарту sRGB, а не к чему взбредет в голову разработчику браузера, многие из них ранее относили разметку к неопределенному клиентскому монитору, за что и были биты колористами многократно и нещадно. В 4 версии нет больше никакого "RGB просто", а есть стандарт sRGB. Это очень важно. Так исторически сложилось в лучших браузерах и было узаконено в спецификации CSS не так давно.

Но чтобы не ограничивать себя только маленьким охватом sRGB 1996 года разработки - в CSS версии 4 внесли разные варианты определения цвета в других популярных стандартах RGB с бОльшим цветовым охватом, и прямое цветоуказание в CIE Lab и CIE LCh, не привязанных к устройству отображения.

В теге @media (color-gamut:) три варианта RGB-стандартов: srgb, p3, rec2020. Причем прописывать первый srgb отдельно в принципе не обязательно, любая разметка rgba и hex теперь считается именно стандартом sRGB, если специальным @media не оговорено иное. Разве что программисты отсталых браузеров не сразу сообразят досконально переписать колориметрию взаимоотношений браузера с монитором в операционной системе, и некоторое время будут упорствовать в неопределенности rgba и hex разметки, как не относящейся ни к какой конкретно модели RGB. Может быть для таких упертых и упоротых проектировщиков браузеров и присутствует отдельное указание - @media (color-gamut: srgb). Для нормальных разработчиков оно давно излишне. А в CSS Level 4 - теперь узаконено-излишне. Но дополнительное принуждение к законности отстающих как бы присутствует во вроде бы излишнем для профи @media (color-gamut: srgb).

Правильная колориметрическая утилизация излишков охвата P3 и REC. 2020 на стороне разработчиков приложений и контента - важная достаточно штука. Когда пользователь видит, что разработчики о нем не заботятся - он начинает совершать глупости, например аппаратно или программно на уровне системы переводить монитор с большим охватом в режим урезанного охвата sRGB, загрязнением чистых каналов примесями двух других. Очевидно, он совсем не этого хотел, когда переплачивал за профессиональный монитор расширенного цветового охвата. А разработчики контента не успели позаботиться о том, чтобы не только на офисном sRGB старье все выглядело нормально, но и в современных стандартах расширенных цветовых охватов. Представленная утилита именно что позволяет просто и без затей проявить заботу о современном владельце хорошего монитора. Чтобы ему было на сайте также комфортно, как и исторически сложившемуся владельцу монитора с крохотным охватом 1996 года. Чтобы все видели авторскую задумку создателя сайта одинаково - и на дешевых устаревших мониторах, и на современных и продвинутых, чтобы не было дискомфорта ни у тех ни у тех. Утилизировать охват конкретных оттенков надо, утилизировать охват целиком хорошего монитора - дурная затея на мой взгляд. Есть куча sRGB оттенков на краю охвата, которые смотрятся тухло и по современным меркам просто неприлично ненасыщенно: таковы в стандарте sRGB и голубой цвет, и желтый, совершенно грязные по современным меркам. И если владельцы новых устройств с большим охватом увидят эти оттенки нормально - так и прекрасно, именно для этого расширяют охваты, чтобы та же фотография и тот же кинофильм по совокупности оттенков выглядели лучше. Но и опасность таят большие охваты для разработчика также немалую: физически ослеплять пользователя какими-нибудь "забубенными" красными в Rec. 2020 - просто неприлично на мой взгляд. Но уж такова модель RGB - три праймерис "забубенные" по насыщенности, а между ними все так потухлее. И наша задача как разработчиков утилизировать охват там, где его на новых устройствах может быть слишком много, и наоборот вовсю использовать возможности новой техники P3 и Rec. 2020 для достижения лучших результатов там, где старая техника просто не тянет необходимую по задумке насыщенность. А с такими цветами, чью насыщенность мы хотим передавать в максимальном охвате каждого устройства, все просто: впишите для них одинаковые хексы во все @media.

С фотографической картинкой на странице понятно: внедряем в картинку цветовой icc профиль того или иного стандарта, и практически любой браузер обрабатывает цвет по профилю правильно. Но применение icc профилей просто к разметке сайта, текстов, блоков, элементов и мне и разработчикам CSS кажется избыточно, можно проще через @media эту доп-разметку сделать. Хотя новый CSS позволяет и включать в стили те или иные профили (или скорее их интерпретацию разработчиком браузера), и их список шире, чем в теге @media (color-gamut:).

Мой сайт как бы часто служит источником информации для разработчиков, вот еще пара ссылок на тему:
Матрицы перехода RGB2XYZ и XYZ2RGB для обсуждаемых стандартов
Утилита для калькуляции любых RGB <-> XYZ матриц по CIE xy 1931 координатам колорантов
Ответить

Вернуться в «Колориметрия - наука о цвете: теория и практика»