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

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

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

@media (color-gamut: p3) {
  /* стили, в которых фигурируют цвета */
}

Значениями свойства color-gamut могут быть:

  • srgb - браузер и устройство вывода поддерживают цветовой диапазон sRGB или больше (большинство цветных дисплеев поддерживают этого тип)
  • p3 - браузер и устройство вывода поддерживают гамму, заданную цветовым пространством Display P3 или больше (цветовой охват p3 больше, чем цветовой охват sRGB, и включает его)
  • rec2020 - браузер и устройство вывода могут поддерживают гамму, указанную в Рекомендации ITU-R BT.2020 Color Space (цветовой охват rec2020 больше, чем цветовой охват p3, и включает его)

Устройство вывода может вернуть true для нескольких значений этого свойства, если его цветовая гамма достаточно велика. Поэтому свойство color-gamut лучше всего использовать «по возрастанию» - установите базовое значение (для цветовой гаммы sRGB), затем переопределите его (для цветовой гаммы p3) и т. д.

Стоит также отметить, что некоторые устройства вывода, например монохромные дисплеи, не поддерживают даже гамму sRGB. В этом случае вы можете использовать это свойство в режиме инвертированного логического контекста: not (color-gamut).

Поддержка браузерами
chrome
Chrome
58
firefox
Firefox
110
internet explorer
IE
 
edge
Edge
79
safari
Safari
10
opera
Opera
45