How do I enter RGB values into Interface Builder?

Question

How can I enter RGB or Hex color values for backgrounds in Interface Builder? I can select predefined colors but I would like to manually enter in RGB values. Where can I do this?

Steve

Answer 1

Click on the color slider icon, and then choose "RGB Sliders" from the drop-down list.

You can also use the magnifying-glass as a color picker to pick up an exact color from anywhere on the screen; also see @ken's excellent comment below clarifying how colorspaces work with the magnifying glass.

Johansen

Thanks for the tip! Random question, what software did you use to write over that screenshot? Nice addition. – Steve

Actually, be careful with the magnifying glass. Just component numbers do not spec a color, you also need to know the colorspace. It's like string encodings. 65 is the ASCII encoding of A. The colorspace with which to encode/decode the components is in the little dropdown to the left of "RGB" sliders above. The "Generic RGB" colorspace corresponds to colors made with +[NSColor colorWithCalibratedRed:green:blue:alpha:]. If you use the magnifying glass, the components will be given with respect to "device" space which means the current screen. This is not appropriate. Select generic after. – Feudist

Oops, this question is for the iPhone. The iPhone isn't colormatched. sRGB is probably the best approximation of its screen, so if you want to have component numbers appropriate for use with UIColor, select sRGB as the colorspace. – Feudist

I used a Wacom Bamboo Fun writing tablet to write on the screenshot in Photoshop (Gimp works just as well for this). Took the screenshot with command-shift-4, then space and clicked on the window. – Johansen

Has anyone experienced this: When I try to move the color sliders... they just pop back to their old position. (Everything works find if I type the values in directly, though.) – Airbrush

I can't reproduce that behavior, Bonnie, although I've tried. I'm running IB 3.2.2. As a guess of how to deal with it, you could try just clicking directly on the destination point in the slider, instead of dragging. – Johansen

but you cannot enter here HEX values....really its not possible in the Interface builder to use HEX colors?? – Dullard

Thanks for this!!! Now I know why the colors rendered using Colors picker and [UIColor ...] in code. It's the COLOR SPACE!!! Thanks a lot @Ken! Now I'mm using Apple RGB as the color space. I think it is the corresponding color space for UIColor. Am I correct? – Diabolize

Apple couldn't make it any harder . I'm sure they've tried – Heyerdahl

@Diabolize It's not. Adobe created the Apple RGB profile based on the classic Apple 13" RGB monitor. – Trail

Answer 2

Although Tyler's response answers the question, you may encounter issues using the picker because it uses the display's colorspace (as clarified by Ken).

If you want to match RGB values between Photoshop and Xcode exactly (without conversion between colorspaces) then you need to save your images in generic RGB and enter any dropper values using the generic RGB colorspace.

• When you choose "Save for Web & Devices" from Photoshop, uncheck the "Convert to sRGB" box.

• In Xcode, click the colorspace popup in the color picker and choose "Generic RGB", then enter the red, green and blue values from Photoshop, NOT THE HEX VALUE as this reverts back to the sRGB colorspace for some reason (be careful not to tab to the hex field either, as that also changes the colorspace to sRGB).

More info here, including how to match screenshots.

Basuto

The fact that the hex field does not stay in the colorspace you selected is a terrible feature. – Issus

OMG thanks so much for this. It works the exact same, maddening way in the Xamarin.iOS designer. You have to be super-careful to only type in the R G and B boxes and whatever you do, don't tab because you might tab to the Hex box, which resets to sRGB and you have to start all over again. – Sherbet

-1 Bad advice. If you use GenericRGB as working space and don't convert to sRGB when exporting, then your RGB values will match, but your colors will not. Thats why you have to use strange tricks to make your screenshots match. If your RGB values must really match, you need to use sRGB as working space. Otherwise you can just convert to sRGB at export. Including a color profile does not help because iOS ignores color profiles (for assets). – Fatuitous

Answer 3

It sounds like you're unfamiliar with the Mac OS X color panel. Click the tabs along the top of the color panel window to choose other pickers. Pickers are also plugins, so it's possible to add new UI for color selection. See, for example, developer color picker.

Feudist

Answer 4

I know this is an old question, but I needed to find out the answer to this very same question today and it got me on the right track. The color picker from panic.com did install correctly but the hexadecimal option from the drop down menu in the color picker always sets it to RGB. So no good. Instead I found this:

http://wafflesoftware.net/hexpicker/

That shows the hexadecimal value and it works fully on Xcode 5.0.1 and Mavericks.

Dandify

Answer 5

Check the above snap, in that go to Colors Tray, select the second button(RGB sliders(rectangle image) - which is placed next to circle on the top of the tray). In that you can enter RGB values.

Propman