Какие браузеры поддерживают управление цветом?

[mihas]

Тело - охват sRGB, сетка - охват Display P3

• 1.83 МБ • 4664 просмотра

Мне кажется не все колористы пока осознали важность последних изменений в спецификации цветовой разметки для web в декабрьской спецификации CSS https://www.w3.org/TR/css-color-4/ поэтому проговорю самое важное еще раз.

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

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

Мы можем недолюбливать сегодня sRGB за не слишком большой цветовой охват. Да, популярнейший благодаря Эппл и благодаря многим топовым смартфонам стандарт Display P3 поинтереснее. Да я свои архивы превьюх картинок со внедренным профилем уже держу не в маленьком sRGB, а в большом Display P3. И монитор в ноябре выбрал и купил из самых популярных на сегодня, в сегменте с самым высоким предложением и спросом - монитор строго в стандарте Display P3. Он по факту проверки спектрофотометром на столько идеально сидит в стандарте цвета Display P3, что не ровен час - скоро и услуг калибровщиков мониторов может не понадобиться: а зачем калибровать то, что уже показывает стандарт, и цветовой профиль, как результат калибровки дорогим спектрофотометром, практически не отличается от цветового профиля, что просто построит без приборов молча в фоновом режиме сама MAC OS при первом подключении монитора к компьютеру. А под WINDOWS - назначаем стандартный Display P3, который содержится в любой фотке современного айфона, цветом экрана системе, и собственно все. Если у модели монитора все в порядке с тонопередающими кривыми и все в порядке с колорантами - профиль монитора практически равен стандартному профилю Display P3. Очень удобно.

А то что Display P3 благоразумно унаследовал старинную тонопередающую функцию гаммы sRGB позволит ему в недалеком будущем, в течении ближайших 10-20 лет вообще незаметно заменить собой дефолтное и узаконенное сейчас старое маленькое по охвату пространство sRGB.

Но вернемся к самому важному: светлое будущее в колориметрии для браузеров наконец наступило. То о чем вопили колористы много лет, что не существует цвета просто RGB, что для описания цвета каналов RGB требуется тот или иной стандарт - наконец услышано. Теперь таким дефолтным цветом официально по спецификации объявлен стандарт sRGB, и это снимает сразу уйму вопросов у тех, кто хочет отображать свой цвет в сети интернет правильно. Спецификация узаконила сложившуюся за много лет традицию, узаконила мейнстрим, узаконила то, что делали лучшие браузеры с цветом и до спецификации. Все, у чего нет цветового описания в разметке - считается описанным стандартом sRGB. Это важно! И это круто!

Тут продолжение темы применительно к пантонам и традиционному отсутствию цвета красок у них на сайте: как теперь будут выкручиваться?

[mihas]

Селектор force-color-profile в браузере Chrome

• 87.93 КБ • 4593 просмотра

Достаточно давно Хром предлагает выбрать в настройках управления цветом - chrome://flags/#force-color-profile для элементов дизайна, не снабженных icc-профилем, предпочтительный цветовой охват или Gamut по дефолту.

Попробую посидеть с монитором P3 на дефолтном эппловом охвате P3, так словно я всегда только на маке (на практике я чередую мак и винду). Посмотрю на дизайн сайтов с такого ракурса. У меня есть предположение скромное, что не смотря на демарши производителей испорченных IPS-матриц дешевых ноутбуков - интернет будет постепенно дрейфовать к тому, чтобы свалить с маленького охвата 96 года sRGB и перейти массово на больший охват Эпплов Display P3 с той же тонопередающей функцией, но с более насыщенными колорантами.

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

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

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

Offtop: недавно выбирал ноут дочке, сосредоточился на поиске матрицы в cтандартном охвате P3. Это увеличивает сразу стоимость ноута не менее чем на десятку, но я точно знал что мне нужно искать, а мой друг помог верифицировать матрицу, как отвечающую заявленным требованиям. На старых общедоступных дочкиных фотках просто без подгонки достаточно близкое совпадение между стандартным экраном 11 айфона и стандартным представлением Display P3 в браузере на базе Хрома и в Фотошопе:

[mihas]

Не могу сказать с какой версии iOS - но браузер Safari на Айфоне недавно стал читать цветовые профиля в картинке и отображать верно, с колорменеджментом, как Фотошоп. Это очень большое событие! Это делает цвет и на Айфонах куда предсказуемее.

[mihas]

С выходом в свет CSS Level 4 эта интересная тема правильного цвета в браузерах продолжена например тут: CSS Color Manager: hex # разметка color-gamut в стандартах p3 и rec2020

А вот тут дается ответ на нетривиальный вопрос: чей цветовой охват больше: Adobe RGB или Display P3.

[mihas]

У Edge, Yandex и Chrome - некое подобие маппинга, лишь слегка различающееся, у Firefox - упрощенный клипинг (отрицательное значение приравнивается к нулю)

• 361.51 КБ • 725 просмотров

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

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

Из крайне любопытного: в отличие от старинной hex # разметки, современная в заданной явно RGB-модели, допускает отрицательные значения в канале, то есть за охватом модели. Ну и я пока смотрю, как работает собственный браузеров гамут-маппинг и какой это вообще маппинг (их много). Словом испытательный стенд есть, можно изучать. Мой двумерный гамут-маппинг отключить, CSSv4 включить - будет ГМ от браузера.

[mihas]

Колористы любят двумерный гамут маппинг, из таких, как представлены на трех картинках. Желтым отмечен тот, что я запрограммировал в конвертере, крайний левый - одномерный, в стиле собственной работы браузеров с развитием CSS:



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

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

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

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

И странное дело, я не решил, как за браузером обработку lch контролировать, и пока не добавил в конвертер разметку на базе lch.

Какие-то такие смутные сомнения, что разметка напрямую в lch цвета веб-страницы ведет к энтропии и бесконтрольности.

Когда я вычисляю те или иные RGB - я хоть знаю, как их проконтролировать по пипетке на мониторе. По RGB я вижу за диапазоном 0-1 что цвет за охватом модели и сразу включаю в голове поиск гамут-маппинга. По lch я просто так не вижу вообще до какого охвата я укладываюсь, и до какого нет, и ни один разработчик не видит, если не пользуется моим конвертером, что именно за цвет он наваял.

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

Я еще подумаю на эту тему, я знаю, что горячие головы после появления css4 вообще отвергают разметку RGB, им теперь только лабы любезны сердцу, но странное дело - я вижу в безразмерном лаб в разметке скорее проблему, чем полезное решение.

Ну указал разработчик хрому 400, или 800, ну браузер как-то это нарисовал, и ключевое слово тут "как-то", потому что браузеры рисуют разное, а разработчик вообще не в курсе, что такого цвета как бы нет.

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

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

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