Color Picker

iOS has a beautiful built-in color picker. This app puts it front and center — pick any color, and the screen changes to match.

What you'll build

A color swatch that fills the screen, with a ColorPicker control to change it. Pick a color from the system color wheel and watch the background update immediately.

Key concepts

ColorPicker — A built-in SwiftUI control that opens the system color wheel. Pass it a label and a binding to a Color.

ColorPicker("Pick a color", selection: $selectedColor)

@State with Color — Colors are values in SwiftUI, just like numbers. Store your current selection in @State.

@State var selectedColor: Color = .blue

Using the color — Apply your state value as a background or fill. When selectedColor changes, the view updates automatically.

Rectangle()
    .fill(selectedColor)
    .ignoresSafeArea()

$ prefix — binding syntax — The $ in $selectedColor passes a two-way connection to the color picker, so when the user picks a new color, your state variable updates.

The binding idea

This is your first look at two-way data flow. The ColorPicker doesn't own the color — you do, via @State. The picker reads from it and writes back to it through the binding. This pattern shows up everywhere in SwiftUI.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and pick your color.