creating reusable and shareable color palettes

Color harmony is one of the pillars of UI element consistency, which is essential both when creating your own project and when working on client applications in Xcode. And Xcode allows us to create, manage, share, and reuse color sets. In this article, you’ll learn how to create color schemes and reuse them in other Xcode projects.

Having a complete color palette that can be shared and reused across multiple Xcode projects improves efficiency and simplifies your workflow as you reduce the time it takes to find the right colors you need to work on your projects. It also ensures that the colors used in your applications and projects are consistent.

Traditionally, developers and designers create color palettes using tools such as Adobe Illustrator, Sketch, and Figma. However, Swift developers can also create and manipulate these color sets directly inside Xcode using the built-in color picker. In this article, you will learn how to create a color set called DuoChromato later use it to customize the visual part Stream Chat SwiftUI example. The techniques, tips, and tricks you’ll find in this article will help you create consistent color schemes for your future Xcode projects.

Beginning of work

In order to follow the steps in this guide, you will need to install Xcode on your Mac first. If you don’t already have Xcode, you can download and install it from Mac App Store. Download the finished color scheme from GitHub or create an empty SwiftUI project in Xcode and let’s get started.

Launch Xcode, create a new SwiftUI project and name it duoChromaPalette. Then rename the Swift file ContentView in the project navigator duoColorSet. Next, you will use this file to access the color palette.

Color palette

The Color Picker provides color cells and controls that allow you to select system colors or create your own color sets. The palette is also available in Mac apps like Final Cut Pro and Apple Motion, as well as most third-party Mac apps like Kite Compositor and ScreenFlow. However, in this article, we have focused on working with the Color Picker in Xcode.

In preparation for writing this article, we interviewed several Swift developers about how they use the color picker in Xcode. All developers knew how to use it to adjust colors in their projects. However, none of them knew about its unobvious possibilities. The result of our research was this guide, in which we revealed the hidden possibilities of the color palette. You’ll learn about creating reusable color palettes that can be shared with your team or used in future Xcode projects.

How to access the Color Picker in Xcode

There are two ways to access the use of the Color Picker in Xcode:

• Open the Xcode toolbar and click “Edit -> Format -> Show Colors”. After the palette is displayed, click “hide colors”, to close it.

To make it available through code, you must use a color literal. Define a constant in a Swift file duoColorSet let deviceBg = #colorLiteral(red: 0, green: 0.3725490196, blue: 1, alpha: 1) or replace the contents of the file with the code snippet below.

// Определение цветового литерала
let deviceBg = #colorLiteral(red: 0, green: 0.3725490196, blue: 1, alpha: 1)

var body: some View {
    ZStack {
        Color(deviceBg)
            .ignoresSafeArea()

        VStack {
            Image("streamLogoMark")
                .resizable()
                .frame(width: 64, height: 32)
            Text("Hello, **Stream**!")
        }
    }
}

Thus, you have created a color field (color chip). Click on the color box to display the color picker as shown in the image below.

Overview of color categories

Click on the color bar in the literal definition to open the color wells. Then click “Other” at the bottom center of the window to display the color categories.

The color selection window consists of three parts:

• Color selection buttons: located at the top of the window.

• Controls: located in the middle.

• Color cells and previews: located at the bottom of the window.

Using Default Colors

Click the color button at the top to switch between palettes. There are five categories of palettes:

• Color wheel (Color wheel – first from the left): Using the color wheel allows you to select from a wide range of colors by dragging the slider. The brightness slider controls the darkness and brightness of the color.

• Color sliders (second from left): Color sliders can be used to create colors from combinations RGB and HSB.

• Pencils (third from left): offers a wide range of system colors. Clicking on the pencils will update the color you selected in the code.

• Image Palettes (fourth from left): allows you to create a set of custom colors from an image. The palette lets you add images to color swatches.

• Color Palettes (fifth from left): Contains samples of system colors. There is also the possibility to create your own palettes.

Create a Custom Palette Using the Color Palettes Category

In this section, you will learn how to create your own color palettes by selecting colors from interface elements. To create your own color scheme in Xcode you have to use categories Color Palettes and Image Palettes.

In Swift file duoColorSet:

• Define a color constant let addColor = #colorLiteral(red: 0.5409796238, green: 0.776439786, blue: 0.2311589718, alpha: 0).

// Определение цветового литерала
    let deviceBg =  colorLiteral(red: 0, green: 0.3725490196, blue: 1,  
                    alpha: 1)

    var body: some View {
        ZStack {
            Color(deviceBg)
                .ignoresSafeArea()

            VStack {
                Image("streamLogoMark")
                    .resizable()
                    .frame(width: 64, height: 32)
                Text("Hello, **Stream**!")
            }
        }
    }
}

