Super Color Picker

App 3 used iOS's built-in color picker. This one builds its own — three sliders for red, green, and blue. Every color on screen is a combination of those three values, and now you can feel exactly how they mix.

What you'll build

Three Slider controls for red, green, and blue, each from 0 to 1. A large color swatch shows the resulting color, updating in real time as you drag the sliders.

Key concepts

Slider — A draggable control that produces a Double value between a minimum and maximum. Bind it to a @State variable.

Slider(value: $red, in: 0...1)
    .tint(.red)

Three state variables — One per channel.

@State var red   = 0.5
@State var green = 0.3
@State var blue  = 0.8

Color(red:green:blue:) — Construct a Color directly from components. When any of your state variables change, this recalculates instantly.

var mixedColor: Color {
    Color(red: red, green: green, blue: blue)
}

Computed property — mixedColor above is a computed property — it calculates its value from other properties each time you read it. No extra state needed.

Building vs using

App 3 handed off the work to the system. App 10 does it from scratch. Both are right — knowing when to reach for a built-in and when to build your own is an important developer skill. Here you build your own so you understand what's underneath.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and mix.