How to define colors in XCodes' Interface Builder?

Question

I would like to copy colors between elements in the Interface Builder or define them using RGB values. For example, I'd like to copy the background color of a button to another button without duplicating the button.

Alternatively, entering exact RGB codes in Interface Builder would suffice; that way I can make sure my buttons have the exact same color.

Currently I only know how to do this programmatically, but surely there is a way to do it in Interface Builder?

score 15 · Answer 1 · edited Aug 13 '13 at 21:35

15

To copy a custom-defined color between different elements you should save it. To do this, first define the color in the Colors window (e.g. by entering RGB values into field as described in Vladimir's answer). Then simply drag from the top panel of the colors window where your resulting color is shown into one of the small square boxes at the bottom. It will be saved.

edited Aug 13 '13 at 21:35

Mark Amery

143,130
81
406
459

answered Aug 08 '11 at 10:27

M.Y.

1,105
1
11
30

1

Exactly what I was looking for. It so small I've missed it for years. – Nikola Lajic Feb 13 '13 at 09:31
4

can I name this color? In code I create a category on UIColor so that I can use our designer's style guide. He uses a few types of gray that may otherwise be hard to distinguish. Would be great if I could somehow name that saved color. – horseshoe7 Sep 22 '14 at 07:31
To give names to these colors, and the palettes, use this [answer](http://stackoverflow.com/questions/28501010/add-a-custom-color-palette-to-xcode-interface-builder) – Diego Freniche May 06 '15 at 15:42

score 11 · Accepted Answer · answered May 22 '10 at 20:09

11

To set RGB value in IB you should

Click on corresponding element in Inspector window to invoke "Colors" dialog (e.g. Background color, text color etc)
On the toolbar choose the "Sliders" icon
Choose "RGB Sliders" in combo box.

Now you should be able to set RGB values for the color.

Sorry, I don't know if it is possible to copy color values between different elements easily...

answered May 22 '10 at 20:09

Vladimir

170,431
36
387
313

2

this was too easy! i was looking for this option for so long and never found it, thank you very much! – favo May 22 '10 at 20:33
Ugh what a horrible interface. Thanks for the help though! – Meekohi Oct 08 '13 at 19:50
To copy colours easily between different elements, you can copy the hex code for the RGB values. – BountyBob Oct 13 '20 at 22:38

score 8 · Answer 3 · answered Jun 23 '16 at 11:49

8

I know it is late answer but it is possible create custom profile in Interface Builder.

First you need to Click on Color of any component in Utilities panel.

Then select 3rd tab from the top panel and Click on Settings icon on the right.

Then select the New option

After creating you can then rename the profile

Then click on the color picker and select a color from your color pallet

Lastly drag the picked image to upper window to save that color. You can also change the name of picked color.

And by repeating this you can add all your color needed for your project in this color pallet. Next you need to change color of component such as Button, Label you just need to select this color profile and select color. Hope it is helpful.

answered Jun 23 '16 at 11:49

kazi.munshimun

2,168
19
17

I approve of this answer. This was what I was looking for. – Jonny Jan 27 '17 at 08:05
1

What will happen if i change the color code, but want to keep the same name, will it reflect all over the project? – Bista Apr 10 '17 at 07:06
1

@Mr.Bista : Sorry for late reply. No it will not reflect all over the project by changing color code. – kazi.munshimun Jun 28 '17 at 09:07

score 5 · Answer 4 · edited May 23 '17 at 12:34

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.

enter image description here

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).

enter image description here

More info here, including how to match screenshots.

How to define colors in XCodes' Interface Builder?

4 Answers4

Linked