How Safari Pioneered Wide-Gamut CSS and Display-P3 Colors

Apple's Safari web browser single-handedly led the transition of the web from the aging sRGB color space to the vibrant world of wide-gamut colors. Driven by the rollout of Display P3 screens across its hardware lineup, Apple's WebKit team worked with web standards bodies to invent and implement the color(display-p3) CSS function in 2016. This article explains the hardware motivations, standardization efforts, and technical implementations that allowed Safari to pioneer wide-gamut CSS colors years ahead of competing browsers.

The Hardware Catalyst

For decades, the web was strictly limited to the sRGB color space, a standard created in 1996 based on the capabilities of CRT monitors. However, in late 2015, Apple introduced the Retina iMac with a wide-gamut display based on the DCI-P3 color space, originally created for digital cinema. Apple adapted this into "Display P3," which offers a 25% larger color gamut than sRGB, producing significantly deeper reds, vibrants greens, and richer oranges.

By 2016, Apple brought Display P3 screens to the iPad Pro and the iPhone 7. At that time, native iOS and macOS applications could access these new colors, but the web browser remained trapped in sRGB. Apple needed a way for web developers to utilize the full capabilities of their new displays.

Co-Writing the W3C Specification

To bring wide-gamut colors to the web, the CSS language itself needed an upgrade. Hex codes, rgb(), and hsl() were all inherently tied to the sRGB color space.

Engineers from Apple's WebKit team, notably Dean Jackson, collaborated with the W3C CSS Working Group to co-edit the CSS Color Module Level 4 specification. They proposed a new, extensible CSS function simply called color(). This function allowed developers to specify a particular color profile followed by the color's channel values in decimal format. Through this specification work, the color(display-p3 1 0 0) syntax was born, enabling precise targeting of the Display P3 color space directly within stylesheets.

Rapid Implementation in Safari 10

While the CSS Color Level 4 specification was still in its early draft stages, the WebKit team moved quickly to implement the technology. In September 2016, with the release of macOS Sierra and iOS 10, Safari 10 officially launched with support for the color(display-p3) function.

Safari did not just add syntax support; it overhauled its entire rendering engine to become fully color-managed. Prior to this, browsers generally ignored color profiles or clamped everything to sRGB. Safari 10 ensured that sRGB colors and Display P3 colors could exist on the same webpage simultaneously, rendering both accurately without artificially oversaturating the standard sRGB elements.

Introducing the Color-Gamut Media Query

Pioneering a new CSS feature meant that for several years, Safari was the only browser capable of reading the color() function. To ensure developers could adopt display-p3 without breaking their websites on Chrome, Firefox, or older monitors, Safari simultaneously implemented the color-gamut media query.

By using @media (color-gamut: p3), developers could detect if the user's browser and hardware combination supported the P3 color space. This allowed for seamless progressive enhancement. Developers could define a standard sRGB hex code as a baseline and override it with a vibrant color(display-p3) value inside the media query exclusively for Safari users on supported Apple hardware.

Advancing Developer Tooling

Recognizing that decimal-based P3 values (such as color(display-p3 0.92 0.2 0.14)) are difficult to write by hand, the Safari team later pioneered wide-gamut developer tooling. Safari's Web Inspector introduced an upgraded color picker that visually mapped the boundary between the sRGB and Display P3 color spaces.

Web developers could click on an existing sRGB color in the inspector, see exactly how much further the P3 gamut extended, and drag the color picker into the wide-gamut territory to automatically generate the correct color(display-p3) syntax. This combination of standards creation, engine color management, and developer tooling solidified Safari's role as the pioneer of modern web color, paving the way for Chrome and Firefox to finally adopt the syntax over five years later.