Colors look faded in <ImageShader> compared to React Native's <Image>

[Hello1nside]

Hi everyone 👋

I'm using @shopify/react-native-skia to render JPEG photos in my app, but I'm noticing a significant difference in color rendering between Skia and React Native.

When I render the same image using React Native's built-in , the colors look correct — vibrant and true to the original. However, when I render it using Skia’s , the result looks washed out or desaturated, especially in brighter and more colorful areas.

I'm loading images with expo-image-picker, and they do contain EXIF metadata. For example, the ColorSpace tag is 65535 (which I understand means "uncalibrated").

I assume the issue might be related to Skia not handling embedded ICC profiles or gamma correction. React Native seems to do this automatically, while Skia may not.

My questions:

• Does ImageShader support embedded color profiles (e.g. sRGB, Display P3)?
• Is gamma correction applied automatically when rendering images?
• Is it recommended to wrap every ImageShader in a custom shader that applies gamma correction manually (e.g. pow(color.rgb, vec3(1.0 / 2.2)))?
• Are there any known workarounds or plans to support color management in the future?

Visual Example:
Here’s a visual comparison of how the same image looks in React Native vs Skia:
🔗 https://fex.net/uk/s/a394nvx

Any advice or clarification would be greatly appreciated 🙏

Thanks in advance!

[wcandillon]

Hello, Skia shader don't have such options but rather the Surface on which we draw the image on. I assume you're having the same issue with a regular image display? Right now everything is sRGB, I will check if we can configure the canvas to support p3. Kind regards, William

…

On Sun, May 18, 2025 at 4:14 PM Yevhenii Mudrahel ***@***.***> wrote: Hi everyone 👋 I'm using @shopify/react-native-skia to render JPEG photos in my app, but I'm noticing a significant difference in color rendering between Skia and React Native. When I render the same image using React Native's built-in , the colors look correct — vibrant and true to the original. However, when I render it using Skia’s , the result looks washed out or desaturated, especially in brighter and more colorful areas. I'm loading images with expo-image-picker, and they do contain EXIF metadata. For example, the ColorSpace tag is 65535 (which I understand means "uncalibrated"). I assume the issue might be related to Skia not handling embedded ICC profiles or gamma correction. React Native seems to do this automatically, while Skia may not. My questions: - Does ImageShader support embedded color profiles (e.g. sRGB, Display P3)? - Is gamma correction applied automatically when rendering images? - Is it recommended to wrap every ImageShader in a custom shader that applies gamma correction manually (e.g. pow(color.rgb, vec3(1.0 / 2.2)))? - Are there any known workarounds or plans to support color management in the future? Visual Example: Here’s a visual comparison of how the same image looks in React Native vs Skia: 🔗 https://fex.net/uk/s/a394nvx Any advice or clarification would be greatly appreciated 🙏 Thanks in advance! — Reply to this email directly, view it on GitHub <#3149>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVXRGBVSEI3ZCKSFDML27CIVNAVCNFSM6AAAAAB5L2VOIOVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZYGM2DEMJVG4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Hello1nside]

Thanks, William!

Yes, I tested both <ImageShader> and Skia's <Image />, and both produce the same desaturated result. In contrast, React Native’s <Image /> renders the same photo with vibrant, accurate colors.

The original image has a Display P3 profile (DCI-P3). I now understand the issue is that Skia surfaces are locked to sRGB, so those wide-gamut P3 colors get clipped, leading to a flatter look.

If there's any way to configure the canvas or surface to support P3, that would solve it perfectly. Happy to test if needed.

Thanks again!

[wcandillon]

Currently all Skia on-screen and offscreen surfaces are using rgba-8bit. I ran into this issue myself when trying to do something "funky" with skia textures. Once we support other format, we can add p3 color space as an option. I don't want to overpromise, but I think we can take care of this relatively in the short term.

…

On Mon, May 19, 2025 at 12:49 PM Yevhenii Mudrahel ***@***.***> wrote: Thanks, William! Yes, I tested both <ImageShader> and Skia's <Image />, and both produce the same desaturated result. In contrast, React Native’s <Image /> renders the same photo with vibrant, accurate colors. The original image has a Display P3 profile (DCI-P3). I now understand the issue is that Skia surfaces are locked to sRGB, so those wide-gamut P3 colors get clipped, leading to a flatter look. If there's any way to configure the canvas or surface to support P3, that would solve it perfectly. Happy to test if needed. Thanks again! — Reply to this email directly, view it on GitHub <#3149 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVUJPPYF7ZL4F7DYSQ327GZMPAVCNFSM6AAAAAB5L2VOIOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMJZGIZTKOI> . You are receiving this because you commented.Message ID: ***@***.*** com>

[Hello1nside]

Thanks, William!

I’m building a photo editing app (already live), and this issue actually came from users – they noticed colors looked off.

Would really appreciate a heads-up once P3 support is available.

[Hello1nside]

Hi @wcandillon,

Thanks for fixing this in v2.0.1! It works perfectly on-screen now!

However, I’m facing an issue with offscreen rendering. On-screen, the image renders with P3, but when I save it (using an offscreen surface), it’s saved in sRGB.

I don’t see a way to set P3 for offscreen rendering. Could you please clarify if this is currently possible, or if it’s a limitation/bug? If it’s not supported yet, is there a chance it could be added?

In our photo editing app, users see one set of colors in the app, but the saved photo looks slightly different. So matching them is really important for us.

Thanks a lot!

[wcandillon]

can you try if this PR helps? #3165 it should allow you to read the pixel data with a higher depth. However I am not sure if the Skia PNG encoding codecs supports, you will probably need to read the pixel data from Skia and then use your own PNG encoder

[Hello1nside]

Thanks a lot for the quick response and for the PR! This update with colorType could really help.
When do you plan to merge it?

Also, it would be great to have an option to select sRGB or P3 for both on-screen and offscreen surfaces. Right now, the canvas uses P3 by default on P3 displays, but offscreen is still sRGB – so the saved image doesn’t match the display.

Until there’s a way to export P3 correctly, it would help us keep things consistent if we could force on-screen rendering to sRGB too.

Thanks again for your support!

[wcandillon]

the PR would be useful in its current state, we can ship it, I was wondering if it would be enough for your use-case.

[Hello1nside]

It looks like passing colorType to MakeOffscreen might solve it, but I couldn’t fully test yet.
I tried the 16bit-texture branch locally but hit build issues in my React Native + Expo setup.
Would it be possible to ship the PR as a patch version on npm? That would help me test it properly without fighting local build issues.

Thanks a lot for your help!