CSS color-gamut Media Feature

Definition and Usage

The color-gamut media feature matches the approximate range of colors the user agent and output device can support. Use it inside @media to serve richer accents on wide-gamut screens while keeping sRGB-safe defaults everywhere else.

The keywords are srgb, p3, and rec2020. Wider gamuts include narrower ones — a P3 display also matches srgb. This is different from the color feature, which reports bits per component.

CSS Syntax

Example: @media (color-gamut: p3) { … }.

Feature Values

How to Use color-gamut

Design for sRGB first, then layer wider gamuts as enhancements.

1. Set colors that look good in sRGB (your default stylesheet).
2. Add @media (color-gamut: srgb) only if you need an explicit sRGB branch.
3. Override with (color-gamut: p3) for Display P3–capable screens.
4. Optionally add (color-gamut: rec2020) last for the widest displays.

Live Preview

This page checks your browser with matchMedia for each gamut keyword. The sample box uses real @media (color-gamut) rules.

CSS Examples

Each snippet focuses on color-gamut. On your machine, only matching queries apply. Use Try It Yourself for a live editor.

<style>
  p {
    padding: 8px;
    border: 1px solid #334155;
    background: #fff;
  }

  @media (color-gamut: srgb) {
    p {
      background: #f4ae8a;
    }
  }
</style>

<p>Peach background on sRGB-or-better screens.</p>

<style>
  p {
    color: #b91c1c;
    font-weight: 700;
  }

  @media (color-gamut: p3) {
    p {
      color: color(display-p3 1 0.2 0.1);
    }
  }
</style>

<p>Richer red on P3-capable displays.</p>

<style>
  p {
    padding: 8px;
    background: #e2e8f0;
  }

  @media (color-gamut: srgb) {
    p { background: #93c5fd; }
  }

  @media (color-gamut: p3) {
    p { background: #60a5fa; }
  }

  @media (color-gamut: rec2020) {
    p { background: #2563eb; }
  }
</style>

<p>Background steps up with wider gamut.</p>

Key Takeaways