Tuesday, January 20, 2009

Table View Color

Many of Apple's iPhone applications use a slate-blue color to denote non-editable text in a table view. You can see an example of this in the screenshot below from the Contact application. The text that tells you to "Add New Phone" here is the color I'm talking about:


Apple doesn't have a class method for getting this color, which is odd, since they do provide class methods for most commonly used system colors. You'd think, with how strictly they're enforcing the HIG lately, that they would. But they don't.

Anyway, you may know this, but in case you didn't (paging Captain Obvious), in the /Applications/Utilities/ folder on your Mac, there is a program called DigitalColor Meter, and it will give you the color value for any pixel on the screen. I used this to grab the correct RGB values from the Contacts application running in the simulator, which showed the RGB values for that blue color is:
Red:   0.243
Green: 0.306
Blue: 0.435
or if you prefer it in 8-bit designation:
Red:    81
Green: 102
Blue: 145
If you want to add this method to the More Colors Category I posted a few months back, the method would look like this:

+(id)tableCellNonEditableTextColor {vendColor(81, 102, 145);}

Or, you can just create it like this:

UIColor *thatTableTextColor = [UIColor colorWithRed:0.243 green:0.306 blue:0.435 alpha:1.0];




13 comments:

PJ Cabrera said...
This comment has been removed by the author.
PJ Cabrera said...

Thanks for the helpful suggestion. Your UIColor categories and OpenGL ES articles were already of great help!

Jason said...

Another way: [[UIButton buttonWithType:UIButtonTypeRoundedRect] titleColorForState:UIControlStateNormal]

Jeff LaMarche said...

Jason:

That's an interesting approach. Unfortunately, it's wasteful of memory - you're allocating a button you don't need, and sticking it in the autorelease pool. Doing that once wouldn't be a big deal, in the scheme of things, but if you do it a lot (like for every cell in a table), that lost memory and autorelease pool space could add up.

If you're doing it that way, make sure to grab the color just once and save it in an instance variable.

Jason said...

Yeah, it's definitely the lazy way of doing it. :)

Eitan said...

I use Pixie for grabbing screen pixel colors. I like the fact it's coping the NSColor definition to the clipboard, and you just need to paste it in your code. For that check the option Click locked view copies color to pasteboard from Pixie Preferences.
Pixie is installed with XCode in Developer/Applications/Graphics Tools

Thanks a lot for this GREAT blog! First time in the morning always checking it ;-)

David Avraamides said...

Jeff,

I'm a bit confused about the color values you have listed there. Isn't (0.243, 0.306, 0.435) equivalent to (62, 78, 111) and not (81, 102, 145)?

>>> map(lambda x: round(x * 255.0), [0.243, 0.306, 0.435])
[62.0, 78.0, 111.0]

Jeff LaMarche said...

David:

I didn't convert the values, I used DigitalColor Meter's modes, and perhaps I was on a slightly different pixel? The anti-aliasing makes it hard to get an exact color.

Ian said...

Thanks for this post - I spent a while searching the API's for some system default setting without joy before finding this post.

I think

[UIColor colorWithRed:0.322 green:0.400 blue:0.569 alpha:1.0]

might be closer? I'm sure it must be possible to find the exact value programatically, but I'm not sure anyone at Apple is checking that closely!

Dennis said...

I'm running into this as well, and the way I found out what the color values should be is by using the UITableViewCellStyleValue1 in a UITableViewCell and then programmatically getting the color for the detailTextLabel like this:

NSLog(@"color = %@", cell.detailTextLabel.textColor);

That gave me the following:

color = UIDeviceRGBColorSpace 0.22 0.33 0.53 1

that is yet another set of values than what's been listed here, but it should be exactly what Apple is using as opposed to values that may have been color corrected on the Mac or adjusted due to anti-aliasing.

danhvidding said...

Thx, I was able to find the RGB colors by creating that style of cell (UITableViewCellStyleValue2) and grabbing the font and the color, then logging the color. I was confused as to why the numbers were decimals though so your article made me realize that these are a different bit interpretation.

Anyway, do you have any method of finding the font size for the blue text in the contacts app? I tried my same method, but the font.pointSize is always returning zeroes. I'm trying to eyeball it but it would be nice to know for sure.

Edwin said...

scrub m65 kamagra attorney lawyer body scrub field jacket lovegra marijuana attorney injury lawyer

h4ns said...

What youre saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say.

Arsenal vs Huddersfield Town live streaming
Arsenal vs Huddersfield Town live streaming
Wolverhampton Wanderers vs Stoke City Live Streaming
Wolverhampton Wanderers vs Stoke City Live Streaming
Notts County vs Manchester City Live Streaming
Notts County vs Manchester City Live Streaming
Bologna vs AS Roma Live Streaming
Bologna vs AS Roma Live Streaming
Juventus vs Udinese Live Streaming
Juventus vs Udinese Live Streaming
Napoli vs Sampdoria Live Streaming
Napoli vs Sampdoria Live Streaming
Fulham vs Tottenham Hotspur Live Streaming
Fulham vs Tottenham Hotspur Live Streaming
AS Monaco vs Marseille Live Streaming
AS Monaco vs Marseille Live Streaming
Alajuelense vs Perez Zeledon Live Streaming
Alajuelense vs Perez Zeledon Live Streaming
Technology News | News Today | Live Streaming TV Channels