Color spaces

Display P3

A wide gamut implementation of the RGB color model used by modern retina displays.

Example

Modern devices like smartphones, tablets, and retina screens use Display-P3. It provides a much wider collection of color, which are more colorful than sRGB.

Not supported in all browsers or displays. Unsupported browsers will display a gray circle. If color appears the same, you may not be using a wide-gamut display.

CSS annotation:

  • color(display-p3 1 1 1)
color(display-p3 0.88 0.42 0.22)
sRGB fallback

Try to match the Display-P3 color as close as you can for an optically enhanced fallback for your original color.

rgb(242,99,34)

How it affects UI design

Display-P3 is not supported by all browsers. Always define a fallback sRGB color value.

Display-P3 has much more vibrant (chromatic) colors than sRGB. Do not directly convert Display-P3 values to sRGB for tones of a color, as they may appear much less chromatic than intended. Direct conversion is done by multiplying each Display-P3 channel by 255.

RGB color spaces are not perceptually uniform. Using these to mix tints, shades, or tones can be very difficult and yield unexpected results.

When trying to create perceptually uniform colors, use a color appearance model instead.

Sources:

  1. Display P3. International Color Consortium (ICC). https://www.color.org/chardata/rgb/DisplayP3.xalter
  2. DCI-P3. Wikipedia. https://en.wikipedia.org/wiki/DCI-P3