inaka

Latest blog entries

/
The Art of Writing a Blogpost

The Art of Writing a Blogpost

Mar 09 2017 : Matias Vera

/
SpellingCI: No more spelling mistakes in your markdown flies!

Feb 14 2017 : Felipe Ripoll

/
Fast reverse geocoding with offline-geocoder

Do you need a blazing fast reverse geocoder? Enter offline-geocoder!

Jan 18 2017 : Roberto Romero

/
Using Jayme to connect to the new MongooseIM REST services

MongooseIM has RESTful services!! Here I show how you can use them in an iOS application.

Dec 13 2016 : Sergio Abraham

/
20 Questions, or Maybe a Few More

20 Questions, or Maybe a Few More

Nov 16 2016 : Stephanie Goldner

/
The Power of Meeting People

Because conferences and meetups are not just about the technical stuff.

Nov 01 2016 : Pablo Villar

/
Finding the right partner for your app build

Sharing some light on how it is to partner with us.

Oct 27 2016 : Inaka

/
Just Play my Sound

How to easily play a sound in Android

Oct 25 2016 : Giaquinta Emiliano

/
Opening our Guidelines to the World

We're publishing our work guidelines for the world to see.

Oct 13 2016 : Brujo Benavides

/
Using NIFs: the easy way

Using niffy to simplify working with NIFs on Erlang

Oct 05 2016 : Hernan Rivas Acosta

/
Function Naming In Swift 3

How to write clear function signatures, yet expressive, while following Swift 3 API design guidelines.

Sep 16 2016 : Pablo Villar

/
Jenkins automated tests for Rails

How to automatically trigger rails tests with a Jenkins job

Sep 14 2016 : Demian Sciessere

/
Erlang REST Server Stack

A description of our usual stack for building REST servers in Erlang

Sep 06 2016 : Brujo Benavides

/
Replacing JSON when talking to Erlang

Using Erlang's External Term Format

Aug 17 2016 : Hernan Rivas Acosta

/
Gadget + Lewis = Android Lint CI

Integrating our Android linter with Github's pull requests

Aug 04 2016 : Fernando Ramirez and Euen Lopez

/
Passwordless login with phoenix

Introducing how to implement passwordless login with phoenix framework

Jul 27 2016 : Thiago Borges

/
Beam Olympics

Our newest game to test your Beam Skills

Jul 14 2016 : Brujo Benavides

/
Otec

Three Open Source Projects, one App

Jun 28 2016 : Andrés Gerace

/
CredoCI

Running credo checks for elixir code on your github pull requests

Jun 16 2016 : Alejandro Mataloni

/
Thoughts on rebar3

Thoughts on rebar3

Jun 08 2016 : Hernán Rivas Acosta

/
See all Inaka's blog posts >>

/
Getting the right colors in your iOS app

A photo of Pablo Villar wrote this on September 05, 2014 under colors, inaka, ios, xcode .

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.

Color profiles list

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

Comparison with same color, different RGB

Likewise, you will get a different color if you use the same RGB combination among different profiles:

Comparison with different color, same RGB

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.

Picking color

Second, apply those RGB values in Xcode Interface Builder by choosing Generic RGB profile.

Applying color

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:

  1. Pick the RGB values with DigitalColor Meter with Display in sRGB.

  2. 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:

https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/csintro/csintro_intro/csintro_intro.html

http://www.dpbestflow.org/color/color-space-and-color-profiles

http://stackoverflow.com/questions/14578759/wrong-color-in-interface-builder

A photo of

Pablo Villar

iOS Developer