Xcode 9 renders P3 PDF assets into SRGB

Question

I've spent hours in trying to figure this one out.

Goal

Display P3 PDF Asset in UIImageView (the PDF is 100% in P3 Color Space).

Issue

I'm creating a P3 PDF asset and adding into the Xcode. Within the Asset Catalog, the asset appears in the correct P3 color. When using the asset inside UIImageView and running on iPhone X ( physical device, supports P3 Color Space ), the asset showing is SRGB instead of P3.

---

Does anyone has information on how to resolve this issue?
Any help will be highly appreciated.
Roi

Yiyid

You should give some more information, e.g. how did you create the PDF asset and added to Xcode. – Accuracy

@GiacomoCatenazzi I used Sketch to create and and added it via asset catalog – Yiyid

sketchapp.com/docs/other/color-management Did you have "unmanaged" or with P3 profile? – Accuracy

@GiacomoCatenazzi P3 Profile, I wrote above also, I checked with multiple inspectors – Yiyid

@GiacomoCatenazzi Any chance you have a direction for the solution? – Yiyid

No. I'm not an expert on MacOS. How do you determine that in iPhone the image was rendered as RGB? (ultra saturated?). The problem is that somewhere (but you do not describe much) there is a missing colour profile (e.g. CGColourSpace on CGImage). Note: images on a PDF could have an other profile. Possibly there is a general setting for the app, about colour management (what you are doing it is not standard [so not a desired default], e.g. considering legacy app which know just sRGB fo UI). – Accuracy

Answer 1

Use PNG directly

You mention you suspect there is a PNG inside the PDF. I would recommend to use PNG directly without a wrapping PDF.

PDFs are rendered by Apple to PNG when they are deployed on a device. This rendering may apply a specific color profile (PDF and color management is a broad topic).

Also the rendering itself might not produce the results you are expecting, see e.g. https://bjango.com/articles/idontusepdfs/

16 bits per pixel (per channel)

Apple's Human Interface Guidelines state one has to use 16 bits per pixel and export images in .png format.

When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in .png format.

see here: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/#color-management

Finally, I'd like to mention just two more settings that you are probably already using:

Compression

In the attributes inspector for image assets you should choose 'Lossless'.

Gamut

Swicht Gamut to 'sRGB and Display P3' and then make sure your image is in a 'Display P3' slot in the .xcasset file.

Test with PNG export of Sketch

Taking a look at the chromaticity diagram, one can see that the P3 color space has a larger gamut for greenish colors.

Since I am not sure whether I can recognize the difference between the two color spaces, I have made the following experiment:

• inserted a artboard in Sketch
• created a green rectangle with the color #00FF00
• assigned under <File/Change Color Profile> the Display P3 color profile
• selected the rectangle and clicked Exported selected
• have chosen .png without interlacing

Then I did the very same but with sRGB ICE61966-2.1 profile.

I checked both .pngs in the ColorSync utility (can be found under /Applications/Utilities). Pressing the image info toolbar button one can see, that the correct ColorSync profiles are assigned.

In Affinity Photo I checked under <Document/Colour Format> the number of bits per channel. It was for both .pngs 8bit per channel, so I created two additional .pngs with 16bits per channel and named it accordingly.

Then I added the 4 .pngs to a .xcassets folder with the following settings:

• Compression: 'Lossless'
• Scale: 'Single Scale'
• Gamut: 'sRGB and Display P3'
• assigned the .pngs accordingly to the correct slot (either sRGP or Display P3).

Then I deployed to iPhone X.

Result: Actually I can see a difference between the green rectangles. The 'Display P3' do have indeed a more saturated green.

I exported the same thing to an old iPhone, where I can't spot any differences between the sRGB and Display P3 images.

I found it interesting that the 8-bit variant directly from Sketch also works, so 16 bits per channel doesn't seem to be a hard requirement.

Pearle

