Wide Gamut Colors With display-p3: More Vivid Colors for Modern Displays

1. Why sRGB is no longer enough on modern displays

The sRGB color space was defined in the 1990s for the CRT monitors of that era and has remained the standard color space on the web ever since. Modern displays, especially most smartphones, tablets and high quality laptop screens from recent years, however, can display a considerably wider color range, known as wide gamut. Without deliberate CSS instructions, this additional color range remains completely unused, because classic color notations like hex, rgb() or hsl() are exclusively defined within the limits of sRGB.

For brands with vivid, saturated signal colors, for example intense red or bright green in a logo, this means a visible quality loss on every wide gamut capable display. The color the screen can actually render stays out of reach, because CSS never hands it a value outside of sRGB. With display-p3 as an additional color space in CSS Color Level 4, this unused color range can be tapped deliberately.

2. display-p3 in CSS: the color function in detail

Access to wide gamut colors happens through the generic color() function with the color space identifier display-p3: color(display-p3 1 0 0) defines the most vivid possible red within the P3 gamut, noticeably more saturated than the identically named but actually weaker rgb(255, 0, 0) in sRGB. The three numeric values correspond to red, green and blue in the P3 color space, each normalized to the range 0 to 1.

What matters to understand: not every color defined with display-p3 automatically sits outside of sRGB. Only values that exceed the sRGB gamut, for example very saturated red, green or cyan, actually benefit from the wider color space. For muted, low saturation colors, display-p3 produces nearly identical results to sRGB, which is why its use pays off mainly for vivid accent and brand colors.

Another detail concerns the value notation: besides decimals normalized to 0 through 1, color() also accepts percentage values for every channel, for example color(display-p3 92% 15% 10%). Both notations are functionally identical, but teams should agree on a consistent convention, so wide gamut values stay readable and consistent throughout the stylesheet instead of switching between decimal and percentage notation.

/* display-p3 accesses the wider gamut directly */
.brand-accent {
  /* Falls back silently in browsers without display-p3 support */
  color: rgb(220, 20, 20);              /* sRGB fallback, first declaration */
  color: color(display-p3 0.92 0.15 0.1); /* more saturated red on wide-gamut displays */
}

.logo-mark {
  fill: color(display-p3 0.05 0.65 0.35); /* vivid green beyond sRGB's reach */
}

/* Percentage notation is equally valid, pick one style per project */
.brand-accent-alt {
  color: color(display-p3 92% 15% 10%);
}

3. Color space range compared: sRGB, display-p3 and Rec2020

Three color spaces are relevant for the web, each with a different range. sRGB, the standard since the 1990s, covers about 35 percent of the color space visible to humans. display-p3, originally coming from the digital cinema world and today standard on Apple devices as well as many modern Android displays, covers around 45 percent and noticeably widens especially the red and green range. Rec2020, the color space for future UHD television standards, theoretically covers over 75 percent, but is practically not yet fully supported by consumer hardware currently on the market.

For web projects in 2026, display-p3 is the relevant intermediate step, because it is actually supported by a significant and growing number of end devices, while Rec2020 remains theoretical for now. Anyone investing in wide gamut today should therefore deliberately target display-p3 and keep Rec2020 in mind as a future extension option, rather than using it in production already.

A helpful reference frame is the CIE 1931 chromaticity diagram, where the three color spaces can be visualized as nested triangles. sRGB forms the smallest triangle, display-p3 a noticeably larger one that fully encloses the sRGB range, and Rec2020 the largest, which in turn fully encloses display-p3. This nesting explains why migrating from sRGB to wide gamut colors never causes a loss of existing hues, but only unlocks additional ones.

4. Practical example: more vivid brand colors on supporting displays

A typical use case for wide gamut colors is a brand identity with a very saturated signal color, for example an intense orange red in a logo or a call to action button. On an sRGB limited display, this color already appears sufficiently vivid, on a P3 capable display with a display-p3 declaration, the exact same brand color appears noticeably more alive and intense, because the display can actually make use of the extended color range.

In practice, it is recommended to define wide gamut values deliberately for the two or three most important brand colors, instead of converting the entire color system to display-p3. Secondary UI colors, grays and background colors barely benefit from a wider gamut, since they are low in saturation to begin with, which is why the extra maintenance effort really pays off only for the most eye catching accent colors.

Another worthwhile use case for wide gamut colors are illustrations and decorative gradients in hero sections, where vivid reds and greens get deliberately used as an eye catcher. Especially on high resolution displays with P3 support, as found in most current smartphones, a gradient defined with display-p3 appears noticeably more vibrant than the same composition in plain sRGB, with no need to ship additional image assets for it.

/* Only the most saturated brand accents benefit from display-p3 */
:root {
  --brand-accent: rgb(230, 40, 30);
}

@supports (color: color(display-p3 1 0 0)) {
  @media (color-gamut: p3) {
    :root {
      --brand-accent: color(display-p3 0.94 0.18 0.12);
    }
  }
}

.cta-button {
  background: var(--brand-accent);
}

5. Fallback strategy with color-gamut and @supports

Two safeguard mechanisms work together for wide gamut colors: @supports (color: color(display-p3 1 0 0)) checks whether the browser understands the syntax at all, while the media query @media (color-gamut: p3) checks whether the actually connected display can physically render the wider color space. Both checks are necessary, because a browser can support the syntax while the specific display still only renders sRGB, for example with an older external monitor attached to a newer laptop.

