CSS Media Features - color-gamut

CSS media feature color-gamut is used to detect the range of colors that a device's display is capable of reproducing.

color-gamut helps web developers create styles and layouts that are optimized for the color gamut of the user's device.

Possible Values

  • srgb − This value targets devices that can display the standard sRGB color gamut, which is a standard color space used in most consumer displays. sRGB represents a somewhat limited range of colors, and it's common on many devices.

  • p3 − This value indicates that a device can display at least as many colors as the Display P3 color space, and possibly more. The Display P3 color space is a wider gamut than sRGB, it can display more colors. It is commonly found in devices like some modern iPhones and high-quality displays.

  • rec2020 − This device can display at least as many colors as the ITU-R Recommendation BT.2020 color space, which is a wider range of colors than the P3 gamut. It's often associated with high-end displays and media production.

Syntax

color-gamut: srgba|p3|rec2020;

CSS color-gamut - srgb Value

The following example demonstrates the use of color-gamut: srgb media feature in CSS to target devices with the srgb color gamut. When the color gamut is srgb, the text will be red and background color becomes yellow −

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: srgb) {
      p {
         background-color: yellow;
         color: red;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: srgb</p>
</body>
</html>

CSS Color-gamut - p3 Value

The following example demonstrates that the color-gamut: p3 media feature, the p element will have a pink background color and black text color by default.

The devices that support p3 color gamut, the background color of the p element will change to green with a violet border.
<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: p3) {
      p {
         background-color: green;
         border: 3px solid violet;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: p3</p>
</body>
</html>

CSS color-gamut - rec2020 Value

The following example demonstrates that the color-gamut: rec2020 media feature, the p element will have a pink background color and black text color by default.

The devices that support rec2020 color gamut, the background color of the p element will change to violet with blue text.
<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: rec2020) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: rec2020</p>
</body>
</html>
Advertisements