If you choose “Apple” from the color options, a window similar to the image above will be presented with the default Apple system colors. At the bottom of the window are a color preview, an eyedropper, and color cells.

Palette creation:

• Drag the color preview (black and white square) in the bottom left corner to the cells in the bottom right corner.

• Click on the eyedropper icon and move anywhere in the Xcode interface to select a color. The color preview will update immediately. Drag this color and place it in the first color cell. Repeat this step to add as many colors to the cells as possible.

• Color cells serve as temporary storage for colors. You must create a new color space to keep the newly added colors. Click on the three dots icon (show more) in the upper right corner and select Newas shown in the image below.

• Drag all the colors from the cells to the middle section and double click each one to rename it. To rename a color group, click on the three dots icon (show more) in the upper right corner and select “Rename”. Call it “SampleCustomSet”. Once colors are saved, they are permanently stored at the macOS system level.

You have saved all color swatches in the palette SampleCustomSet. You can delete all colors in cells by clicking on each color and then pressing the Backspace or Delete key on your keyboard.

• To remove a color from the palette, select it and click on the minus sign “–” in the upper right corner as shown in the image above. You can also create additional color variations by selecting it and clicking the plus sign “+” in the upper right corner. Using the opacity slider at the bottom, you can adjust the transparency of the color. To delete a palette, click on the three dots icon (show more) in the upper right corner and select “Remove“.

You now have a custom Xcode color palette that you can use on future projects or share with other team members. You may be wondering how to export a palette from Xcode and share it? This will be discussed in the following sections.

Creating a Custom Palette Using the Image Palette Category

In this section, you will create a color palette called DuoChroma, using a Duolingo mascot image cloned in Figma. You can take your image and follow the tutorial with it.

• Click the constant color field “addColor” that you defined in the Swift file duoChroma.swift.

• Click on the samples belowOther” and change the category to Image Pallets.

• In order to select color samples from the spectrum, you can drag the slider to any position on the spectrum of the image.

• To specify an image for color sampling, click on the three-dot icon (menu) in the upper right corner of the window and select “New from File…”.

• Select an image and move the slider that appears on the image to the different colors you want to add.

• To temporarily keep the colors in the color cells, place the slider over the different color variations in the image.

• Then drag and drop previews of the colors you like into the cells.

• Go to category “color pallets“. Then click on the three dots (menu) in the upper right corner of the window and select “New“.

• Drag all the colors of your choice from the cells to the middle section.

• Click the menu icon in the top right corner and rename it. In this example, the palette has been renamed to DuoChroma. Finally, double click on individual colors to rename them. Congratulations!

• You have created a different color palette in Xcode based on an image.

Sharing, installing and reusing color palettes

In the previous section, we created a color palette called DuoChroma. This palette will automatically be available in other Xcode projects you create on your Mac. However, in order to share a color palette file with other users, you need to find out where it is located on your system. You can go to Spotlight or the macOS Finder to find the palette you just created. If you’re trying to find it with the Spotlight keyboard shortcut cmd + space, which will show the associated files instead of the actual color palette file, as shown in the image below. What nonsense?!

Don’t worry, the file is still on your Mac, but it’s hidden. Whenever you create a custom color palette in Xcode it will be saved as Apple Color List (CLR) with extension .clr in the system library. So the palette filename will be DuoChroma.clr. This is the file property list (Plist)so it will be hidden by default.

You can find it with the command line (Terminal or Hyper) using the standard search path ~/Library/Colors.

Once you find the file in ~/Library/Colors, you can copy and paste it anywhere on your system. For example, you can use the cp DuoChroma.clr ~/Desktop command to copy it to your desktop, as shown in the image below.

After successfully saving the file DuoChroma.clr in the location of your choice, you can send it to anyone for reuse in other Xcode projects. To do this, you must follow these steps:

• In Xcode go to section “Edit”select “Format” and press “Show Colors”.

• When the color window opens, switch to the category “Color Palettes“.

• Click the three dots (menu) icon in the upper right corner of the window and select “open“.

• Navigate to where you saved the palette file to open and start using it in Xcode.

What’s next?

Congratulations! Now you know how to create color palettes in Xcode. You’ve learned how to share and reuse the palettes you’ve created in other Xcode projects. Start creating unique palettes in Xcode to ensure that colors are used harmoniously in your applications and projects. If you are new to Stream Chat SwiftUI, check out this tutorial. To learn more about Xcode and SwiftUI, subscribe to YouTube channel Stream Developers.

We invite everyone to an open specialization lesson “iOS Developer“, on which we will consider CoreData – a tool for local data storage in iOS applications. Let’s talk about the nuances of caching, and also write a small application with data and image storage. Registration is available link.