KandZ – Tuts

We like to help…!

CSS 33 💻 color gamut, color index media features

a - color-gamut media feature
color-gamut allows you to query and apply styles based on the approximate gamut of the display
It is important when dealing with high-fidelity colors
values: srgb → indicates an sRGB color space
p3 →indicates a DCI-P3 or Adobe RGB(1988) color space
rec2020 →indicate a Rec. 2020 color space, most widely used color space
display-p3 → a p3 alias
The example automatically adjusts the background color based on the displays...
...capability to display different color spaces.
b - color-index media feature
color-index queries and applies styles based on the output device's color lookup table
It is useful for optimizing image and video quality
value → integer
You can also use min-color-index and max-color-index
min-color-index is the same as color-index = value
max-color-index is the same as color-index = value
@media (min-color-index: 1) → style for browsers with at least 1 color index
@media (max-color-index: 8) → style for browsers with fewer than 8 of color indices

Leave a Reply