When dealing with custom colors in my apps, I always just make a UIColor Category (aka Extension in Swift), because I’ve found that to be a lot easier than having to punch in the color values in Interface Builder for everything. However, recently I learned that there is a very easy way to make a custom Color Palette that can be used in Interface Builder and shared across a team and even projects!

Create a Color Palette

To create a Color Palette, go to the Interface Building, and select the first view you need to change the background color for. This is where you can start creating a new Palette if your designer gave you a color guide:

Notice at the end there than you can switch to other Color sliders as well to get the needed format for each color.

Sharing

Your new Color Palette is now located in your Library -> Colors directory:

One thing to note is that your Library directory is not visible by default on the Mac. You’ll have to follow these instructions to make your hidden files visible on your Mac.

You can now share this file with your team, including your designer. Once they place it into their Mac’s Colors directory, they will see it! The cool part about this is the Color Palette will be now be visible from any other application, including Photoshop. In fact, you can get your designer to populate the palette from Photoshop, and then send it out to the team. As long as each person adds the most updated Color Palette to their Colors directory, you can now all use it from the Interface Builder!

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.

I made a small utility, which generates a category for the UIColor class and writes a CLR file from a list of colors in HEX format. So you can have a single access point to your colors both in code and in OS X Color Palette.

SwiftGen 0.7.5 just added support for `.clr` files! So you can now use SwiftGen to auto-generate enums representing all your colors extracted from those color palette files, and use them both in IB and via code! 🙂

swiftgen colors yourpalette.clr --output MyColors.swift

Ruben Rocco De Luca

Thanks for sharing

Skro

@natashatherobot:disqus I created my Color Palette, but I don’t have a Color folder on my Library, help please? Don’t know how to locate my palette. :/

Fred Adda

Very cool, it is a huge time saver. We LOVE you Natasha!

Gaurav Keshre

There is one more amazing feature of Xcode. You can use this colour pallets in code editor using “Color Literal” [See the screenshots]

Although, it’s always good to create color extension and name them in code but this feature if cool.

syon vikas

Can we edit added color? how ?

Pramit Tewari

This custom color palette is really helpful.
However, even if I add the .clr file in the project directory and commit, it needs to be installed seperately by each individual if they need to access the same.
Is there any way this can be automatically seen in the storyboard of other team members when they pull ?