Hey Stephan! Thank you for your answer! Do you happen to know if Sketch color profiling might be the issue? (I'm exporting the asset via Sketch) – Yiyid

Good question. I don't know, but I just saw that Sketch offers a trial version. I will try later today if I can find out more. – Pearle

Perfect. Can't wait for your insights. Thank you! – Yiyid

Updated the answer with Test with PNG export of Sketch. Is that what you're looking for? – Pearle

Hey Stephan! That's amazing that you went that deep to check it. So basically the embedded 8 bits property inside Sketch is basically working for us. So I'm wondering if the issue with the PDF is Apple fault or Sketch fault... Either way, at least we have a safe way to show assets in the correct color space (which sometimes it's critical product wise). Thank you again! I'll still try to understand if it'ls possible to convert maybe the PDF into color space which make xCode render it correctly (removing the need for 1x,2x,3x assets) etc' – Yiyid

Let's try it. Quick question: If I select the rectangle in Sketch and click on 'Export Selected...' in the lower right of the window, I just get the option to export .png. How do I export PDF instead? – Pearle

You don't have a drop down which gives you the option to switch type? – Yiyid

Found it, I had to scroll down the inspector to the bottom^^. So exported green rectangle also as PDF. Checked color profile in Affinity designer (it is Display P3). I've created a small zip with the Xcode project and the Sketch file I used for testing: software7.biz/jkfughgtsjghi/ShowP3ColorProfile.zip. On the left the two sRGB images (8bit and 16bit) - on the right the two Display P3 .pngs and the Display P3 PDF at the bottom. PDF also looks good when deployed to iPhone X, at least I can't see a difference to the .pngs. – Pearle

Glad you found it! So basically you say Sketch does render PDF in P3 format? Or I missed understood you? (Left the computer at the office; we'll download it tomorrow) – Yiyid

Yes, the green rectangle (0x00ff00 in Display P3 color space) exported as a PDF from Sketch correctly shows a much more saturated green than the sRGB counterparts on iPhone X. From my point of view it works. I'm looking forward to your test. Let me know. – Pearle

Hey Buddy! Have many insights about the issue I'd like to share with you. Altho I found an issue which I can't resolve, no matter what I try. I tried to create a P3 App Icon (1024x1024). Since morning I tried to create even a "stupid simple" icon showing basically a P3 color and a regular color: webkit.org/blog-files/color-gamut Recreated completely the P3 sample completely with Photoshop CC with 16 bit depth PNG and P3 color space, simply not showing it correctly (on iPhone X, 180x180 icon, physical device). Can't understand why as I did one by one as Apple instructed. – Yiyid

The wierdest thing is that on Spotlight (Siri suggestions) it shows the correct icon, but on the home screen it's plain SRGB (The shape is not visible, plain red). No idea what's going on :\ – Yiyid

Interesting. I made a try: So I used the display P3 color space .png, which when used in a UIImageView also shows correctly saturated P3 green as AppIcon in the P3 slot. It is actually displayed as sRGB on the device. So this doesn't seem to work. Hm, looks like a bug to me. – Pearle

Ah Apple, why would you do that? lol. Guess we'll wait for them to update the underlying mechanism.. – Yiyid

Answer 2

Did you select the gamut setting for your asset?

How did you verifiy that the image is in SRGB on the iPhone X?
Maybe the WWDC16 talk is somethink to check again: talk slides

Selfgoverned

Hey there. There is quiet a different in the colors between sRGB and P3. Even if i choose sRGB and P3 and placing P3 assets at the P3 boxes, still shows the same (sRGB). The only thing I'm suspecting is Sketch export it as 32 bit PNG and I think xCode needs 16 bit. But still so weird. – Yiyid

@RoiMulia How did you verifiy that the image is in SRGB on the iPhone X? – Selfgoverned

I visually see the difference between P3 on the computer to the sRGB on the iPhone X. When I render color using UIColor3PDisplay I'm seeing correct colors, but there is actual differences between the same image on my Macbook Pro (2017 touch bar, supports P3) and my iPhone X. – Yiyid