DEV Community

Leonard Sangoroh
Leonard Sangoroh

Posted on

Add a custom color to your XCode Project

Every application has a personality, and nothing brings that personality to life quite like a unique and consistent color scheme.
Not only does your app acquire a personality when using color schemes, but also enhances user experience and strengthens your brand.
This guide will walk you through the steps to add a custom color to your Xcode Project.

Three main steps in adding a custom color

  1. Define Your Custom Color
  2. Adding Color to the Asset Catalog
  3. Using the Custom Color in Your Code

Step 1: Define Your Custom Colors

Before getting onto Xcode, you need to select the color or color combination that will represent your application. Tools like Adobe Color and Color Hunt can help you develop a palette that fits your application's brand and consequently appeals to your audience.
Make sure to get the hexadecimal code for the respective color.

Step 2: Adding Color to the Asset Catalog

  • Open your Xcode project
  • Navigate to the Asset Catalog

Image description

  • Click on the '+' and select 'New color set' sign on the bottom left of your asset catalog

Image description

To adjust the color of the asset, open the inspector on the right. In the inspector;

  • change the name of the color to your preferred name by replacing the default name with your preferred one. In this case, we will set it to 'background-color'
  • change which devices this color will be used on in the 'Devices' section
  • change the 'Any Appearance' color value. On the 'input Method' field, select '8-bit hexadecimal'
  • Paste the RGB hexadecimal color code on the 'Hex' field

Image description

Step 3: Using the custom color in Your Code

Now that you have successfully added your color to the assets catalog, you can use it in your code. Below is a code block

if let customColor = UIColor(named: "background-color") {
    yourView.backgroundColor = customColor
} else {
    yourView.backgroundColor = UIColor.systemBlue // Fallback color
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)