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.
Adobe Illustrator
Edit/Color settings (Shift+⌘/Ctrl+K).
Generally, it has 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."
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)
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 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
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 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 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
Windows 10
Settings/Display/Advanced display settings/Colour management/Advanced
Generally, it has to be: sRGB IEC61966-2.1
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.
