Color Mixer

What happens when you mix red and blue? The answer in light is different from the answer in paint — and this app lets you explore it directly by blending two colors of your choosing.

What you'll build

Two ColorPicker controls — one for each color — and a result swatch showing the mix. Change either color and the result updates immediately.

Key concepts

Two @State colors — One for each input.

@State var colorA: Color = .red
@State var colorB: Color = .blue

Averaging RGB components — To mix two colors, average their red, green, and blue components. SwiftUI's Color doesn't expose these directly; you can resolve them via UIColor.

func mix(_ a: Color, _ b: Color) -> Color {
    let ua = UIColor(a), ub = UIColor(b)
    var r1: CGFloat = 0, g1: CGFloat = 0, b1: CGFloat = 0
    var r2: CGFloat = 0, g2: CGFloat = 0, b2: CGFloat = 0
    ua.getRed(&r1, green: &g1, blue: &b1, alpha: nil)
    ub.getRed(&r2, green: &g2, blue: &b2, alpha: nil)
    return Color(red: (r1+r2)/2, green: (g1+g2)/2, blue: (b1+b2)/2)
}

Layout — Put both pickers and the result swatch in a VStack with clear labels so the interface explains itself.

Bridging SwiftUI and UIKit

The UIColor step here is your first glimpse of bridging SwiftUI to UIKit — the older, lower-level framework underneath. SwiftUI builds on UIKit, and sometimes you need to dip down a level to get to functionality SwiftUI doesn't expose directly.

Download and run it

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