How to get iOS storyboard to display background color as expected?

JohnHardmanJohnHardman GBUniversity mod

Cross-posting from Xamarin.Forms forum:

I'm trying to get my iOS splash screen looking right. It basically wants to be a centered image, with the background in the brand's color. The image itself contains the brand's color, as well as other colors.

When the app is run, there is a significant difference between the "brand" color in the image and the "brand" color of the surrounding space. The following is my LaunchScreen.storyboard . Any ideas why the difference in coloring? It's as if the background is being muted somehow.

Also, if I wanted to expand the image to fill the available space (whilst maintaining aspect ratio), what would I need to change?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="X5k-f2-b5h" launchScreen="YES">
        <plugIn identifier="" version="13772"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
        <!--View Controller-->
        <scene sceneID="gAE-YM-kbH">
                <viewController id="X5k-f2-b5h" sceneMemberID="viewController">
                        <viewControllerLayoutGuide type="top" id="492"/>
                        <viewControllerLayoutGuide type="bottom" id="493"/>
                    <view key="view" contentMode="scaleToFill" id="yd7-JS-zBw" userInteractionEnabled="NO" clearsContextBeforeDrawing="NO" autoresizesSubviews="NO">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="736"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="Icon-60.png" translatesAutoresizingMaskIntoConstraints="NO" id="23" clearsContextBeforeDrawing="NO" autoresizesSubviews="NO">
                                <rect key="frame" x="177" y="338" width="60" height="60"/>
                                <rect key="contentStretch" x="0.0" y="0.0" width="0.0" height="0.0"/>
                                <accessibility key="accessibilityConfiguration">
                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
                                <color key="backgroundColor" colorSpace="calibratedRGB" red="0.29607843137254902" green="0.41764705882352939" blue="0.30196078431372548" alpha="1"/>
                        <color key="backgroundColor" customColorSpace="sRGB" colorSpace="calibratedRGB" red="0.29607843137254902" green="0.41764705882352939" blue="0.30196078431372548" alpha="1"/>
                            <constraint firstItem="23" firstAttribute="centerY" secondItem="yd7-JS-zBw" secondAttribute="centerY" id="39"/>
                            <constraint firstItem="23" firstAttribute="centerX" secondItem="yd7-JS-zBw" secondAttribute="centerX" id="41"/>
                        <rect key="contentStretch" x="0" y="0" width="0" height="0"/>
                        <accessibility key="accessibilityConfiguration">
                            <accessibilityTraits key="traits" notEnabled="YES" image="YES"/>
                <placeholder placeholderIdentifier="IBFirstResponder" id="XAI-xm-WK6" userLabel="First Responder" sceneMemberID="firstResponder"/>
            <point key="canvasLocation" x="349" y="339"/>
        <image name="Icon-60.png" width="60" height="60"/>
    <color key="tintColor" colorSpace="calibratedRGB" red="0.29607843137254902" green="0.41764705882352939" blue="0.30196078431372548" alpha="1"/>


  • DarshanJSDarshanJS USMember ✭✭✭✭

    Check this

  • JohnHardmanJohnHardman GBUniversity mod
    edited January 2018

    Thanks @DarshanJS . Unfortunately, that didn't cover the problem I am hitting.

    I could change the image that I am using to have transparent pixels where it currently has the brand color, but I'd rather understand what is happening and solve it without tweaking the image.

  • masandrewmasandrew Member ✭✭

    I also am having the same issue, anyone have a solution?

  • JGoldbergerJGoldberger USMember, Forum Administrator, Xamarin Team, University Xamurai


    Cross platform color matching is notoriously difficult. Even on one platform but different devices, screen types etc, the same 203, 24, 72 decimal rgb values will look different on different devices, or on the same devices (laptops) running different OSs. Or same device but different monitors. In my experience when I used to do more photography work, opening a picture in Adobe Photoshop might look slightly different than opening the same exact picture file in another program. One might interpret the picture as being in one color space, while the other assumes a different color space for the picture.

    If you absolutely need the logo color around the image to match the logo color in the image, I would recommend making the logo color in the image transparent. Then find the best match for your logo color on the device(s) that you are supporting.

  • JohnHardmanJohnHardman GBUniversity mod

    @JGoldberger said:
    I would recommend making the logo color in the image transparent

    Yes, I went for transparent a while back to get the desired result. More than anything, I'd like to understand why the colors were being changed. I suspect that a tint is being applied, but if that's the case, I don't know why/how and that messes with my brain ;-)

    Thanks again.

Sign In or Register to comment.