Using CSS color() for Display-P3 and Rec2020

Modern displays are capable of rendering colors far beyond the traditional sRGB color space, yet web design has historically been confined to standard-gamut boundaries. The CSS Color Module Level 4 introduces the color() function, a standardized method that allows developers to access wide-gamut color spaces such as Display P3 and Rec2020 directly in stylesheets. This article explains how the color() function operates, how to specify colors in wide-gamut spaces, and how to implement progressive enhancement for unsupported devices.

Limitations of sRGB and the Rise of Wide Gamuts

Traditional CSS colors—such as hex codes, rgb(), and hsl()—are bound to the sRGB color space. Created in 1996, sRGB covers only a fraction of the visible spectrum. Modern smartphones, laptops, and monitors routinely support Display P3, which offers approximately 50% more color volume than sRGB, yielding visibly more saturated reds, greens, and vibrant neons. Rec2020 expands this range even further, covering an ultra-wide spectrum designed for UHD television and HDR content.

The Syntax of the color() Function

The color() function explicitly declares both the target color space and the coordinate values representing the color channels within that space.

color(colorspace r g b [ / alpha ])

• colorspace: An identifier specifying the color profile, such as display-p3, rec2020, srgb, or a98-rgb.
• r, g, b: Channel coordinates. In wide-gamut spaces, these values are typically represented as normalized numbers between 0 and 1, or as percentages from 0% to 100%.
• alpha (optional): An optional transparency value between 0 and 1, or 0% and 100%, separated by a forward slash (/).

Unlike older color models, values can also exceed 1 (or 100%) in HDR contexts, but standard wide-gamut implementation maps between 0 and 1.

Accessing the Display P3 Color Space

Display P3 is currently the standard for wide-gamut consumer hardware, particularly on modern Apple devices, high-end Android phones, and creative-grade desktop monitors.

To declare a vibrant P3 green that cannot be displayed within sRGB:

.vibrant-green {
  background-color: color(display-p3 0 1 0);
}

In standard sRGB, rgb(0 255 0) represents the greenest point possible. In Display P3, color(display-p3 0 1 0) reaches a deeper, significantly more vivid green coordinate that sRGB displays simply cannot reproduce.

Accessing the Rec2020 Color Space

Rec2020 represents an ultra-wide color gamut primarily utilized in high-definition video production and high-end creative workflows. While few consumer screens can reproduce 100% of Rec2020 today, specifying colors within this gamut future-proofs styles for next-generation displays.

To define an intense, ultra-wide red using Rec2020:

.intense-red {
  background-color: color(rec2020 0.9 0.1 0.1);
}

Browsers on hardware that cannot fully represent the Rec2020 gamut will perform gamut mapping, automatically clamping or adjusting the hue to the closest color the physical display can achieve without clipping out of range entirely.

Graceful Degradation and Feature Detection

Because not all browsers or displays support wide-gamut spaces, standard fallbacks and conditional CSS should be used.

Fallback Property Cascading

The simplest method is relying on the CSS cascade. Browsers ignore property declarations they do not understand:

.element {
  /* Fallback for older browsers and sRGB */
  background-color: rgb(255 50 50);

  /* Overwrite with P3 where supported */
  background-color: color(display-p3 1 0.2 0.2);
}

Media Queries for Display Capabilities

To prevent unnecessary gamut mapping on screens that physically cannot render wide-gamut colors, use the color-gamut media query:

.button {
  background-color: rgb(0 150 255);
}

@media (color-gamut: p3) {
  .button {
    background-color: color(display-p3 0 0.58 1);
  }
}

@media (color-gamut: rec2020) {
  .button {
    background-color: color(rec2020 0 0.55 1);
  }
}

By leveraging the color() function alongside display-capability queries, stylesheets can render deeper contrasts, brighter accents, and more realistic imagery on modern hardware while maintaining consistent visual integrity across the web.