How Safari Supports Display-P3 in CSS, Canvas, and Images

This article provides a direct overview of how the Safari web browser implements and supports the Wide Gamut Display-P3 color space. It breaks down the exact methods and syntax Safari uses to render these vibrant colors across three core web technologies: CSS, the HTML5 Canvas element, and standard image formats, allowing developers to utilize the 25% larger color range that Display-P3 offers over traditional sRGB.

Display-P3 in CSS

Safari was the first browser to introduce wide-gamut color support in CSS, starting with Safari 10. Because standard hexadecimal and rgb() values are restricted to the sRGB color space, Safari utilizes the CSS Color Module Level 4 specification to access Display-P3.

The color() Function

To define a Display-P3 color in CSS, Safari supports the color() function. This function takes the color space name followed by red, green, and blue decimal values ranging from 0 to 1.

.vibrant-element {
  /* Fallback for sRGB browsers */
  background-color: rgb(255, 0, 0); 
  /* Display-P3 bright red */
  background-color: color(display-p3 1 0 0); 
}

Detecting Display-P3 Support

Safari supports the color-gamut media query, which checks if the user's device screen and browser can render P3 colors. Combined with the @supports rule, developers can safely progressively enhance their stylesheets.

@media (color-gamut: p3) {
  @supports (color: color(display-p3 1 1 1)) {
    .vibrant-element {
      background-color: color(display-p3 1 0 0);
    }
  }
}

Color Spaces (LCH and OKLCH)

Starting in Safari 15 and 15.4 respectively, Safari added support for hardware-independent color functions like lch() and oklch(). These functions are not restricted to sRGB and will automatically render within the Display-P3 gamut in Safari if the specified lightness, chroma, and hue values fall outside the standard sRGB range.

Display-P3 in HTML5 Canvas

Beginning with Safari 15.1, Apple introduced wide-gamut color support for the HTML5 <canvas> element. By default, a canvas defaults to sRGB to prevent breaking older web applications, meaning developers must explicitly opt-in to Display-P3.

2D Rendering Context

To draw with Display-P3 colors in a 2D canvas, you must pass the colorSpace parameter when initializing the context. Once initialized, you can use the CSS color(display-p3 ...) syntax for fills and strokes.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d', { colorSpace: 'display-p3' });

ctx.fillStyle = 'color(display-p3 0 1 0)';
ctx.fillRect(0, 0, 100, 100);

Pixel Manipulation with ImageData

When manipulating raw pixel data in a canvas using getImageData() or createImageData(), Safari allows you to specify the Display-P3 color space so that pixel arrays are calculated using the wider gamut.

const imageData = new ImageData(100, 100, { colorSpace: 'display-p3' });
// Manipulate pixel data here
ctx.putImageData(imageData, 0, 0);

WebGL Support

For 3D graphics, Safari supports Display-P3 in WebGL and WebGL2 contexts. After creating the WebGL context, you can change the drawing buffer's color space property.

const gl = canvas.getContext('webgl');
gl.drawingBufferColorSpace = 'display-p3';

Display-P3 in Images

Images are the easiest way to utilize Display-P3 in Safari, as they require no special HTML or CSS code to render correctly. Safari features automatic color management and has supported embedded ICC color profiles for years.

How Safari Processes Wide-Gamut Images

To display an image in the P3 color space on Safari, the image file itself must be exported from an image editor (like Adobe Photoshop or Affinity Photo) with the Display-P3 ICC profile embedded.

When Safari loads the image:

  1. It reads the embedded ICC profile metadata.
  2. It checks the color capabilities of the display the user is currently viewing the browser on.
  3. If the screen supports P3 (which most modern Macs, iPhones, and iPads do), Safari renders the full wide-gamut image.
  4. If the user is on an older sRGB monitor, Safari automatically converts the P3 colors to the closest sRGB equivalents to prevent the image from looking washed out.

Supported Image Formats

Safari supports embedded Display-P3 profiles across all major modern web image formats, including:

  • JPEG
  • PNG
  • WebP
  • AVIF
  • HEIC

For optimal performance, ensure the "Embed Color Profile" option is checked when exporting assets, as stripping metadata during image compression will cause Safari to default back to rendering the image in standard sRGB.