Some great UIColor resources

Posted by on Mar 6, 2011 in code | 3 Comments

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 Comments

  1. Christopher Pickslay
    September 28, 2011

    One more I forgot to mention: http://wafflesoftware.net/hexpicker/ is a great color picker that makes it easier to convert between hex and other color value formats.

    Reply
  2. Joe
    December 27, 2013

    Christopher, you might also find our UIColor Picker at http://iachieved.it/uicolorpicker.html useful – it doesn’t require installing any applications and is about as straightforward as it gets! Obligatory blog reference http://dev.iachieved.it/iachievedit/?p=158.

    Reply

Leave a Reply