Getting the right colors in your iOS app
Getting the right colors in your iOS app
Tired of having a color in your application that is slightly different than the color from the designs? Tired of having inconsistency issues with your app's colors?
Tired of asking yourself questions like...
Why when I pick a color with the eyedropper tool on Photoshop and apply the exact RGB values in Xcode I don't get the same color?
Why it doesn't work either when I pick colors with DigitalColor Meter app?
Why if I take a screenshot of the iOS simulator and pick the color with an eyedropper tool I get different RGB values than what I used in Interface Builder?
Am I doing it wrong...?
(And the list of questions may go on and on...)
I know, I know how disgusting and frustrating it could be, believe me, I've been there... But, hey, stay still! There IS a solution. Keep calm and have a deep breath, because today you will learn the trick to get it working properly and obtain exactly the color you want, without hesitation, and it's pretty straightforward, I promise... But first, let's just talk a bit about colors and how Apple handle them, so that you know the 'why' of the trick.
Understanding color handling in Apple
Apple thinks it is much more important that colors look the same everywhere than that colors have the same RGB values everywhere.
Said that, you can apply a RGB combination which could not result in the same color among different devices. This happens depending on which color profile you are using.
I will not enter into detail here, but it's really interesting to have a further reading at: http://www.dpbestflow.org/color/color-space-and-color-profiles There you can find definitions about what color models, spaces and profiles are, in order to get a deeper understanding of the topic.
The important thing to know for now is that a color profile is a numerical model for representing a color in a color space (a color space is a way to represent a color, for example: RGB, CMYK, HSV, etc), and that some color profiles happen to be "device dependent", and others happen to be "device independent". What does it mean? It means that some of them will give you the same color among different devices (device independent) and some of them will change what the color look like depending on the device's characteristics (device dependent).
It's also interesting to know that when you take a screenshot, not only the RGB values for each pixel do get stored, but also complementary information about the device in which the screenshot was taken. This way Apple can make colors look the same among different devices by calculating different RGB combinations that fit each device in the best way to make those colors feel the same, accordingly to the device's characteristics and limitations.
Said all that, given a color space (let's say RGB for example) you will have multiple color profiles within it (Generic RGB, Adobe RGB, PAL/SECAM, etc), and therefore you will have multiple ways to get the same color but with different RGB combinations.
Some examples of RGB color profiles in Xcode are Adobe RGB, Apple RGB, Device RGB, Generic RGB, Wide Gamut RGB, etc. To see the whole list of color profiles you can expand it from your coloring tool from Xcode's Interface Builder.
So, when you have picked a RGB values combination in a profile and you change which profile to use, you will get the same color but with different RGB values, and this is the main problem that annoys developers so much when it comes to applying a color.
For example, Generic RGB (76, 153, 170) and Device RGB (91, 169, 185) are the same color but have different RGB values, as you can see. This is why you can end up having different colors even though you are using the exact RGB combination you picked up from somewhere else (Photoshop eyedropper, DeviceColor Meter app, etc).
Likewise, you will get a different color if you use the same RGB combination among different profiles:
In addition, Photoshop handles colors leveraging its own color space (a color space they invented), so it gets even worse when you try to pick them directly from Photoshop and apply them in Xcode.
All of this explains why when you use DigitalColor Meter to pick a color you may get different RGB values for the same color if you're at different displays (because extra information can be added to each pixel when you pick the color, depending if you're using a device-dependent color profile or a device-independent one). Said that, you can guess that we're going to use a device-independent one, such as sRGB (which stands for standard RGB), so no matter what display we will be at, we are going to get the same RGB values when it comes to pick a color.
Applying the magic!
Now that you understand the 'why' of the matter, let's talk about what the trick is.
It's not actually a trick, but it's rather a convention on how to avoid getting confused and being consistent when picking a color and applying it.
So, there is a way in which you can do these 2 steps and get exactly what you want.
To pick the color we will use Apple's DigitalColor Meter app that you can find in Spotlight. This app works with a few color profiles and does all the magic with the number conversions when it comes to calculate the RGB values of a pixel from the screen.
To apply the color we will use Xcode's Interface Builder, or, we can do it programmatically too.
So, here is the convention to pick and apply a color.
First, pick the color using DigitalColor Meter with Display in sRGB option selected and write down (in a paper or in your memory if you're good at it) the obtained RGB values.
Second, apply those RGB values in Xcode Interface Builder by choosing Generic RGB profile.
Optionally, you can do the step 2 programmatically instead of using Interface Builder, by just using:
UIColor *color = [UIColor colorWithRed: 76/255. green:153/255. blue:170/255. alpha:1];
This way you will get the color in Generic RGB profile (the default when it comes to code).
So, summing up the trick:
Pick the RGB values with DigitalColor Meter with Display in sRGB.
Apply those RGB values in Xcode IB (or by code) using Generic RGB.
That is it!
I hope this help you saving time and effort when it comes to solve color-related problems in your iOS apps as it did with me.
It's always a pleasure to sharing these kind of things. Credits to Gera, who was the one who discovered what the "pick and apply" correct profiles were.
For further reading you can visit these interesting articles: