Color Gamut Explained: sRGB, P3, and Rec. 2020

The colors on your screen are bounded by a limit most users never think about: the color gamut. For most of the web's history, that limit was the same for virtually every device — sRGB, a standard established in 1996. Today, modern phones, laptops, and monitors routinely display significantly more color than sRGB allows, and CSS has the tools to take advantage of this — if you know how.

This guide explains what a color gamut is, walks through sRGB, Display P3, and Rec. 2020 as the three most relevant gamuts for web work, and shows exactly how to use CSS wide-gamut colors with the @media (color-gamut) feature query.

What Is a Color Gamut?

A color gamut is the complete range of colors that a color system can represent or reproduce. Not all colors visible to the human eye can be expressed in every color system — physical and technical constraints mean every system covers only a subset of what we can perceive.

The CIE 1931 Chromaticity Diagram

Color scientists represent gamuts visually using the CIE 1931 chromaticity diagram — a horseshoe-shaped 2D map of all colors perceivable by the average human eye. The outer boundary of the horseshoe represents the purest, most saturated spectral colors. Interior regions represent less saturated, more mixed colors. White sits near the center.

Any specific color gamut appears on this diagram as a polygon — typically a triangle defined by its three primary colors (red, green, blue). The area of that triangle determines how many visible colors the gamut covers:

• A small triangle = a narrow gamut (fewer colors)
• A large triangle = a wide gamut (more colors)

The three primaries of any gamut determine where the triangle's vertices sit. Pushing the primaries toward the outer edge of the horseshoe (more saturated primaries) expands the triangle and the gamut.

Why Gamuts Matter for Web Design

Until very recently, this was an academic concern. Almost every display in use was sRGB-compatible, and web colors were universally sRGB colors. But as Display P3 became standard on Apple devices (all iPhones since 2016, all recent MacBooks, iMacs, iPad Pros, and Studio Displays), and as HDR monitors spread to Windows and gaming, the practical display landscape has fragmented.

Web content served in sRGB still looks correct on P3 and Rec. 2020 displays — sRGB colors are a subset of those wider gamuts. But content specified in wide-gamut color spaces can take advantage of the richer, more saturated primaries that P3 and Rec. 2020 offer.

sRGB: The Web Standard Since 1996

History and Adoption

The sRGB (standard Red Green Blue) color space was developed jointly by HP and Microsoft in 1996 and standardized by the IEC as IEC 61966-2-1. Its goal was to provide a common reference for consumer monitors, printers, and the web — enabling consistent color reproduction without requiring device calibration.

sRGB became the default color space for: - Web browsers (all CSS colors are sRGB unless otherwise specified) - Digital cameras (JPEG files default to sRGB) - Most consumer monitors through the 2000s and 2010s - Windows display subsystem - Standard SDR (Standard Dynamic Range) content

sRGB Coverage

sRGB covers approximately 35% of the visible color gamut as defined by the CIE 1931 chromaticity diagram. This sounds limiting, but it covers a practical range that encompasses a broad variety of natural and manufactured colors encountered in everyday life.

The sRGB primaries are: - Red: approximately x=0.64, y=0.33 (a slightly orange-red) - Green: approximately x=0.30, y=0.60 (a yellow-green) - Blue: approximately x=0.15, y=0.06 (a blue-violet)

sRGB in CSS

Every CSS color you have ever written is sRGB unless you explicitly specified otherwise. This includes:

• Hex codes: #3B82F6
• Named colors: blue, coral, rebeccapurple
• rgb() and rgba(): rgb(59, 130, 246)
• hsl() and hsla(): hsl(217, 91%, 60%)

These all resolve to sRGB values. A value of #FF0000 precisely means the sRGB primary red — the reddest red that sRGB can represent. On a P3 display, that red is rendered faithfully but does not take advantage of P3's even redder native primary.

Display P3: Apple's Modern Standard

What Is Display P3?

Display P3 is a color space developed by Apple for its Retina displays, derived from the DCI-P3 color space used in digital cinema projection. It uses the same white point as sRGB (D65, the standard daylight illuminant) and the same gamma, but defines different, more saturated primary colors.

