How to Get the Right Color in iOS_ Detailed Instruction - Lemberg Solutions - Banner
3 minutes

How to Get the Right Color in iOS: Detailed Instruction

Probably, anyone who has ever performed UI testing (especially on the iOS platform), has faced with a problem where the color that was defined off a screenshot with the help of some third party program, didn’t correspond to the actual color that was used in a particular design (the design image).

As proof, regarding what was just mentioned, you will see a screenshot provided by a developer, where we’ve elaborated upon the color-mismatch problem. Today, luckily we can find a plethora of articles that address this issue in various degrees of detail and how it can actually be resolved. Ergo, in order for you not to get too confused with an abundance of details, we’ve outlined a very straight-forward, step by step procedure to facilitate color checking. We highly recommend for you to take a closer look at it, without getting overwhelmed and delving too deep into the details.

Identify the color profile

The first stage is to identify the color profile in the design source files (psd, ai, sketch file)

Adobe Photoshop

Edit/Color settings (Shift+⌘/Ctrl+K).

Generally, it has to be: sRGB IEC61966-2.1.

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Adobe Illustrator

Edit/Color settings (Shift+⌘/Ctrl+K).

Generally, it has to be: sRGB IEC61966-2.1.

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Color in Sketch

"When we render to the screen we interpret those values using the color space of your monitor."

"When we export an image, we interpret our color values in the sRGB colorspace."

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Set up color values in the Xcode environment

The second stage is set up correctly color values in the Xcode environment. Here is how you can do this:

1. Open color palette in the Xcode interface builder and set up a color profile according to the design (in our case it is sRGB IEC61966-2.1 color profile)

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

2. Input the target color value

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

3. Change the sRGB IEC61966-2.1 color profile to the Generic RGB

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Color values will be automatically converted to the selected color profile. Now color will be displayed properly and according to the device dependent color profile of Apple's devices.

Check the color

The third stage is checking the color in different OS (Windows, macOS).

Here is the list of the tools which I use:

iOS

Digital Color Meter

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Very good tool for checking the color value with ability to switch between several color profiles. Although this app sometimes may displays the value with little bit deviation, that why I recommend to use the Xcode environment for converting the color values for various color profiles as it's described above. 

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Windows

GIMP

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

GIMP has an ability to identify the color profile and notifies the difference between workspace and screenshot color profiles if they are available. It is very useful in case where need to check color value from iPhone 7 screenshot

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

 

How to get a color profile info?

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

 

Windows

PicPick

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

PicPick doesn't have an option to check the color profile of the screenshot but it has nice color picker that can be using outside the app and as for me it is more than enough app for UI testing. As well, don't forget about your monitor witch display profile currently is using as it's also make an effect into process of getting color information.

macOS Sierra

System Preferences/Displays/Color

Generally, it has to be: sRGB IEC61966-2.1

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Windows 10

Settings/Display/Advanced display settings/Colour management/Advanced

Generally, it has to be: sRGB IEC61966-2.1

How to Get the Right Color in iOS: Detailed Instruction - Lemberg Solutions Blog

Conclusion

No matter whether you are QA or Developer you always have to keep an eye on the right set up color profiles that are in the development environments (ex. Xcode, Adobe Photoshop/Illustrator, Sketch even device profile in your PC) to increase a velocity of the development process and quality of the product in general. 

Hope you have found this article useful, don't forget to leave your comments below. If you have a project idea in mind, but don't know where to start, we're here to help you

Article Contents: