A color gamut is the complete range of colors that a device (display, printer, or camera) can reproduce. On the CIE 1931 chromaticity diagram shown above, a gamut appears as a triangle defined by the device's red, green, and blue primaries. The larger the triangle, the more saturated colors the device can display. The curved horseshoe shape represents all colors visible to the human eye.

sRGB is the standard color space used across the web and most consumer devices since the 1990s. It covers approximately 35% of the visible spectrum. Display P3 (based on DCI-P3) is a wider gamut color space developed for digital cinema and now widely adopted in Apple devices, covering about 45% of visible colors. The key difference: P3 extends further into vibrant reds, oranges, and greens — colors you'll notice in sunsets, neon signs, and tropical foliage. On the diagram above, the P3-only area (highlighted in warm orange) shows colors that exist in P3 but not in sRGB.

Display P3 is supported on most modern Apple devices (iPhone 7+, iPad Pro, MacBook Pro from 2016+, iMac 5K from 2017+), many premium Android phones (Samsung Galaxy S series, Google Pixel), OLED TVs, and recent high-end monitors from Dell, LG, BenQ, and ASUS. As of 2024-2025, P3 support has become increasingly common in mid-range devices as well. Browsers like Safari, Chrome, and Firefox support the color(display-p3 ...) CSS function for web content.

For photographers and designers, working in Display P3 means you can capture and display more saturated, lifelike colors — especially in sunset gradients, flower petals, and vivid fabrics. When you export images in P3 and serve them with proper color profiles, viewers on P3-capable screens see noticeably richer colors. However, you should always provide an sRGB fallback for users on standard displays. Modern CSS allows you to use @media (color-gamut: p3) to serve different assets based on display capability.

The CIE 1931 diagram is the international standard for representing all colors visible to the human eye in a 2D chart. Created by the International Commission on Illumination (CIE) in 1931, it maps colors using x,y chromaticity coordinates. The horseshoe-shaped curve (spectral locus) represents pure spectral colors from violet (380nm) to deep red (700nm). The straight line across the bottom (the "purple line") represents mixtures of violet and red, which don't exist as single wavelengths. Any device's color gamut can be plotted as a triangle within this diagram.

D65 (marked on the diagram near x=0.3127, y=0.3290) is the standard illuminant representing average daylight with a correlated color temperature of 6500K. It serves as the reference white point for both sRGB and Display P3 color spaces. All color calculations in these spaces assume D65 as the neutral white. This is why properly calibrated displays aim for a 6500K white point.

On a P3-capable display, yes — the difference is quite noticeable for saturated colors. Imagine a bright neon orange sign or a deep crimson rose: on sRGB, these colors may appear slightly dull or "clipped," while on P3 they retain their vivid, eye-catching quality. However, for pastel or desaturated colors, the difference is minimal since both color spaces cover similar territory near the white point. The biggest visual impact is in highly saturated reds, oranges, magentas, and yellow-greens.

You can specify P3 colors in modern CSS using the color() function: color(display-p3 1 0.2 0) produces a vivid red-orange beyond sRGB. For images, export with an embedded Display P3 ICC profile. Use @media (color-gamut: p3) to conditionally serve P3 content. Always provide sRGB fallbacks for wider compatibility. Browsers automatically handle the conversion on displays that don't support P3.