color-gamut Media Query Sample

Available in Chrome 58+ | View on GitHub | Browse Samples

Background

As wide color gamut screens are more and more popular, sites can now access the approximate range of colors supported by Chrome and output devices using the color-gamut Media Query.

Live Output

JavaScript Snippet

if (window.matchMedia("(color-gamut: srgb)").matches) {
  log(`Screen supports approximately the sRGB gamut or more.`);
}

if (window.matchMedia("(color-gamut: p3)").matches) {
  log(`Screen supports approximately the gamut specified 
      by the DCI P3 Color Space or more.`);
}

if (window.matchMedia("(color-gamut: rec2020)").matches) {
  log(`Screen supports approximately the gamut specified
      by the ITU-R Recommendation BT.2020 Color Space or more.`);
}