How to create new colors by blending two other SwiftUI colors

2024년 6월 21일About 2 min

How to create new colors by blending two other SwiftUI colors 관련

SwiftUI by Example

Back to Home

How to create new colors by blending two other SwiftUI colors | SwiftUI by Example

How to create new colors by blending two other SwiftUI colors

Updated for Xcode 16

New in iOS 18

SwiftUI's Color view has a mix(with:by:) modifier that lets us blend two colors dynamically. This can be as simple as putting two colors together, like this:

Rectangle()
    .fill(Color.red.mix(with: .indigo, by: 0.5))

Download this as an Xcode project

However, you can also customize the colorspace. It's set to .perceptual by default, meaning that humans perceive the colors to blend smoothly – it's not strictly accurate to exact color values, but it feels accurate to our eyes. We could also the .device colorspace, which means the blending is more mathematically accurate as a value between 0 and 1:

Rectangle()
    .fill(Color.red.mix(with: .indigo, by: 0.5, in: .device))

Download this as an Xcode project

With this API, we can create a whole color picker and blender layout like this:

struct ContentView: View {
    @State private var firstColor = Color.red
    @State private var secondColor = Color.indigo
    @State private var blendAmount = 0.5

    var body: some View {
        VStack {
            ColorPicker("From", selection: $firstColor)
            ColorPicker("To", selection: $secondColor)
            Slider(value: $blendAmount)

            Rectangle()
                .fill(firstColor.mix(with: secondColor, by: blendAmount))
        }
        .padding()
    }
}