color() Display‑P3 Generator - Online Wide Gamut CSS

Display‑P3 is a wide-gamut RGB color space developed by Apple, based on the DCI‑P3 cinema standard. It covers approximately 25% more visible colors than sRGB, enabling richer reds, deeper greens, and more vibrant tones. Modern displays (iPhone, MacBook Pro, iMac, many OLED screens) support P3 natively, making colors appear more vivid and true-to-life. Using color(display-p3 ...) in CSS lets you tap into this extended range for stunning visual designs.

sRGB is the standard color space for the web since the 1990s, designed for CRT monitors with a limited gamut. Display‑P3 uses the same white point (D65) and transfer function as sRGB, but its primary colors (red, green, blue) are more saturated, expanding the gamut significantly. For example, a pure P3 red color(display-p3 1 0 0) appears much more vivid than rgb(255, 0, 0) on a P3-capable screen.

As of 2024, all major browsers support the CSS color() function with Display‑P3: Chrome 111+, Safari 15+, Firefox 113+, and Edge 111+. Global support exceeds 92% of users. Always provide an sRGB fallback (e.g., using @supports or a preceding rgb() declaration) for older browsers.

Use the cascade: declare an sRGB rgb() or hex value first, then override with color(display-p3 ...). Browsers that don't understand color() will ignore it and use the fallback.

Example:
background: rgb(255, 50, 20);
background: color(display-p3 1 0.2 0.08);

Use @supports (color: color(display-p3 1 0 0)) for more complex fallback logic.

Yes! The color() function supports an optional alpha parameter using the slash syntax:
color(display-p3 1 0.5 0 / 0.8)
This gives you an 80% opaque vivid orange. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque), just like rgba().

The browser automatically gamut-maps (clamps) the color to the nearest sRGB equivalent. Colors that exceed the sRGB gamut will be toned down — they won't look broken, but they'll lose their extra vibrancy. This is why providing an intentional sRGB fallback is best practice: you control the clamped result rather than relying on the browser's default mapping.

Each channel (R, G, B) accepts values from 0 to 1, where 0 means none of that primary and 1 means full intensity. Values can use decimal precision (e.g., 0.235). Negative values and values above 1 are technically allowed in the spec but represent colors outside the visible spectrum — stick to 0–1 for practical use. Alpha also uses the 0–1 range.

DCI‑P3 is the original cinema standard with a D63 white point and 2.6 gamma, used in digital movie projection. Display‑P3 (also called P3‑D65) adapts it for consumer displays: it uses the D65 white point (same as sRGB) and the sRGB transfer function (gamma ≈ 2.2), making it compatible with existing workflows. When CSS specifies color(display-p3 ...), it refers to this P3‑D65 variant.