The color-gamut
CSS media feature can be used to test 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.
Examples
HTML
<p>This is a test.</p>
CSS
@media (color-gamut: srgb) {
p {
background: #f4ae8a;
}
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4The definition of 'color-gamut' in that specification. | Candidate Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
color-gamut media feature
|
Chrome
Full support 58 |
Edge
Full support 79 |
Firefox
No support No |
IE
No support No |
Opera
Full support 45 |
Safari
Full support 10 |
WebView Android
Full support 58 |
Chrome Android
Full support 58 |
Firefox Android
No support No |
Opera Android
Full support 43 |
Safari iOS
Full support 10 |
Samsung Internet Android
Full support 7.0 |
Legend
- Full support
- Full support
- No support
- No support
color-gamut by Mozilla Contributors is licensed under CC-BY-SA 2.5.