Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I mix two UIColor together?

I have colorA which is [UIColor blueColor], and colorB, which is [UIColor redColor]. Is this possible for me to render a [UIColor purple]? How can it be implemented? Thanks.

like image 397
DNB5brims Avatar asked Oct 30 '12 04:10

DNB5brims


3 Answers

Inelegant, but it works:

UIColor* blend( UIColor* c1, UIColor* c2, float alpha )
{
    alpha = MIN( 1.f, MAX( 0.f, alpha ) );
    float beta = 1.f - alpha;
    CGFloat r1, g1, b1, a1, r2, g2, b2, a2;
    [c1 getRed:&r1 green:&g1 blue:&b1 alpha:&a1];
    [c2 getRed:&r2 green:&g2 blue:&b2 alpha:&a2];
    CGFloat r = r1 * beta + r2 * alpha;
    CGFloat g = g1 * beta + g2 * alpha;
    CGFloat b = b1 * beta + b2 * alpha;
    return [UIColor colorWithRed:r green:g blue:b alpha:1.f];
}

More elegant:

UIColor+Extensions.h:

@interface UIColor (Extensions)

- (UIColor*)blendWithColor:(UIColor*)color2 alpha:(CGFloat)alpha2;

@end

UIColor+Extensions.m:

@implementation UIColor (Extensions)

- (UIColor*)blendWithColor:(UIColor*)color2 alpha:(CGFloat)alpha2
{
    alpha2 = MIN( 1.0, MAX( 0.0, alpha2 ) );
    CGFloat beta = 1.0 - alpha2;
    CGFloat r1, g1, b1, a1, r2, g2, b2, a2;
    [self getRed:&r1 green:&g1 blue:&b1 alpha:&a1];
    [color2 getRed:&r2 green:&g2 blue:&b2 alpha:&a2];
    CGFloat red     = r1 * beta + r2 * alpha2;
    CGFloat green   = g1 * beta + g2 * alpha2;
    CGFloat blue    = b1 * beta + b2 * alpha2;
    CGFloat alpha   = a1 * beta + a2 * alpha2;
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

@end

Swift 3/4:

extension UIColor
{
func mixin(infusion:UIColor, alpha:CGFloat) -> UIColor {
    let alpha2 = min(1.0, max(0, alpha))
    let beta = 1.0 - alpha2

    var r1:CGFloat = 0, r2:CGFloat = 0
    var g1:CGFloat = 0, g2:CGFloat = 0
    var b1:CGFloat = 0, b2:CGFloat = 0
    var a1:CGFloat = 0, a2:CGFloat = 0
    if getRed(&r1, green: &g1, blue: &b1, alpha: &a1) &&
        infusion.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
    {
        let red     = r1 * beta + r2 * alpha2;
        let green   = g1 * beta + g2 * alpha2;
        let blue    = b1 * beta + b2 * alpha2;
        let alpha   = a1 * beta + a2 * alpha2;
        return UIColor(red: red, green: green, blue: blue, alpha: alpha)
    }
    // epique de las failuree
    return self
}
}
like image 139
Mark Avatar answered Nov 13 '22 18:11

Mark


Ask each input color for its RGBA components using -[UIColor getRed:green:blue:alpha:]. Average the components from each, and create a new color using +[UIColor colorWithRed:green:blue:alpha:].

like image 42
rob mayoff Avatar answered Nov 13 '22 19:11

rob mayoff


Swift5 UIColor Extension

extension UIColor {
    func add(_ overlay: UIColor) -> UIColor {
        var bgR: CGFloat = 0
        var bgG: CGFloat = 0
        var bgB: CGFloat = 0
        var bgA: CGFloat = 0
        
        var fgR: CGFloat = 0
        var fgG: CGFloat = 0
        var fgB: CGFloat = 0
        var fgA: CGFloat = 0
        
        self.getRed(&bgR, green: &bgG, blue: &bgB, alpha: &bgA)
        overlay.getRed(&fgR, green: &fgG, blue: &fgB, alpha: &fgA)
        
        let r = fgA * fgR + (1 - fgA) * bgR
        let g = fgA * fgG + (1 - fgA) * bgG
        let b = fgA * fgB + (1 - fgA) * bgB
        
        return UIColor(red: r, green: g, blue: b, alpha: 1.0)
    }
    
    static func +(lhs: UIColor, rhs: UIColor) -> UIColor {
        return lhs.add(rhs)
    }
}

Usage

let opacity: CGFloat = 0.6
let start = UIColor.red
let end = UIColor.blue
let combined = start.withAlphaComponent(opacity) + end.withAlphaComponent(1-opacity)
like image 3
Li Jin Avatar answered Nov 13 '22 18:11

Li Jin