CSS color-gamut Media Feature

What You’ll Learn

The color-gamut media feature detects how wide a display’s color range is. Serve richer hues on P3 and Rec. 2020 screens while keeping sRGB-safe fallbacks for standard monitors.

Introduction

A color gamut is the range of colors a screen can actually display. The @media color-gamut feature lets you detect which gamut a device supports and apply styles accordingly — from standard sRGB web colors to the vivid Display P3 palette on modern phones and MacBooks.

This is progressive enhancement for color. Start with sRGB-safe designs that look good everywhere, then layer on more saturated colors for displays that can show them.

Definition and Usage

Write @media (color-gamut: srgb), @media (color-gamut: p3), or @media (color-gamut: rec2020). A device that supports P3 also matches srgb, so place wider-gamut rules after your base styles so they override correctly.

📝 Syntax

Target specific color gamuts inside @media rules:

@media (color-gamut: srgb) {
  /* Standard RGB gamut (most displays) */
}

@media (color-gamut: p3) {
  /* Display P3 — wider than sRGB */
}

@media (color-gamut: rec2020) {
  /* Rec. 2020 — widest gamut (HDR/4K) */
}

Accepted Values

• srgb — Standard RGB color space. Supported by virtually all color displays; the default web palette.
• p3 — Display P3, a wider gamut common on iPhones, iPads, and many modern Mac and Android screens.
• rec2020 — ITU-R Rec. 2020, the widest gamut; found on high-end HDR and 4K/8K displays.

Gamut Comparison

Basic Example

/* sRGB-safe default */
body {
  background-color: #2563eb;
}

/* Enhance on P3 displays */
@media (color-gamut: p3) {
  body {
    background-color: color(display-p3 0.1 0.55 1);
  }
}

/* Further enhance on Rec. 2020 */
@media (color-gamut: rec2020) {
  body {
    background-color: color(rec2020 0.2 0.7 0.95);
  }
}

Default Value

There is no CSS default. The browser reports the display’s gamut capability at runtime.

Syntax Rules

• Only three values are valid: srgb, p3, and rec2020.
• Wider gamuts match narrower ones — order rules from sRGB base to widest enhancement.
• Pair with color(display-p3 …) or color(rec2020 …) for out-of-sRGB hues.
• Always provide sRGB fallbacks that look good without wide-gamut colors.
• Distinct from color media feature (monochrome vs color capability).

Related Topics

• color media feature — detect monochrome vs color displays
• color property — set element foreground colors
• background-color property — element background colors

When to Use color-gamut

Use color-gamut when display color range affects visual quality:

• Brand colors — Show more vivid brand hues on P3 displays without clipping on sRGB.
• Photography & art — Serve richer gradients and images on wide-gamut screens.
• Marketing heroes — Enhance hero section backgrounds on capable hardware.
• UI accents — Use saturated accent colors where displays can render them accurately.
• HDR content — Target rec2020 for premium display experiences.

Examples Gallery

Practice color-gamut with progressive backgrounds, P3 gradients, hero sections, and sRGB fallbacks.

body {
  background-color: #3333ff;
  font-family: system-ui, sans-serif;
  padding: 2rem;
}

@media (color-gamut: p3) {
  body {
    background-color: color(display-p3 0.2 1 0.35);
  }
}

@media (color-gamut: rec2020) {
  body {
    background-color: color(rec2020 1 0.35 0.2);
  }
}

.banner {
  padding: 2rem;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
}

@media (color-gamut: p3) {
  .banner {
    background: linear-gradient(
      135deg,
      color(display-p3 0.55 0.1 1),
      color(display-p3 0.05 0.45 1)
    );
  }
}

.cta {
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 0.4rem;
  background: #dc2626;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

@media (color-gamut: p3) {
  .cta {
    background: color(display-p3 1 0.15 0.1);
  }
}

.card {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
}

@media (color-gamut: srgb) {
  .card {
    background: #eff6ff;
    border-color: #93c5fd;
  }
}

@media (color-gamut: p3) {
  .card {
    background: color(display-p3 0.85 0.95 1);
    border-color: color(display-p3 0.35 0.65 1);
  }
}

💬 Usage Tips

• Progressive enhancement — Default styles should look great in sRGB; P3 is a bonus.
• Rule order matters — Place (color-gamut: p3) and rec2020 after base styles.
• Use color() function — Pair with color(display-p3 …) to specify out-of-sRGB hues.
• Test on real devices — Compare iPhone/Mac (P3) vs standard external monitors (sRGB).
• Do not clip colors — Extremely saturated sRGB hex values may look dull; P3 fixes that on capable screens.

⚠️ Common Pitfalls

• Wrong rule order — Putting srgb last overrides wider gamut styles on P3 devices.
• Assuming everyone sees P3 — Many office monitors are sRGB-only; never depend on wide gamut for readability.
• Confusing with color feature — color = has color; color-gamut = how wide the range is.
• Over-saturation — P3 colors can look neon; test for comfort and brand consistency.
• Accessibility — Vivid colors must still meet contrast requirements on all gamuts.

♿ Accessibility

• Contrast on all gamuts — Verify WCAG contrast ratios for both sRGB and P3 color values.
• Do not rely on vivid color alone — Use icons, labels, and patterns alongside color cues.
• Test sRGB fallback — Ensure the default palette is fully accessible without P3 enhancement.
• Color blindness — Wide-gamut reds and greens can still confuse; test with simulators.
• Reduced transparency — P3 backgrounds behind text need sufficient opacity for readability.

💡 Best Practices