Sunil Rao
Sunil Rao

Reputation: 850

How to get mid color between two UIColors in iOS

If i give two colors

UIColor *color1 = [UIColor blackColor];
UIColor *color2 = [UIColor whiteColor];

I should get grayColor as result, how shall I achieve it?

Upvotes: 12

Views: 2250

Answers (3)

Artem Sydorenko
Artem Sydorenko

Reputation: 382

Here Swift implementation that safe to use. Works with colors of different color spaces, but blend in RGBA:

func + (left: UIColor, right: UIColor) -> UIColor {
    var (r1, g1, b1, a1) = (CGFloat(0), CGFloat(0), CGFloat(0), CGFloat(0))
    var (r2, g2, b2, a2) = (CGFloat(0), CGFloat(0), CGFloat(0), CGFloat(0))
    left.getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
    right.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
    return UIColor(red: (r1 + r2)/2, green: (g1 + g2)/2, blue: (b1 + b2)/2, alpha: (a1 + a2)/2)
}

Using:

    view.backgroundColor = .red + .white

Old anrwer:

extension UIColor {

    func blended(with color: UIColor) -> UIColor? {
        guard cgColor.colorSpace == color.cgColor.colorSpace else { return nil }
        return UIColor(cgColor: CGColor(colorSpace: cgColor.colorSpace!, components:
            zip(cgColor.components!, color.cgColor.components!).map { ($0 + $1) / 2 }
        )!)
    }
}

But it works only with colors of one color space, otherwise it will return nil. Here example of use:

let white = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
view.backgroundColor = UIColor.red.blended(with: white)

Upvotes: 2

Federico Zanetello
Federico Zanetello

Reputation: 3451

Answer in Swift 4+

func blend(colors: [UIColor]) -> UIColor {
    let componentsSum = colors.reduce((red: CGFloat(0), green: CGFloat(0), blue: CGFloat(0))) { (temp, color) in
      guard let components = color.cgColor.components else { return temp }
      return (temp.0 + components[0], temp.1 + components[1], temp.2 + components[2])
    }
    let components = (red: componentsSum.red / CGFloat(colors.count) ,
                      green: componentsSum.green / CGFloat(colors.count),
                      blue: componentsSum.blue / CGFloat(colors.count))
    return UIColor(red: components.red, green: components.green, blue: components.blue, alpha: 1)
  }

It blends as many colors as you'd like

Upvotes: 4

Sergey Kalinichenko
Sergey Kalinichenko

Reputation: 726609

A straightforward way of finding the "in between" is to average the four components, like this:

UIColor *color1 = [UIColor blackColor];
UIColor *color2 = [UIColor whiteColor];
CGFloat r1, r2, g1, g2, b1, b2, a1, a2;
[color1 getRed:&r1 green:&g1 blue:&b1 alpha:&a1];
[color2 getRed:&r2 green:&g2 blue:&b2 alpha:&a2];
UIColor *avg = [UIColor colorWithRed:(r1+r2)/2.0f
                              green:(g1+g2)/2.0f
                               blue:(b1+b2)/2.0f
                              alpha:(a1+a2)/2.0f];

Note that this produces a midpoint RGBA color space, which is only one of many possible color spaces. Averaging components in other color spaces will lead to a different result.

Upvotes: 13

Related Questions