One of most exciting features on Xcode 9 is being able to add colors to an asset catalog, or as known as the .xcassets directory, alongside your images. This feature helps developers save time and avoid mistakes, by organizing project colors in a single location. Much cleaner! 🍸

Adding colors to an asset catalog

Adding colors to an asset catalog might be hard to discover. After selecting your .xcassets directory in Xcode, press the plus button on the bottom left and select “New Color Set”.

Make sure to name the color set from the Inspector panel to the right. Selecting the color object — by clicking the white rectangle in the middle — will reveal the color options, where you can enter color’s red, green, blue and alpha values.

Using asset catalog colors in Storyboards

Using asset catalog colors in a Storyboard or an Interface Builder file is pretty straightforward. All color fields, including view background colors, label text colors, should display the colors you defined in the asset catalog under the “Named Colors” section.

Using asset catalog colors in code

Using asset catalog colors in code is not so obvious, yet simple. Both UIColor on iOS and NSColor on macOS now have a convenience initializer in Swift to access these colors by name:

There are also Objective-C equivalent class methods, colorNamed: on both UIColor and NSColor .

⚠️ These methods are only available if you’re targeting iOS 11+ or macOS 10.13+, so you might need to stick to your existing color constants for a while.

Color literals are a great alternative to defining colors in code but sadly, named colors can’t be accessed through literals at the moment. Fingers crossed for the future!

Generate asset catalog colors from Zeplin

As designers already organize their color palettes on Zeplin projects, developers can now export them to Xcode with one click.

Select “Export to xcassets” from the project Styleguide and pick the .xcassets directory or the Xcode project you want to export to. Zeplin will populate the asset catalog, adding all the colors automatically! 🎩

You also have the option to go with named color code snippets, for the UIColor / NSColor extensions that Zeplin generates — make sure that your deployment target is iOS 11+ or macOS 10.13+ though:

Make sure to update your app and give Asset Catalog colors a go. We’re really enjoying it so far and looking forward to hearing what you all think.

Cheers! 👋

Zeplin is a collaboration tool for designers and developers that generates specs, assets and code snippets from designs, tailored for iOS, Android and Web.