An eye-catching icon or splash of color can focus attention and help people locate the right information inside your app. Consider designing those assets in the Display P3 color space: They’ll look richer and more vibrant on any device with a wide color gamut display.

You can find wide color gamut Retina displays on most Macs, as well as iPhone, iPad, and Apple Watch. They bring more true-to-life colors and deep hues to the screen, not only making for excellent image and video viewing but also heightening people’s everyday app experience.

Use Display P3 assets in your app to amplify important elements of your interface: the colors of a VU meter in an audio app, for instance, or the redline in a rev counter inside your racing game.

If you display photography or video in your app, you should consider using Display P3 to help images stay true to the camera’s original capture. Shopping apps can help people choose the right item by showcasing the true color of a certain dress or pair of pants. You can also use Display P3 for your app icon to highlight colors and smooth out gradients.

Interested in exploring Display P3 for your assets? To get started, you’ll need to get your tools ready to work in that color space. We’ll show you how to design in Display P3 using two popular Mac apps: Adobe Photoshop and Sketch.

Note: Does your display support Display P3?

Your hardware tools are just as important as your software tools: Ensure that the device you use to create assets supports the Display P3 color space so that you can preview your designs accurately. That includes all iMacs with Retina displays, 2016 and later MacBook Pro, LG’s UltraFine 4K or 5K Display, and the Pro Display XDR.

Set up a new Display P3 canvas

Here’s how to configure your canvas to support Display P3.

Create a new Display P3 canvas in Photoshop

1. Open Adobe Photoshop on your Mac.
2. Click on the Create new button from the main interface. (You can also create new documents at any time by going to the toolbar and selecting File > New.)
3. Choose the dimensions and any other information you wish to customize for your canvas.
4. Under Color Mode, change your color depth from 8 to 16 bit.
5. Below Color Profile, select Display P3.
6. Select Create to begin designing in Display P3.

You can avoid manually creating a canvas for every new asset by saving your settings as a preset. Name your preset at the top of the screen, press the Save button, then press Save Preset.

Create a new Display P3 canvas in Sketch

1. Open Sketch on your Mac.
2. Create a new file.
3. Go to File > Change Color Profile (or use the keyboard command Shift-Command-K).
4. Select Display P3 as your Color Profile.
5. Choose Assign.

Use Sketch’s Color Profile settings to use Display P3 on your canvas.

Convert an existing sRGB image into P3

If you receive image assets from someone else, ensure those assets are converted to Display P3 directly from the RAW file, and not from sRGB, as some color information will be lost in the conversion.

If you must import an existing image in Photoshop, use Convert to Profile to preserve your design as much as possible. If you use Assign To Profile, that will take your existing colors and stretch them into the new color space, changing your design along the way.

In Sketch, after you’ve received your file, go to File > Change Color Profile to edit your Color Profile. Then select Convert.

Export your work in Display P3

Once you’re done creating your asset, you can preserve the Display P3 color space in any file you export.

How to export your work in Photoshop

Note: While there are multiple ways of creating assets from the work you do in Photoshop, like Generator or Export As, only using Save As will maintain your Display P3 color space and 16-bit color depth settings.

1. Navigate to the toolbar and select File > Save As… (or type Shift-Command-S).
2. Choose where you’d like to save your asset.
3. If needed, name your asset.
4. Under Format, select PNG.
5. Below Color, make sure the Embed Color Profile: Display P3 setting is checked.
6. Save your file.

Export your P3 assets in Photoshop using the Embed Color Profile option in the Save As screen.

How to export your work in Sketch

Sketch preserves your color profile upon export, allowing you to save your P3 work in the same manner as other assets.

1. In Sketch, go to the File menu.
2. Select the export option you need: Export or Export Current Selection.

Resources

Watch “Get started with Display P3” >

Watch “Optimizing app assets” >

Watch “Image and Graphic Best Practices” >

Learn more about color management >