How to let users select a color with ColorPicker

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

New in iOS 14

SwiftUI has a native ColorPicker control that allows the user to select a color. To use it, first create a Color property that can be changed using @State or similar, then

struct ContentView: View {
    @State private var bgColor = Color.red

    var body: some View {
        VStack {
            ColorPicker("Set the background color", selection: $bgColor)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(bgColor)
    }
}

Download this as an Xcode project

The words “Set the background color” and a rainbow colored ring, below which is a grid style color picker with an opacity slider.

By default ColorPicker supports opacity in the color selection, but you can disable that with a slightly different initializer:

struct ContentView: View {
    @State private var bgColor = Color.red

    var body: some View {
        VStack {
            ColorPicker("Set the background color", selection: $bgColor, supportsOpacity: false)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(bgColor)
    }
}

Download this as an Xcode project

The words “Set the background color” and a rainbow colored ring, below which is a grid style color picker without an opacity slider.