XCode Tip: Color Palette

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:

Getting the RGB Values

If you do need the RGB Color values for your code, just open up your Color Palette -> Select the Color you need RGB for -> Switch to the RGB Sliders tab to view the RGB values:

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:

Colors Path

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 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • nice 🙂 you can add a power picker to the mix, like:

    http://bjango.com/mac/skalacolor/
    http://couleursapp.com

  • blwinters

    Very helpful. Thank you.

  • Joshua Heald

    Thanks for sharing this, it’ll be super helpful in our projects and mean that we can make our interface builder representations look accurate without wasting a load of time.

    Have you had to do an app-wide change of any colours defined in this way yet? Any tips for how we can minimise the pain of that if you have?

    • I like to to have UIColor extension where I define my own colors for the app. That way it’ll be easy to search through Xcode if you’re replacing a color. Hope that helps!

      • Ivan Ruiz Monjo

        @natashatherobot:disqus so when you create a UIColor extension, how do you use that colors from IB ?

      • Silvan

        It would be awesome if there was a way to generate a color palette from a UIColor category and keep both in sync somehow.

  • Roman Churkin

    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.

    https://github.com/RedMadRobot/RMRColorTools-iOS

    Just add new Run Script Build Phase to your target and it will begin to refresh category+clr at every build.

    Also, you can exclude UIColor category from repo, and only store your txt colors list in resources directory.

  • SmallSmallCoder

    Thanks for sharing.

  • Ben Coffman

    Natasha is my favorite coder EVER!

  • Paul Bruneau

    This is cool, but what happens to all your IB elements that are the color of “Cupcake Sprinkles” when your designer changes the color of “Cupcake Sprinkles”?

  • 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!