How to Get the Right Color in iOS: Detailed Instruction

29 May 2017
How to Get the Right Color in iOS: Detailed Instruction

I think anyone who has ever performed UI testing (especially on the iOS platform), has been 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 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.

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 have to be: sRGB IEC61966-2.1

Adobe Illustrator

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

Generally it have to be: sRGB IEC61966-2.1

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."

Second stage is set up correctly color values in the Xcode environment

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)

2. Input the target color value

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

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

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

Here is the list of the tools those I'm using:

iOS

Digital Color Meter

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. 

Windows

GIMP

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 a color profile info?

 

 

Windows

PicPick

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 have to be: sRGB IEC61966-2.1

Windows 10

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

Generally it have to be: sRGB IEC61966-2.1

Conclusion

No matter are you QA or Developer you always has to keep an eye on the right set up color profiles that is being 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

SEE ALSO: