Widely available Useful for high-fidelity design systems and media-rich interfaces where display color capability matters.

color-gamut media query

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.

ColorMedia queryDisplays

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.color-gamut
58
79
110
10
58
10
CSS at-rule
color-gamut.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.
58
79
110
10
58
10
color-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.
58
79
110
10
58
10
color-gamut.srgb

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
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • `color-gamut: p3` is always false because Firefox does not support wide-gamut color. See bug 1626624.
Notes 1 item(s)
Implementation note
  • `color-gamut: rec2020` is always false because Firefox does not support wide-gamut color. See bug 1626624.
Notes 1 item(s)
Implementation note
  • `color-gamut: srgb` is always true because Firefox does not support wide-gamut color. See bug 1626624.

Syntax

CSS 
/* 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

Srgb fo-back

color-gamut media query SRGB fo-back demo.

PreviewFullscreen

P3 Colorrangesupport

color-gamut media query P3 colorrangesupport demo.

PreviewFullscreen

Colorrange. comparison

color-gamut media query Colorrange. comparison demo.

PreviewFullscreen

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