Mixing colours in SwiftUI and Xcode 16 – Donny Wals

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

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

One use of shade mixing I like quite a bit is to discover shade palettes. Since you’ll be able to see which colours “match” between two distinct colours you get to discover shade in a approach 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 crammed with our blended shade
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 shade and also you name combine on it. You move a second shade, a mixing worth between 0 and 1, and whether or not you wish to interpolate the blended shade in a perceptual shade house or utilizing the gadget shade house.

By default, perceptual shall be used since that ought to, in concept, combine colours in a approach that is smart to the human eye and is constant between totally different gadget screens. Mixing based mostly on gadget shade house can yield totally different outcomes which 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 simply present determines how a lot of the second shade must be blended into the supply shade. A price of 0 will get you the unique shade and a worth of 1 replaces the unique shade totally with the colour you’re mixing in.

In the event you’re concerned about rebuilding the experiment UI from the beginning of this put up, you’ll be able to seize the code proper right here:

struct ColorMix: View {
    @State non-public var leftColor = Coloration.blue
    @State non-public var rightColor = Coloration.pink
    @State non-public 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 crammed with our blended shade
            RoundedRectangle(cornerRadius: 16)
                .fill(leftColor.combine(with: rightColor, by: combine, in: .perceptual))
                .body(width: 100, peak: 100)

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