`color-gamut` CSS media feature
Baseline Widely available
This feature is well established and works across many devices and browser versions. It's been available across browsers since February 2023.
The color-gamut CSS media feature is used to apply CSS styles based on the approximate range of color gamut supported by the user agent and the output device.
Syntax
The color-gamut feature is specified as one of the following color spaces as keyword values:
-
srgb - The user agent and the output device can support approximately the sRGB gamut or more. This includes the vast majority of color displays.
-
p3 - The user agent and the output device can support approximately the gamut specified by the Display P3 color space or more. The P3 gamut is larger than and includes the sRGB gamut.
-
rec2020 - The user agent and the output device can support approximately the gamut specified by the ITU-R Recommendation BT.2020 color space or more. The REC. 2020 gamut is larger than and includes the P3 gamut.
Examples
HTML
<p>This is a test.</p>
CSS
p {
padding: 10px;
border: solid;
}
@media (color-gamut: srgb) {
p {
background: #f4ae8a;
}
}
Result
Specifications
| Specification |
|---|
| Media Queries Level 4 # color-gamut |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | WebView on iOS | |
color-gamut |
58 |
79 |
110 |
45 |
10 |
58 |
110 |
43 |
10 |
7.0 |
58 |
10 |
p3 |
58 |
79 |
110color-gamut: p3 is always false because Firefox does not support wide-gamut color. See bug 1626624. |
45 |
10 |
58 |
110color-gamut: p3 is always false because Firefox for Android does not support wide-gamut color. See bug 1626624. |
43 |
10 |
7.0 |
58 |
10 |
rec2020 |
58 |
79 |
110color-gamut: rec2020 is always false because Firefox does not support wide-gamut color. See bug 1626624. |
45 |
10 |
58 |
110color-gamut: rec2020 is always false because Firefox for Android does not support wide-gamut color. See bug 1626624. |
43 |
10 |
7.0 |
58 |
10 |
srgb |
58 |
79 |
110color-gamut: srgb is always true because Firefox does not support wide-gamut color. See bug 1626624. |
45 |
10 |
58 |
110color-gamut: srgb is always true because Firefox for Android does not support wide-gamut color. See bug 1626624. |
43 |
10 |
7.0 |
58 |
10 |
See also
-
color()function to specify colors in a defined colorspace. - CSS colors module
-
@mediaat-rule that is used to specify the color-gamut expression. - Using media queries to understand when and how to use a media query.
- CSS media queries module
- sRGB on Wikipedia
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut
