Mixing colours in SwiftUI and Xcode 16 – Donny Wals

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

Within the video I take advantage of distinct colours however you may also combine with white or black to lighten or darken your coloration.

One use of coloration mixing I like lots is to discover coloration palettes. Since you may see which colours “match” between two distinct colours you get to discover coloration 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 = Colour.pink
let rightColor = Colour.blue
let combine = 0.5

// create a rectangle stuffed with our blended coloration
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 coloration and also you name combine on it. You move a second coloration, a mixing worth between 0 and 1, and whether or not you need to interpolate the blended coloration in a perceptual coloration house or utilizing the gadget coloration house.

By default, perceptual shall be used since that ought to, in principle, combine colours in a manner that is smart to the human eye and is constant between totally different gadget screens. Mixing based mostly on gadget coloration house can yield totally different outcomes that will or is probably not what you’re in search of; I like to recommend experimenting to see the precise variations.

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

For those who’re considering rebuilding the experiment UI from the beginning of this put up, you may seize the code proper right here:

struct ColorMix: View {
    @State personal var leftColor = Colour.blue
    @State personal var rightColor = Colour.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 blended coloration
            RoundedRectangle(cornerRadius: 16)
                .fill(leftColor.combine(with: rightColor, by: combine, in: .perceptual))
                .body(width: 100, peak: 100)

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