The color-gamut
CSS @media
media feature can be used to apply styles based on the approximate range of colors that are supported by the user agent and the output device.
Syntax
The color-gamut
feature is specified as a keyword value chosen from the list below.
srgb
- The output device can support approximately the sRGB gamut or more. This includes the vast majority of color displays.
p3
- The output device can support approximately the gamut specified by the DCI P3 Color Space or more. The p3 gamut is larger than and includes the srgb gamut.
rec2020
- The output device can support approximately the gamut specified by the ITU-R Recommendation BT.2020 Color Space or more. The rec2020 gamut is larger than and includes the p3 gamut.
Example
HTML
<p>This is a test.</p>
CSS
@media (color-gamut: srgb) { p { background: #f4ae8a; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 The definition of 'color-gamut' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 58 | No support | No support | 45 | (Yes) |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | 58 | No support | No support | 45 | ? |