Creating Colors

Colors are used widely throughout SwiftUI to set text colors, background colors, and more.

Predefined Colors

SwiftUI has a set of predefined colors. These colors adapt automatically to dark and light mode.

In the following example, you can use Color to create a red text.

struct ContentView: View {
    var body: some View {
        Text("Hello")
            .foregroundStyle(Color.red)
            .font(.largeTitle)
    }
}

Or use Color to create a background.

struct ContentView: View {
    var body: some View {
        Text("Hello")
            .foregroundStyle(Color.white)
            .padding()
            .background(Color.red)
            .font(.largeTitle)
    }
}

To use predefined colors, you can access it with Color.colorName. Below are some examples of the colors. For a full list, refer to the Human Interface Guidelines.

HStack(spacing: 0) {
    Color.red
    Color.orange
    Color.yellow
    Color.green
    Color.blue
    Color.indigo
    Color.violet
}

Colors from Component Values

You can create a custom color from component values like red, green, and blue values, or hue, saturation, and brightness values. These values should be supplied as a Double, between 0 and 1. For hue values, you may need to divide it by 360°, for red, green, and blue values, you may need to divide it by 255.

Note
Use Custom Colors using Asset Catalogue to adapt the color's value based on dark and light mode.

let turquoise = Color(hue: 181 / 360, saturation: 1, brightness: 1)
let mocha = Color(red: 148 / 255, saturation: 82 / 255, brightness: 0)
let aluminium = Color(white: 0.6)

HStack(spacing: 0) {
    turquoise
    mocha
    aluminium
}

Colors as Views

In SwiftUI, Colors are also views. This allows you to manipulate them as you would a view.

In the following example, you can use SwiftUI colors to create the retro Apple logo with a VStack and a mask.

VStack(spacing: 0) {
    Color.green
    Color.green
    Color.green
    Color.yellow
    Color.orange
    Color.red
    Color.purple
    Color.blue
}
.mask {
    Image(systemName: "applelogo")
        .resizable()
        .scaledToFit()
}

Background Colors

As colors fill as much space as they can (see Fitting & Filling Views), you can use a Color within a ZStack to set the background color of a View.

ZStack {
    Color.red
    Text("This is very red")
        .foregroundStyle(.white)
}

Colors as Variables

Colors are a unique type of view that can also function as a data store. This can be seen with a Color Picker storing a Color in a State variable.

struct ContentView: View {
    
    @State private var color: Color = .red
    
    var body: some View {
        ZStack {
            color
            ColorPicker("Background Color", selection: $color)
        }
    }
}

Custom Colors using Asset Catalog

Only available in Xcode, not supported in Swift Playgrounds.

You can add Colors to the Asset Catalog with a Color Set.

1. From the Project Navigator, open the Assets Catalog

2. Click the + button at the bottom of the Assets Catalog

3. Choose Color Set

4. Rename the Color Set based on the color's purpose, like "BackgroundColor"

5. Select the color fields and customize it with the Attributes Inspector on the right, under the Color section.

   1. By default, 2 color fields appear, Any Appearance and Dark.

   2. Any Appearance is used for light mode, Dark is used for dark mode.

   3. If you intend on choosing just one color, click on the entire section. From the Attributes Inspector, under Appearance, you can set it to None.

Using Custom Colors

You can use your custom colors in Swift by passing in the name of the color as a String.

Color("BackgroundColor")

Alternately, you can use the dot notation to retrieve your color. However, there are some things to note.

If your Color's name ends with "Color" in the asset catalog, the "Color" suffix will be omitted. The name will also be transformed into camelCase, like all variable names. "BackgroundColor" becomes "background"

Color(.background) // Retrieves BackgroundColor from the asset catalog
Color(.blindingYellow) // Retrieves BlindingYellow from the asset catalog
Color(.myAmazingRed) // Retrieves My Amazing Red Color from the asset catalog

Accent Color

Using the accent color is a great way to maintain consistency across your app's interface. Controls like Buttons and Text Field insertion points automatically update their appearance to fit the accent color.

Changing the Accent Color

In Swift Playgrounds (iPad / Mac)

1. Open the sidebar

2. Select the App Settings

3. Set the Accent Color from the App Settings

In Swift Playgrounds Project on Xcode

1. Open the Project Navigator

2. Choose the top-most file, the one with your project's name

3. Under App Settings, set the Accent Color.

In Xcode

1. Open the Assets Catalog

2. Select the AccentColor object in the Assets Catalog

3. Select the color field and customize the color in the Attributes Inspector

Using Accent Color

In SwiftUI, you can retrieve the accent color by using .accentColor.

Color.accentColor