expo: iOS: Splash screen background color does not match in-app background color

Still investigating but I’ve found a kind of workaround - if developing on MacOS 10.6+ there’s an app called ColorSync Utility. It has a Calculator tab where one can provide values from one profile and get them in another.

So, using @Dygerati example, he wants the launch background to be #440000 that is RGB(68, 0, 0). In the Calcuator, choose sRGB profile, 8-bit range, and type the RGB values. In the right column choose Generic RGB and there you have the desired colour (#330000 in this example, it still may differ slightly from the in-app one). All you need to do is convert this to hex and put as an attribute in iOS splash configuration.

I still haven’t found any online converter so you guys can use this workaround if you’re not using Mac. I’ll also still try to find an automatic way to have the colors set properly.

Hey there - @aalices has taken a look, and there is a discrepancy between the color profile being used by the native XIB file we’re generating (sRGB apparently) vs. what JS is using in your app. We don’t have a solution yet but I thought I’d update here with details about that diagnosis.

This is a pretty bad bug for splash screens. It really does make the app quite unprofessional.

Thanks for this thread - it helped me solve my problem. FWIW, for me it was enough to change the color profile in Xcode to sRGB:

We manually fixed the issue in our detached iOS app by simply using the color picker in Xcode to select the background color from our image. I noticed this resulted in the color space changing from “calibratedRGB” to “sRGB”. Perhaps this might help in figuring out a way to fix the issue? (re. comment from @terribleben above)

                     </constraints>
                 </imageView>
             </subviews>
-            <color key="backgroundColor" red="0.00392156862745098" green="0.6627450980392157" blue="0.9294117647058824" alpha="1" colorSpace="calibratedRGB"/>
+            <color key="backgroundColor" red="0.007847989909350872" green="0.66200798749923706" blue="0.92825180292129517" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
             <constraints>
                 <constraint firstAttribute="trailing" secondItem="Bsh-cT-K4l" secondAttribute="trailing" id="4Bz-Vy-RfD"/>
                 <constraint firstItem="Bsh-cT-K4l" firstAttribute="top" secondItem="OfY-5Y-tS4" secondAttribute="top" id="5FF-OI-m4s"/>

Also having issues using this conversion. I want the background to be “#4b2e83”, after the conversion it is “#3A1C70”. However, the color still doesn’t match and it seems like they both changed when using the converted color.

Currently my workaround is to make the splash screen png background transparent, and set the backgroundColor attribute to be the desired color.

I’m facing the same issue. Here’s my configuration in app.json:

"splash" : {
        "backgroundColor" : "#111111",
        "resizeMode" : "contain",
        "image" : "./assets/icons/splash_screen_ios.png"
},

its converting #111111 to #151515. using Sketch I found the desired color (sRGB profile, 8-bit range). its #0E0E0E. and now it’s working.