1

I want to mix two colors in SwiftUI code. For eg: Green and Black with opacity 20%. The final color should be a mix these two colors. Is there any method other than using ZStack to achieve the same?

JuvinR
  • 128
  • 1
  • 7
  • 2
    It is not clear your final goal, but what's wrong with ZStack? – Asperi Jul 21 '22 at 10:19
  • 2
    Since you are working with iOS an alternative would be to convert it to `UIColor` and then mix/blend them together. There are multiple answered questions on how to do that with `UIColor`. From a quick looking at it I see no other alternative. – Matic Oblak Jul 21 '22 at 10:44
  • Actually, I wanted to apply a mix of two colors as foregroundColor for Text. – JuvinR Jul 21 '22 at 11:54
  • do you mean gradient colors ?? – belal medhat Jul 21 '22 at 12:05
  • You need to define what you mean by mixing colors, and then figure out how to implement that mixing. You could convert the colors to HSB and then take the average value of each component, for example. That would probably produce colors that look like a mix of your two colors. – Duncan C Jul 21 '22 at 12:27
  • Note that RBG is an additive color model, where red+blue+green=white, and paint and paper are subtractive, where red+blue+green=black (or dark, muddy gray). Subtractive colors are represented on a computer using the CMYB color model. If want an effect like mixing paints you might want to convert your colors to CMYB before blending them. – Duncan C Jul 21 '22 at 12:28
  • @belalmedhat I'm not looking for a gradient color. The purpose is to blend two colors and produce a new color. Is there a way in swiftui gradient to do so? – JuvinR Jul 21 '22 at 13:39

2 Answers2

2

Since you are working in iOS, you can take advantage of the fact that a SwiftUI Color can be created from a UIColor.

Using UIColor.blend from this answer you can create a blend of 2 UIColors by specifying the colors and the intensity (0.0 ... 1.0) for each. For example, to create a foreground color for Text that is 80% UIColor.green and 20% UIColor.black:

struct ContentView: View {
    var body: some View {
        Text("Hello World!")
            .foregroundColor(Color(UIColor.blend(color1: .green, intensity1: 0.8, color2: .black, intensity2: 0.2)))
    }
}

Note: Just include the UIColor extension in any file in your project. It is a good practice to give extensions their own file(s), but you can include it in the same file as your View if you want.

vacawama
  • 150,663
  • 30
  • 266
  • 294
0

Here's a solution without using UIColor. It's based on the blend extension in @vacawama's answer.

import SwiftUI

extension Color {
    static func blend(color1: Color, intensity1: CGFloat = 0.5, color2: Color, intensity2: CGFloat = 0.5) -> Color {
        let total = intensity1 + intensity2
        
        let normalisedIntensity1 = intensity1/total
        let normalisedIntensity2 = intensity2/total
        
        guard normalisedIntensity1 > 0 else { return color2 }
        guard normalisedIntensity2 > 0 else { return color1 }
        
        let color1Components = color1.cg.components!
        let color2Components = color2.cg.components!
        
        let (r1, g1, b1, a1): (CGFloat, CGFloat, CGFloat, CGFloat) = (color1Components[0], color1Components[1], color1Components[2], color1Components[3])
        let (r2, g2, b2, a2): (CGFloat, CGFloat, CGFloat, CGFloat) = (color2Components[0], color2Components[1], color2Components[2], color2Components[3])

        return Color(red: normalisedIntensity1*r1 + normalisedIntensity2*r2,
                     green: normalisedIntensity1*g1 + normalisedIntensity2*g2,
                     blue: normalisedIntensity1*b1 + normalisedIntensity2*b2,
                     opacity: normalisedIntensity1*a1 + normalisedIntensity2*a2)
    }
}
Rene
  • 111
  • 1
  • 8