Tutorials

CSS @media color-gamut Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media color-gamut feature in CSS is used to apply styles based on the range of colors that a device can display. Different devices support different color gamuts, which refer to the range of colors that can be represented.

By using the color-gamut property within a media query, you can serve more vibrant or reduced-color designs depending on the device's capability.

💡 Syntax

The syntax for the @media color-gamut media feature follows the same pattern as other media queries. You can test for various levels of color gamut support.

Syntax

Copied

@media (color-gamut: srgb) {
  /* Styles for devices with standard color gamut (sRGB) */
}

@media (color-gamut: p3) {
  /* Styles for devices supporting P3 color gamut */
}

@media (color-gamut: rec2020) {
  /* Styles for devices with the widest color gamut */
}

🏠 Property Values

The @media color-gamut property can take the following values:

srgb: Represents devices that support the standard RGB color space. This is the most common and widely supported color gamut.
p3: Represents devices that support the P3 color space, which has a wider color range than sRGB. Many modern displays, like those on Apple devices, support this color gamut.
rec2020: Represents devices that support the Rec. 2020 color space, the widest range of color representation currently available. It is primarily used for 4K and 8K displays.

🎛️ Default Value

There is no default value for color-gamut as it is not a CSS property but rather a media feature used in media queries. It evaluates to the color gamut of the device.

📝 Example Usage

📜 Basic Usage

In this example, we apply different background colors based on the device’s color-gamut capability.

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media color-gamut Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    @media (color-gamut: rec2020) {
      body {
        background-color: #ff5733; /* Bright red for devices supporting rec2020 */
      }
    }

    @media (color-gamut: p3) {
      body {
        background-color: #33ff57; /* Bright green for P3 gamut devices */
      }
    }

    @media (color-gamut: srgb) {
      body {
        background-color: #3333ff; /* Standard blue for sRGB devices */
      }
    }
  </style>
</head>
<body>
  <h1>Device Color Gamut Example</h1>
  <p>This page changes its background color based on the device's color gamut capability.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media color-gamut feature is supported in modern browsers like Chrome, Safari, Firefox, and Edge. However, older versions of browsers may not support this feature, so it’s recommended to test across different environments to ensure the best user experience.

🎉 Conclusion

The @media color-gamut feature allows developers to optimize web designs for devices with varying color display capabilities. By tailoring styles to devices with wider color gamuts, you can provide richer and more visually engaging experiences. With more devices supporting advanced color gamuts, using this feature can significantly improve the aesthetic appeal of your website.