Working with Hex Colors

When you have to design an iphone app the client often give you hex code colors to match the graphics or his graphics guidelines.

But in the iPhone all you can set is a level of red, green, and blue between 0 and 1. And transformation those Hex value can be a painfull. You can always open an image editing software like photoshop and find the color picker the RGB values on 255. All you have to do is divide this value by 255 to bring it to a scale beetween 0 and 1.

editorPicker

This process is too long and you can’t afford loosing time in this kind of stuff! So here are the solutions to do it faster.

  • Programmaticaly

You have to add this simple macro

#define UIColorFromRGB(rgbValue) [UIColor \
colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 \
green:((float)((rgbValue & 0xFF00) >> 8))/255.0 \
blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

And here is how you use it for the #FF3245 color, simply replace the # by a 0x

UIColor *myHexColor =  UIColorFromRGB(0xFF3245);
  • With Color Pickers

Wafflesoftware created a custom color picker that understand HEX color codes. To install it you juste have to put it in this folder userHome/Library/ColorPickers if it doesn’t exist create it.

Now the color is selected but you can’t use it in your code, you stil don’t know the RGB values that’s where a second color picker comes in.Panic created another color picker that generates this code for you. To install it, put it in the same folder.

With this two pickers you can now easily transform an HEX color code in a UIColor object.

WafflesoftwarePicker PanicPicker

Just clic on copy with declaration and here is what you have

UIColor *aColor = [UIColor colorWithRed:1.000 green:0.196 blue:0.271 alpha:1.000];

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: