Mixing colours in SwiftUI and Xcode 16 – Donny Wals

Discover how the big rectangle updates its shade to be a sure mixture of a left and proper shade.

Within the video I exploit distinct colours however you can too combine with white or black to lighten or darken your shade.

One use of shade mixing I like loads is to discover shade palettes. Since you possibly can see which colours “match” between two distinct colours you get to discover shade in a manner that, to me, may be very inspiring.

Right here’s the code that permits you to combine two colours in SwiftUI:

let leftColor = Coloration.pink
let rightColor = Coloration.blue
let combine = 0.5

// create a rectangle full of our combined shade
RoundedRectangle(cornerRadius: 16)
    .fill(leftColor.combine(with: rightColor, by: combine, in: .perceptual))
    .body(width: 100, peak: 100)

The API is fairly simple. You’re taking a shade and also you name combine on it. You go a second shade, a mixing worth between 0 and 1, and whether or not you need to interpolate the combined shade in a perceptual shade area or utilizing the gadget shade area.

By default, perceptual can be used since that ought to, in principle, combine colours in a manner that is sensible to the human eye and is constant between completely different gadget screens. Mixing primarily based on gadget shade area can yield completely different outcomes which will or might not be what you’re on the lookout for; I like to recommend experimenting to see the precise variations.

The blending worth that you simply present determines how a lot of the second shade must be combined into the supply shade. A worth of 0 will get you the unique shade and a price of 1 replaces the unique shade completely with the colour you’re mixing in.

In the event you’re occupied with rebuilding the experiment UI from the beginning of this submit, you possibly can seize the code proper right here:

struct ColorMix: View {
    @State personal var leftColor = Coloration.blue
    @State personal var rightColor = Coloration.pink
    @State personal var combine = 0.5

    var physique: some View {
        VStack {
            HStack(spacing: 8) {
                ColorPicker("Left", choice: $leftColor)
                    .labelsHidden()
                ColorPicker("Proper", choice: $rightColor)
                    .labelsHidden()
            }

            HStack {
                VStack {
                    RoundedRectangle(cornerRadius: 16)
                        .fill(leftColor)
                        .body(width: 100, peak: 100)
                    Textual content("((1 - combine), format: .%.precision(.fractionLength(0...2)))")
                }

                VStack {
                    RoundedRectangle(cornerRadius: 16)
                        .fill(rightColor)
                        .body(width: 100, peak: 100)
                    Textual content("(combine, format: .%.precision(.fractionLength(0...2)))")
                }
            }

            // create a rectangle full of our combined shade
            RoundedRectangle(cornerRadius: 16)
                .fill(leftColor.combine(with: rightColor, by: combine, in: .perceptual))
                .body(width: 100, peak: 100)

            Slider(worth: $combine, in: 0...1)
        }
    }
}