[vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” text_align=”left” box_shadow_on_row=”no”][vc_column][vc_column_text]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1521208316455{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1521208581302{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

Red: 255
Green: 102
Blue: 0

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

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.

[/vc_column_text][vc_empty_space height=”5″ image_repeat=”no-repeat”][vc_column_text]

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.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_single_image image=”16519″ img_size=”large” alignment=”center” hover_animation=”no”][vc_empty_space height=”10″ image_repeat=”no-repeat”][vc_column_text]

View One:

Set in code with

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text css=”.vc_custom_1521209371089{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

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

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

View Two:

Set in storyboard file with color profile of Display P3.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_single_image image=”16528″ img_size=”large” alignment=”center” hover_animation=”no”][vc_empty_space height=”10″ image_repeat=”no-repeat”][vc_column_text]

View Three:

Set in storyboard file with color profile of sRGB.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_single_image image=”16531″ img_size=”large” alignment=”center” hover_animation=”no”][vc_empty_space height=”10″ image_repeat=”no-repeat”][vc_column_text]

View Four:

Set in storyboard file with color profile of Generic RGB.

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_single_image image=”16532″ img_size=”large” alignment=”center” hover_animation=”no”][vc_column_text]

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:

[/vc_column_text][vc_column_text css=”.vc_custom_1521213137378{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

UIColor.init(white:alpha:)

[/vc_column_text][vc_empty_space height=”15″ image_repeat=”no-repeat”][vc_column_text]

DisplayP3 Color Space:

[/vc_column_text][vc_column_text css=”.vc_custom_1521213306843{padding-top: 5px !important;padding-right: 5px !important;padding-bottom: 5px !important;padding-left: 5px !important;background-color: #efefef !important;}”]

UIColor.init(displayP3Red:green:blue:)

[/vc_column_text][vc_empty_space height=”20″ image_repeat=”no-repeat”][vc_column_text]

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

[/vc_column_text][vc_column_text]

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!

[/vc_column_text][/vc_column][/vc_row]

© Five Pack Creative 2008 - 2019

Let’s Talk

info@fivepackcreative.com

(972) 377-0023

Frisco, TX  |  Tulsa, OK  |  Wayne City, IL

© Five Pack Creative 2008 - 2019

Let’s Talk

info@fivepackcreative.com

(972) 377-0023

Frisco, TX  |  Tulsa, OK  |  Wayne City, IL