Mixing colours in SwiftUI and Xcode 16 – Donny Wals

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

Within the video I take advantage of distinct colours however you can too combine with white or black to lighten or darken your colour.

One use of colour mixing I like so much is to discover colour palettes. Since you may see which colours “match” between two distinct colours you get to discover colour in a method that, to me, may be very inspiring.

Right here’s the code that means that you can combine two colours in SwiftUI:

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

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

The API is fairly simple. You are taking a colour and also you name combine on it. You move a second colour, a mixing worth between 0 and 1, and whether or not you wish to interpolate the combined colour in a perceptual colour house or utilizing the system colour house.

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

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

For those who’re taken with rebuilding the experiment UI from the beginning of this submit, you may seize the code proper right here:

struct ColorMix: View {
    @State personal var leftColor = Shade.blue
    @State personal var rightColor = Shade.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: .p.c.precision(.fractionLength(0...2)))")
                }

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

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

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