Display P3 covers approximately 45% of the visible color gamut — about 26% more area than sRGB. The expanded coverage is most pronounced in the red and green regions, with less dramatic expansion in blue.

Which Devices Support Display P3?

Apple adopted Display P3 broadly starting in 2015–2016:

• iPhone 7 and later — all subsequent iPhone models
• iPad Pro (9.7-inch, 2016) and later — all subsequent iPad Pro models
• MacBook Pro (late 2016) and later with Retina display
• iMac (Retina 5K, late 2015) and later
• Apple Pro Display XDR, Studio Display

On the Windows and Android side, many high-end laptops and phones also ship with P3-capable displays, though adoption is less uniform. As of 2025, a majority of high-end consumer devices support at least P3.

Specifying P3 Colors in CSS

CSS Color Level 4 provides the color() function with the display-p3 color space, allowing you to specify colors that use the P3 primaries directly:

/* P3 red — more vivid than sRGB red */
color: color(display-p3 1 0 0);

/* A vivid P3 green */
color: color(display-p3 0 1 0);

/* A rich coral in P3 */
color: color(display-p3 0.95 0.42 0.37);

The three values in color(display-p3 R G B) are normalized to 0–1 (not 0–255). This is different from the rgb() function.

Seeing the Difference

The practical impact of P3 is most visible in highly saturated colors. A vivid P3 red [comparable to color(display-p3 1 0 0)] is noticeably more saturated than sRGB red #FF0000 on a P3-capable display. For brand colors and hero imagery that need maximum vibrancy, P3 provides a meaningful upgrade.

Rec. 2020: The HDR and Cinema Future

What Is Rec. 2020?

Rec. 2020 (formally ITU-R BT.2020) is the color standard for Ultra High Definition Television (UHDTV) and HDR content. It was defined by the International Telecommunication Union in 2012 and represents a dramatically wider gamut than anything in common consumer use today.

Rec. 2020 covers approximately 75% of the visible color gamut — more than twice the area of sRGB and substantially wider than P3. Its primaries are defined at the spectral limits of specific laser wavelengths, meaning they are theoretically the most saturated possible colors at those wavelengths.

Current Display Support

Here is the critical caveat: almost no consumer display currently available fully covers the Rec. 2020 gamut. High-end HDR televisions may cover 75–90% of Rec. 2020; professional cinema projectors and specialized HDR mastering monitors are needed for full coverage.

However, Rec. 2020 is the reference gamut for HDR content standards including HDR10, Dolby Vision, and HLG. Even if a display cannot fully reproduce it, content mastered in Rec. 2020 will be tone-mapped for display on smaller-gamut screens.

Rec. 2020 in CSS

/* Rec. 2020 green — extremely vivid, beyond most display capabilities */
color: color(rec2020 0 1 0);

/* A deep red in Rec. 2020 */
color: color(rec2020 0.8 0.1 0.1);

For web work today, Rec. 2020 colors will be displayed as the nearest reproducible color on whatever gamut the display supports. This makes it forward-compatible: browsers with Rec. 2020 capability show the full color; others show the best approximation.

CSS Wide-Gamut Colors with @media (color-gamut)

CSS provides a media query specifically for detecting display gamut capability and serving appropriate colors:

@media (color-gamut: srgb) {
  /* Supported by virtually all color displays */
}

@media (color-gamut: p3) {
  /* Display supports at least the P3 gamut */
}

@media (color-gamut: rec2020) {
  /* Display supports at least the Rec. 2020 gamut */
}

The values are progressive — p3 means the display supports at least P3 (so sRGB is also covered), and rec2020 means the display supports at least Rec. 2020 (covering P3 and sRGB too).

Progressive Enhancement Pattern

The recommended approach is to define your base sRGB color first, then progressively enhance for wider gamut displays:

