color-gamut media query
The color-gamut media query detects the color range a device can display. It helps advanced themes or visuals adapt to wide-gamut screens without assuming every display can render the same palette.
Overview
The color-gamut media query detects the color range a device can display. It helps advanced themes or visuals adapt to wide-gamut screens without assuming every display can render the same palette.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 58 | 79 | 110 | 10 | 58 | 10 | |
| CSS at-rule | ||||||
| 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. | 58 | 79 | 110 | 10 | 58 | 10 |
| 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. | 58 | 79 | 110 | 10 | 58 | 10 |
| The user agent and the output device can support approximately the sRGB gamut or more. This includes the vast majority of color displays. | 58 | 79 | 110 | 10 | 58 | 10 |
- `color-gamut: p3` is always false because Firefox does not support wide-gamut color. See bug 1626624.
- `color-gamut: rec2020` is always false because Firefox does not support wide-gamut color. See bug 1626624.
- `color-gamut: srgb` is always true because Firefox does not support wide-gamut color. See bug 1626624.
Syntax
/* Use more vibrant colors on devices that support the P3 color gamut */
.brand-color {
background-color: #ff4500;
}
@media (color-gamut: p3) {
.brand-color {
background-color: oklch(65% 0.29 29);
}
}Live demo
Use cases
Wide-gamut enhancements
Use richer color tokens on displays that can render them while keeping standard-safe colors elsewhere.
Image-heavy experiences
Tune surrounding UI or previews when display capabilities affect how content appears.
Cautions
- Wide-gamut styling should remain optional enhancement, not a dependency for understanding the UI.
- Previewing on a single display type can hide how other users actually experience the colors.
Accessibility
- Do not rely on richer gamut alone to achieve meaning or contrast.
- Accessible contrast targets still matter across both standard and wide-gamut displays.
Related links
Powered by web-features