iOS Colors Don't Match
Mar 19 2018

When Your iOS Colors Don’t Match in Storyboards vs Code

The iOS 10 SDK introduced a change that (if you missed it) could cause some serious confusion. The exact change was that, as of iOS 10 SDK, the UIColor init(red:green:blue:alpha:) initializer began using the extended sRGB color space. The confusion around this comes when your interface builder color picker is NOT setting colors according to this color space. If interface builder is setup to use sRGB and targeting iOS 10 and later, then you’re not going to run into this issue. But if it isn’t, this issue can cause some real headaches.

 

For more information about this change, see Apple Docs for UIColor under Color and Color Spaces.

For Example:

Imagine that you have a screen in your app that contains a UINavigationBar and two UIView objects, all of which are supposed to have the same orange background color. The nav bars color is getting set in code

UIColor(red: 255.0/255.0, green: 102.0/255.0, blue: 0.0/255.0, alpha: 1.0)

so that all nav bars in your app have the same color background. The two views background colors are set in your .storyboard file to the same RGB values.

Red: 255
Green: 102
Blue: 0

You run the app, only to find that the nav bar background color is not exactly the same as the buttons even though you set them both using the same RGB values. So what gives? You may begin playing with the nav bar settings because there are various modes on a UINavigationBar, such as isTranslucent and barStyle, which can effect the appearance of the color. After going down a long rabbit hole, you could still end up with different colors.

What’s Going On?

To avoid this kind of lost time, first ensure that the storyboard is setup to use the same color range as the UIColor init method employed. In our case, the init is using the sRGB color range, which is not something that is obvious. So by ensuring that the storyboard colors are using the same, we can resolve our issue. How do we do that? Below is an example where 4 views background colors are set differently.

iPhone 8 Color Variants

View One:

Set in code with

UIColor(red: 255.0/255.0, green: 102.0/255.0, blue: 0.0/255.0, alpha: 1.0)

View Two:

Set in storyboard file with color profile of Display P3.

Display P3

View Three:

Set in storyboard file with color profile of sRGB.

sRGB

View Four:

Set in storyboard file with color profile of Generic RGB.

GenericRGB

Views One and Three match, but the others are not the same. By ensuring that the value in the storyboard is set to the same color space (sRGB) you can ensure that the colors will match up. However, what if we actually want a color space other than sRGB? There are other init methods that we use on UIColor to handle those cases. Some examples are:

 

Device Gray Color Space:

UIColor.init(white:alpha:)

DisplayP3 Color Space:

UIColor.init(displayP3Red:green:blue:)

See Apple Docs for UIColor init methods to research the various options available.

Get App Development Help from Five Pack Creative

At Five Pack Creative, we specialize in mobile app development for all platforms, including iOS. If you have questions about your app, or need help launching it, contacting us today to learn how we can assist you!

0 Comments
Share Post
No Comments

Post a Comment