.hero-button {
  /* sRGB fallback — works on all displays */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* More vivid red on P3 displays */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Even more vivid on Rec. 2020 displays */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

On a standard sRGB monitor, the button shows the hex red #E63946. On an iPhone, MacBook Pro, or modern wide-gamut monitor, it shows the more vivid P3 version. On a display capable of Rec. 2020, it shows the most vivid version.

Using oklch() for Wide Gamut

The OKLCH color space is not specific to any gamut but can address colors outside sRGB naturally — values that fall outside the 0–1 range in sRGB terms are automatically wide-gamut. This makes OKLCH convenient for cross-gamut color work:

.accent {
  /* OKLCH can express P3 and beyond */
  color: oklch(60% 0.25 27deg);
}

The browser maps the specified OKLCH color to the nearest reproducible color in whatever gamut the display supports. If the display is P3-capable, it maps to the P3 color; if sRGB, it clips to the nearest sRGB equivalent.

This is a compelling reason to use OKLCH for design systems: you can specify an intended color perception, and the browser handles gamut mapping automatically. Use ColorFYI's Color Converter to translate between sRGB hex values and their OKLCH equivalents.

The color-gamut: srgb Baseline

Every color display supports at least color-gamut: srgb — this matches any non-monochrome display. You will only need this media query value if you want to target color displays as opposed to hypothetical monochrome displays, which is rarely necessary.

In practice, the useful query is color-gamut: p3, which covers the Apple ecosystem and an increasing share of Android and Windows devices.

Browser Support

As of 2025: - @media (color-gamut) — supported in all major browsers (Chrome, Firefox, Safari, Edge) - color(display-p3) — supported in all major browsers - color(rec2020) — supported in Chrome and Safari; Firefox support followed - oklch() — supported in all major browsers

There are no browsers in common use today that would fail to parse these features; they either render the wide-gamut color or fall back gracefully to the preceding sRGB declaration.

Practical Guidance for Web Design Projects

Should You Use P3 Colors Today?

Yes, with a progressive enhancement approach. The downside risk is zero — sRGB fallbacks ensure your design looks correct on all displays. The upside is that a significant and growing portion of your audience sees more vivid, richer colors.

The most impactful use cases are: - Brand colors and accents that should appear as vivid as possible - Hero imagery and promotional graphics where vibrancy drives engagement - Data visualization where a wider color range allows more distinct categorical colors

Which Colors Benefit Most from P3?

The gains from P3 over sRGB are largest in: - Vivid reds and oranges: the P3 red primary is noticeably more saturated - Saturated greens: P3 extends significantly into the green-yellow region - Vibrant pinks and magentas: P3 captures the vivid fashion/beauty palette better

Neutral colors, dark colors, and pastel tones show minimal visible difference between sRGB and P3, because they are near the center of the gamut where both color spaces overlap substantially.

Practical Workflow

1. Design your color system in hex (sRGB) as usual
2. Identify the 2–5 colors where maximum vibrancy matters (primary brand color, hero accent, key UI states)
3. Use ColorFYI's Color Converter to find the OKLCH equivalent of each
4. In CSS, specify the OKLCH value (or color(display-p3) equivalent) and let the browser handle gamut mapping
5. Test on a P3-capable display (any modern MacBook or iPhone) to verify the visual improvement

Gamut Comparison Summary

Key Takeaways

• A color gamut is the total range of colors a system can represent, visualized as a triangle on the CIE chromaticity diagram. Wider primaries = larger triangle = more colors.
• sRGB has been the universal web standard since 1996, covering roughly 35% of visible colors. All standard CSS color values (rgb(), hsl(), hex) are sRGB.
• Display P3 covers approximately 45% of visible colors and is standard on all Apple devices since 2016 (iPhone, MacBook, iPad Pro, iMac) and many modern Windows and Android devices.
• Rec. 2020 covers approximately 75% of visible colors and is used as the reference gamut for HDR content, but few consumer displays fully reproduce it today.
• Use @media (color-gamut: p3) to progressively enhance colors for P3-capable displays, with sRGB as the baseline fallback.
• color(display-p3 R G B) specifies colors in the P3 color space in CSS; values are normalized to 0–1.
• oklch() naturally expresses wide-gamut colors and is increasingly preferred for design systems — the browser handles gamut mapping to the display's capability automatically.
• Use ColorFYI's Color Converter to translate between hex, OKLCH, and other color spaces as you build wide-gamut color systems.