Some great UIColor resources

I’ve recently come across some nice resources for working with UIColors.

Developer Color Picker

Developer Color Picker screenshotDeveloper Color Picker is a color picker built for, you guessed it, Objective-C developers. Just install it in ~/Library/ColorPickers and it will appear in any application when you pull up the color picker. You can switch between RGB and HSB sliders (or just find the color in one of your other pickers), then click the Copy button to copy a snippet for that color to your clipboard. Depending what format you choose, the snippet can be one of several Objective-C formats:

// NSColor RGB calibrated
[NSColor colorWithCalibratedRed:0.405 green:0.344 blue:0.786 alpha:1.000]
// NSColor RGB device calibrated
[NSColor colorWithDeviceRed:0.405 green:0.344 blue:0.786 alpha:1.000]
// NSColor HSB calibrated

[NSColor colorWithCalibratedHue:0.690 saturation:0.563 brightness:0.786 alpha:1.000]
// NSColor HSB calibrated
[NSColor colorWithDeviceHue:0.690 saturation:0.563 brightness:0.786 alpha:1.000]
// UIColor RGB
[UIColor colorWithRed:0.405 green:0.344 blue:0.786 alpha:1.000]
// UIColor HSB
[UIColor colorWithHue:0.690 saturation:0.563 brightness:0.786 alpha:1.000]
// CGColor
CGColorCreateGenericRGB(0.405, 0.344, 0.786, 1.000)

Or, for CSS:

/* Hex */
#6758c8
/* RGB */
rgb(103, 88, 200)
/* HSL */

hsl(248, 51%, 56%)

Picker.app

Picker screenshotPicker is an app that puts your color pickers (including Developer Color Picker) in your menu bar all the time. If you work with colors a lot, it’s nice for quick access to pickers without having to open a graphics program.


Tools for working with designers

Finally, a couple of shortcuts I use when working with designers.

If your designer gives you hex color values, this is a useful macro that allows you to use them directly rather than converting to HSB or RGB first.

// example usage: [view setBackgroundColor:UIColorFromHex(0x6758c8)];
#define UIColorFromHex(hexValue) [UIColor colorWithRed:((float)((hexValue & 0xFF0000) >> 16))/255.0 green:((float)((hexValue & 0xFF00) >> 8))/255.0 blue:((float)(hexValue & 0xFF))/255.0 alpha:1.0]

Of course, you can use Developer Color Picker to quickly convert the hex value to a UIColor declaration, but I find this method more direct when we’re experimenting and changing colors frequently.

If your designer gives you RGB values, it’s nice to leave the 8-bit values in the code and divide by 255.0 to get the decimal values for the UIColor factory method:

// rgb(103,88,200) is easier to recognize in:
[UIColor colorWithRed:103/255.0 green:88/255.0 blue:200/255.0 alpha:1.0]

// than:
[UIColor colorWithRed:0.405 green:0.344 blue:0.786 alpha:1.0]

Alternatively, you can define a macro to do the same:

// example usage: [view setBackgroundColor:UIColorFromRGB(103,88,200)];
#define UIColorFromRGB(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.0]

3 thoughts on “Some great UIColor resources

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>