Изменить цветовой профиль страницы в CSS

Я работаю над Macbook Pro конца 2019 года, который поддерживает цветовую гамму P3 (широкий цвет).

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

У большей части целевой аудитории также будут мониторы с поддержкой P3.

Я обнаружил, что мой веб-сайт выглядит великолепно в Firefox - намного лучше, чем в Safari. Оказывается, Firefox не выполняет никакого управления цветом, поэтому применяется полная гамма P3.

Safari преобразует (или сохраняет) мои цвета в пространстве sRGB, что делает их тусклыми. Firefox, не использующий никакого управления цветом, использует полную гамму P3.

Чтобы увидеть пример разницы, запустите фрагмент ниже (работает только в Safari на компьютере с широким цветом):

<html><head><style>
    
#box1 {
    background-color: color(display-p3 0 1 0);
    height:50px;
}
    
#box2 {
    background-color: rgb(0, 255, 0);
    height:50px;
}
    
</style></head><body>
    
<div id="box1">P3 Color</div>
<div id="box2">sRGB Color</div>

Вы увидите, что зеленый цвет намного ярче, когда цвет определен в пространстве P3.

Кроме того, вы можете открыть этот код в Chrome и Firefox. Вы можете легко увидеть, что зеленый цвет в Firefox намного богаче.

Я ищу способ сообщить Safari: не ограничивайте цвета sRGB, используйте полную яркость P3.

Я хотел бы переписать свой css, но сделать это нужно только один раз. Что-то вроде добавления вверху:

@media color-gamut: p3{
  @color-profile{ name: p3; src: url(/files/P3.icc); }
}

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

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

Любое решение приветствуется. Обидно, что у меня есть этот отличный компьютер с потрясающим дисплеем, и он намеренно делает все мои цвета более блеклыми, чем это необходимо.


css safari default-value color-profile color-management
person Andrew Swift    schedule 17.05.2020    source источник
comment
Не знаю, поможет ли это вам, но, по крайней мере, вы можете найти это интересным: lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how   -  person vals    schedule 19.05.2020
comment
Я думаю, что использование некоторых запросов в службу поддержки заставит его работать.   -  person LIL LOFIE    schedule 23.05.2020

Ответы (1)


arrow_upward
7
arrow_downward

Я тестировал это и получил совершенно другой опыт.

Запуск вашего фрагмента в Safari, Chrome, Firefox - слева направо:

введите описание изображения здесь

Вероятно, это не видно на этом снимке экрана (ссылка) из-за понижающей дискретизации imgur, но поле P3 в Safari было намного ярче. Казалось, Chrome вообще не поддерживает P3, в то время как FF, похоже, не поддерживает P3, но отображает sRGB так же ярко, как P3 сафари ... Ура.

@ color-profile был предложен, но удалено, поэтому вы не можете его использовать. Однако вы можете сделать несколько @supports запросов в верхней части CSS:

/* sRGB color. */
:root {
    --bright-green: rgb(0, 255, 0);
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 0 1 0)) {
    :root {
        --bright-green: color(display-p3 0 1 0);
    }
}

#box1 {
    background-color: var(--bright-green);
    height:50px;
}

#box2 {
    background-color: rgb(0, 255, 0);
    height:50px;
}

После откатов и Safari, и FF обрабатываются правильно, но Chrome по-прежнему возвращается к sRGB ...

введите описание изображения здесь

Ссылка на снимок экрана находится здесь.

Подводя итог, вы можете (и должны) указать P3, когда это возможно, но также добавить резервные варианты.

Наконец, я не понимаю, что вы имели в виду под

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

Так мы говорим об изображениях или определяемых (bg) цветах?

person Joe Sorocin    schedule 19.05.2020
comment
Спасибо за Ваш ответ. Я должен был быть более ясным. Мой сайт содержит множество файлов SVG, созданных в Adobe Illustrator. Было бы невероятно обременительно заходить в источник и вручную обновлять каждый цвет, чтобы предоставить альтернативу P3. Я говорю не об изображениях PNG или JPG, а о цветах, указанных в CSS. Итак, я ищу какую-то декларацию, в которой будет сказано: если P3 доступен, используйте его для всего. Я обновлю свой вопрос, чтобы он был более ясным. - person Andrew Swift; 20.05.2020