The simplest and most robust fallback technique remains the double declaration of the same CSS property: an sRGB value first, understood by every browser, followed by the display-p3 value, which only overrides the first declaration if the browser understands the syntax. This technique works entirely without @supports or a media query, because invalid CSS values get automatically ignored by browsers, while valid values override the previous declaration.

For design systems with many wide gamut accent colors, it is additionally recommended to maintain a central custom property pair per color, an sRGB value and a P3 value, instead of repeating the double declaration in every single component rule. This keeps the fallback logic maintainable in a single place, and new components simply reference the existing variable, without reimplementing the fallback technique every time.

6. Combining with oklch for wide gamut interpolation

The oklch() color space itself is not bound to sRGB and can describe colors beyond the sRGB gamut directly, with no need for the explicit color(display-p3 ...) syntax. A hue defined in oklch() with high chroma that exceeds sRGB gets automatically mapped by supporting browsers to the largest displayable color space of the given display, which in practice often produces a P3-like result, without display-p3 ever appearing explicitly in the code.

The practical difference: display-p3 gives exact control over a specific color space, while oklch() with high chroma leaves the browser free to automatically pick the best possible color space for the given device. For wide gamut gradients, where the transitions between two highly saturated hues should look perceptually uniform, oklch() is often the better choice, because color-mix() and gradient interpolation in oklch() produce more consistent intermediate values than in display-p3 directly.

In practice, a clear division of labor between both techniques is therefore recommended: display-p3 for cases where exactly one specific color value already defined in the brand guidelines needs to be reached, and oklch() with high chroma for generative gradients or shading, where the browser is allowed to find the best approximation of the desired result itself. Both techniques do not exclude each other and are frequently used side by side in larger wide gamut color systems.

/* oklch with high chroma automatically reaches beyond sRGB where supported */
.gradient-banner {
  background: linear-gradient(
    90deg,
    oklch(62% 0.28 25),   /* highly saturated red, exceeds sRGB gamut */
    oklch(68% 0.24 145)   /* highly saturated green, exceeds sRGB gamut */
  );
}

7. Images and wide gamut: working together with P3 assets

Besides pure CSS colors, wide gamut also plays a role with image assets. AVIF and modern JPEG variants can carry an embedded P3 color profile that the browser respects, provided the display supports it. A product photo with vivid colors that was originally exported with a P3 color profile automatically shows more color nuance on supporting displays, with no need to adjust CSS for it, as long as the image itself was correctly encoded in P3.

What matters is that CSS defined wide gamut accent colors and embedded image color profiles match each other, otherwise a visual mismatch appears between a product photo glowing in P3 and a UI frame around it accidentally defined only in sRGB. Consistent color management across CSS and the image pipeline is therefore a prerequisite for drawing the full benefit from wide gamut, instead of optimizing isolated elements only.

In the build pipeline, it therefore pays off to establish a fixed rule: product photos and illustrations always get exported with an embedded P3 profile, while the accompanying CSS for frames, backgrounds and accent colors uses the same wide gamut logic. If this rule is not documented, larger projects that grew over time often end up with an inconsistent picture, because some image uploads were still produced under the old sRGB workflow, while newer assets already use P3.

8. Testing: checking whether a display actually renders P3

To test whether a specific display actually renders wide gamut, the simplest approach is a test page with sRGB and display-p3 color swatches at maximum saturation placed side by side. On a genuine P3 display, the P3 swatch appears visibly more vivid and alive than the sRGB swatch next to it, on a classic sRGB display both swatches look nearly identical, because the browser automatically clamps the P3 color to the available gamut.

For automated testing, @media (color-gamut: p3) can be queried in a small JavaScript snippet via window.matchMedia, to record in analytics how many actual visitors use a wide gamut capable display. This data helps decide whether the extra maintenance effort is even worth it for a project, before extensive P3 specific adjustments get made.

Screenshot tools and many design tools still render colors in sRGB by default, even when the actual display supports P3. Anyone wanting to document wide gamut results for sign off or design reviews should therefore check whether the given capture or export tool actually preserves the extended color space, instead of unknowingly reducing it to sRGB on save.

9. sRGB, display-p3 and Rec2020 in direct comparison

The following table compares the three relevant color spaces for web projects.

For most projects, display-p3 is the right trade off between additional visual benefit and actual hardware support. Rec2020 remains a future option for now, becoming relevant at the earliest once corresponding displays reach meaningful adoption within the target audience.

10. Summary

Wide gamut colors with display-p3 unlock a color range that modern displays have long been capable of rendering, but which stays unused without deliberate CSS instructions. Through the color() function, more vivid reds and greens beyond sRGB can be addressed directly, while a double declaration with an sRGB fallback ensures that older displays still receive a fully functional result.

In practice, using wide gamut pays off especially for the most eye catching brand and accent colors, combined with oklch() for consistent gradients and coordinated color management across CSS and image assets. Rec2020 remains a matter for the future for now, while display-p3 already delivers visible added value on a broad and growing number of end devices today.

Anyone starting with wide gamut colors today should start small: a central custom property pair for the most important brand color, a clean sRGB fallback, and a test page to verify actual display rendering. From there, the technique can be gradually extended to further accent colors, once the approach has proven itself in the project.

11. FAQ: Wide Gamut Colors With display-p3