How to use ColorPicker in SwiftUI | SwiftUI Bootcamp #39

Building a drawing app, a custom theme selector, or any feature where users pick their own color? SwiftUI's ColorPicker does the heavy lifting — it presents the full system color picker UI with a single line of code, and binds the selected color directly to your @State variable.

What You'll Learn

• How ColorPicker binds to a @State Color and reflects the user's selection immediately
• What supportsOpacity: true/false controls and when to disable opacity
• How to use the selected color to drive other views — demonstrated with a full-screen reactive background

Mental Model

ColorPicker is like a magic paintbrush that lets the user choose their own color. The @State var backgroundColor is the paint can. The ColorPicker dips the paintbrush in the can and lets the user swap the paint for any color they choose. Because the background of the screen reads from the same paint can, the entire screen repaints itself the moment the user commits to a new color in the picker.

The $ binding in selection: $backgroundColor is what makes this connection live — the picker writes directly into the paint can, and every view reading from it updates immediately.

Detailed Explanation

ColorPicker("Select a color", selection: $backgroundColor, supportsOpacity: true) creates a label + small color swatch that the user can tap to open the system color picker. The label text ("Select a color") appears to the left of the swatch. The swatch shows the current selected color. Tapping the swatch opens the full-screen system color picker (the same one used across iOS).

selection: $backgroundColor is a Binding to the Color value. When the user picks a new color, the picker writes it back to backgroundColor. Because backgroundColor is @State, SwiftUI re-renders any view that reads it — including the ZStack background in this example.

supportsOpacity: true enables the opacity/alpha slider in the color picker. Setting this to false hides the opacity control and always produces fully opaque colors. Disable opacity when your use case requires solid colors — for example, a background color selector where transparent backgrounds would be confusing.

ColorPicker was introduced in iOS 14. On earlier versions, you'd need a custom color picker implementation. Always check deployment target requirements before using it.

The ZStack pattern here — background color filling the screen behind the control — is a classic demonstration of live state-driven UI. The user sees the background change as they select colors in the picker, providing immediate visual feedback on their choice.

Code Structure

ColorPickerBootcamp.swift uses a ZStack to layer the reactive background and the styled ColorPicker widget. The single @State var backgroundColor drives both the ZStack background and the ColorPicker's current swatch display. The ColorPicker itself is styled with padding, a dark background, rounded corners, and white label text to make it clearly visible against any background color the user might choose.

Complete Code

ColorPickerBootcamp.swift

import SwiftUI

struct ColorPickerBootcamp: View {
    
    @State var backgroundColor: Color = .green // initial color; also drives the background and picker swatch
    
    var body: some View {
        ZStack {
            backgroundColor
                .edgesIgnoringSafeArea(.all)  // fills the entire screen including status bar and home indicator
            
            ColorPicker("Select a color",
                        selection: $backgroundColor, // two-way binding: swatch shows current color, picker writes new color
                        supportsOpacity: true)        // includes the opacity/alpha slider in the system picker
                .padding()
                .background(Color.black)    // dark background makes the picker visible against any background color
                .cornerRadius(10)
                .foregroundColor(.white)    // white label text for contrast on the black background
                .font(.headline)
                .padding(50)               // outer padding keeps the picker away from screen edges
        }
        
    }
}

struct ColorPickerBootcamp_Previews: PreviewProvider {
    static var previews: some View {
        ColorPickerBootcamp()
    }
}

Code Walkthrough

1. @State var backgroundColor: Color = .green — This single state variable serves three roles: it's the initial background color, it's what the ColorPicker displays in its swatch, and it's what changes when the user picks a new color. One variable, three purposes — this is elegant state design.

2. backgroundColor.edgesIgnoringSafeArea(.all) — The background extends behind the status bar and home indicator. When the user picks a bright yellow, the entire phone screen turns yellow — a dramatic, satisfying demonstration of live color binding.

3. ColorPicker("Select a color", selection: $backgroundColor, supportsOpacity: true) — This single line creates the entire color picker widget: a label, a color swatch, and the tap gesture to open the system picker. The system picker handles color spaces, eyedropper, favorites, and sliders automatically.

4. selection: $backgroundColor — The $ prefix creates a Binding to the Color value. When the user finishes picking a color, the system writes the new Color value through the binding into backgroundColor. SwiftUI immediately re-renders the background.

5. supportsOpacity: true — With this enabled, the user can select semi-transparent colors. The resulting Color will have an alpha value less than 1.0. In this demo, a semi-transparent background would show through to the white screen behind the ZStack — a useful behavior to be aware of.

6. .background(Color.black).cornerRadius(10).foregroundColor(.white) — This styling ensures the ColorPicker row is readable regardless of what background color the user has selected. A dark background with white text stays legible against any hue.

Common Mistakes

Mistake: Using ColorPicker in a context that requires opaque colors but leaving supportsOpacity: true
If you use the selected color for a background, button, or any element where transparency would look broken, set supportsOpacity: false. Users won't expect their chosen "red" to be semi-transparent and produce unexpected see-through effects.

Mistake: Expecting ColorPicker to work on iOS 13
ColorPicker requires iOS 14 or later. If your deployment target is iOS 13, add a @available(iOS 14, *) check or provide a fallback. Users on older iOS will get a compiler error or runtime crash without this guard.

Mistake: Not styling the ColorPicker container for visibility against all possible background colors
If your picker inherits the background color (no explicit dark container), the label and swatch can become invisible when the user picks a color similar to the background. Always give the picker a fixed-contrast container, as done in this example with the black .background.

Key Takeaways

• ColorPicker opens the full system color picker with one line and binds the result directly to a @State Color.
• supportsOpacity: false produces solid colors only — use this when transparency would break your UI.
• Because Color is a first-class SwiftUI value, the selected color can immediately drive any modifier that accepts a Color — background, fill, foreground, shadow, and more.

Last updated: June 27, 2026