How can I color a UIImage in Swift?

Question

I have an image called arrowWhite. I want to colour this image to black.

func attachDropDownArrow() -> NSMutableAttributedString {
    let image:UIImage = UIImage(named: "arrowWhite.png")!
    let attachment = NSTextAttachment()
    attachment.image = image
    attachment.bounds = CGRectMake(2.25, 2, attachment.image!.size.width - 2.25, attachment.image!.size.height - 2.25)
    let attachmentString = NSAttributedString(attachment: attachment)
    let myString = NSMutableAttributedString(string: NSString(format: "%@", self.privacyOptions[selectedPickerRow]) as String)
    myString.appendAttributedString(attachmentString)
    return myString
}

I want to get this image in blackColour.
tintColor is not working...

doable from the Interface Builder, see @Harry Bloom pretty far down below — Andy Weinstein, May 14 '20 at 15:33
Most elegant solution: https://stackoverflow.com/a/63167556/2692839 — Umair Ali, Jul 30 '20 at 06:50
Nowadays it is this easy: **yourIcon.image = yourIcon.image?.withRenderingMode(.alwaysTemplate)** then set the tint — Fattie, Apr 24 '21 at 17:15

kuzdu · Answer 1 · 2019-05-07T09:05:41.060

Swift 4 and 5

extension UIImageView {
  func setImageColor(color: UIColor) {
    let templateImage = self.image?.withRenderingMode(.alwaysTemplate)
    self.image = templateImage
    self.tintColor = color
  }
}

Call like this:

let imageView = UIImageView(image: UIImage(named: "your_image_name"))
imageView.setImageColor(color: UIColor.purple)

Alternativ For Swift 3, 4 or 5

extension UIImage {

    func maskWithColor(color: UIColor) -> UIImage? {
        let maskImage = cgImage!

        let width = size.width
        let height = size.height
        let bounds = CGRect(x: 0, y: 0, width: width, height: height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        let context = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)!

        context.clip(to: bounds, mask: maskImage)
        context.setFillColor(color.cgColor)
        context.fill(bounds)

        if let cgImage = context.makeImage() {
            let coloredImage = UIImage(cgImage: cgImage)
            return coloredImage
        } else {
            return nil
        }
    }

}

For Swift 2.3

extension UIImage {
func maskWithColor(color: UIColor) -> UIImage? {

    let maskImage = self.CGImage
    let width = self.size.width
    let height = self.size.height
    let bounds = CGRectMake(0, 0, width, height)

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.PremultipliedLast.rawValue)
    let bitmapContext = CGBitmapContextCreate(nil, Int(width), Int(height), 8, 0, colorSpace, bitmapInfo.rawValue) //needs rawValue of bitmapInfo

    CGContextClipToMask(bitmapContext, bounds, maskImage)
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor)
    CGContextFillRect(bitmapContext, bounds)

    //is it nil?
    if let cImage = CGBitmapContextCreateImage(bitmapContext) {
        let coloredImage = UIImage(CGImage: cImage)

        return coloredImage

    } else {
        return nil
    } 
 }
}

Call like this:

let image = UIImage(named: "your_image_name")
testImage.image =  image?.maskWithColor(color: UIColor.blue)

Nice start, but the result is grainy. As @Darko mentions below, I believe it is because you are not taking scale and other parameters into account. — TruMan1, May 05 '16 at 16:28
I do not know exactly. The added benefit would be that third parties (pods, libraries ...) could use this extension. If you like you can set this function to public. I do not see any disadvantages for that. — kuzdu, Sep 12 '18 at 14:51
Yeah, poorly thats true. If you use an image with high resolution and use the different layers @2 and @3 it should be okay — kuzdu, Jul 04 '19 at 09:56

Nikolai Ruhe · Answer 2 · 2016-04-13T09:26:35.330

98

There's a built in method to obtain a UIImage that is automatically rendered in template mode. This uses a view's tintColor to color the image:

let templateImage = originalImage.imageWithRenderingMode(UIImageRenderingModeAlwaysTemplate)
myImageView.image = templateImage
myImageView.tintColor = UIColor.orangeColor()

edited Apr 13 '16 at 09:26

answered Apr 13 '16 at 07:27

Nikolai Ruhe

81,520
17
180
200

3

This is the best answer - more info may be found in Apple Docs - https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/#//apple_ref/doc/uid/TP40012857-UIView-SW17 – Mark Sep 25 '16 at 12:00
6

See Swift 3 syntax for rendering mode here: http://stackoverflow.com/a/24145287/448718 – Phil_Ken_Sebben Dec 16 '16 at 01:44
6

using imageview is obvious, but we want UIImage only – djdance Jan 28 '17 at 14:12
4

not a solution if you are working with UIImage objects independently of UIImageView's. This only works if you have access to UIImageView – Pez Feb 22 '17 at 19:44
Works great even in case when myImageView is a UIButton – daxh Oct 17 '17 at 04:34
This solution perfectly worked for me & even image retains its quality. Great work. – Mayur Prajapati Jul 04 '19 at 06:11
you provided method to imageview. i know this. how to do the same with out imageview? – swift2geek Oct 10 '19 at 14:13
title is how to color IMAGE, not imageView... :) – ingconti Jan 31 '21 at 08:01

Harry Bloom · Answer 3 · 2017-03-25T10:20:27.377

50

First you have to change the rendering property of the image to "Template Image" in the .xcassets folder. You can then just change the tint color property of the instance of your UIImageView like so:

imageView.tintColor = UIColor.whiteColor()

edited Mar 25 '17 at 10:20

answered Nov 12 '16 at 17:49

Harry Bloom

2,359
25
17

1

Did `tintColor` get removed from `UIImage` at some point? I was excited about this answer, but it doesn't seem to exist in iOS 10 – Travis Griggs Mar 24 '17 at 00:59
1

Hey @TravisGriggs. Sorry, I have just edited my answer to be a bit more descriptive, the tintColor property is on UIImageView, not UIImage – Harry Bloom Mar 25 '17 at 10:19
1

Tx, this is so cool! Note: The Tint appears in the View section of the ImageView inspector, a little further down. Just to be extra clear. – Andy Weinstein May 14 '20 at 15:32

Alex Shubin · Answer 4 · 2021-01-31T10:38:08.230

38

I ended up with this because other answers either lose resolution or work with UIImageView, not UIImage, or contain unnecessary actions:

Swift 3

extension UIImage {
    
    public func mask(with color: UIColor) -> UIImage {
        
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context = UIGraphicsGetCurrentContext()!
        
        let rect = CGRect(origin: CGPoint.zero, size: size)
        
        color.setFill()
        self.draw(in: rect)
        
        context.setBlendMode(.sourceIn)
        context.fill(rect)
        
        let resultImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return resultImage
    }
    
}

edited Jan 31 '21 at 10:38

answered Jun 02 '17 at 09:45

Alex Shubin

3,549
1
27
32

5

best answer in here, keeps the same image orientation and quality – SmartTree Sep 19 '17 at 23:10
Yeah, I've tested all the above answers and this indeed takes the scale into consideration, so it won't give you pixelated `UIImage`s. Really nice answer, thank you! – Guilherme Matuella Oct 21 '18 at 20:08
If you have an image with a transparent background, you can set blend mode to .destinationAtop. This lets you color the foreground of the image, leaving the background untouched. – Shaked Sayag Nov 18 '20 at 18:02

score 23 · Answer 5 · edited Jul 12 '17 at 07:32

23

This function uses core graphics to achieve this.

func overlayImage(color: UIColor) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.size, false, UIScreen.main.scale)
    let context = UIGraphicsGetCurrentContext()

    color.setFill()

    context!.translateBy(x: 0, y: self.size.height)
    context!.scaleBy(x: 1.0, y: -1.0)

    context!.setBlendMode(CGBlendMode.colorBurn)
    let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
    context!.draw(self.cgImage!, in: rect)

    context!.setBlendMode(CGBlendMode.sourceIn)
    context!.addRect(rect)
    context!.drawPath(using: CGPathDrawingMode.fill)

    let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return coloredImage
}

edited Jul 12 '17 at 07:32

RemyDCF

364
1
4
14

answered Jun 05 '16 at 17:08

H R

347
3
8

8

This works, where the other top two answers are wrong. – chrysb Jun 12 '16 at 06:51
4

Yes this works perfectly. `maskWithColor ` extension works but that ignores `scale` so image does not look sharp on higher resolution devices. – Moin Uddin May 15 '17 at 07:05
This works perfect!! We use in a extension and runs OK. Others solutions ignore scale... – Javi Campaña Oct 15 '18 at 22:59

Hardik Thakkar · Answer 6 · 2020-01-20T10:45:19.877

For swift 4.2 to change UIImage color as you want (solid color)

extension UIImage {
    func imageWithColor(color: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color.setFill()

        let context = UIGraphicsGetCurrentContext()
        context?.translateBy(x: 0, y: self.size.height)
        context?.scaleBy(x: 1.0, y: -1.0)
        context?.setBlendMode(CGBlendMode.normal)

        let rect = CGRect(origin: .zero, size: CGSize(width: self.size.width, height: self.size.height))
        context?.clip(to: rect, mask: self.cgImage!)
        context?.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

How to use

self.imgVw.image = UIImage(named: "testImage")?.imageWithColor(UIColor.red)

Pez · Answer 7 · 2017-02-22T19:41:08.237

I found the solution by H R to be most helpful but adapted it slightly for Swift 3

extension UIImage {

    func maskWithColor( color:UIColor) -> UIImage {

         UIGraphicsBeginImageContextWithOptions(self.size, false, UIScreen.main.scale)
         let context = UIGraphicsGetCurrentContext()!

         color.setFill()

         context.translateBy(x: 0, y: self.size.height)
         context.scaleBy(x: 1.0, y: -1.0)

         let rect = CGRect(x: 0.0, y: 0.0, width: self.size.width, height: self.size.height)
         context.draw(self.cgImage!, in: rect)

         context.setBlendMode(CGBlendMode.sourceIn)
         context.addRect(rect)
         context.drawPath(using: CGPathDrawingMode.fill)

         let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()

         return coloredImage!
    }
}

This takes into consideration scale and also does not produce a lower res image like some other solutions. Usage :

image = image.maskWithColor(color: .green )

This is definitely the implementation to use (disambiguating from other ones on this page). — Scott Corscadden, Apr 21 '17 at 14:59
To be extra safe the force unwraps should be wrapped in if-lets or a guard. — Chris Paveglio, Dec 15 '17 at 18:46

score 10 · Answer 8 · answered Aug 04 '15 at 07:44

Create an extension on UIImage:

/// UIImage Extensions
extension UIImage {
    func maskWithColor(color: UIColor) -> UIImage {

        var maskImage = self.CGImage
        let width = self.size.width
        let height = self.size.height
        let bounds = CGRectMake(0, 0, width, height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(CGImageAlphaInfo.PremultipliedLast.rawValue)
        let bitmapContext = CGBitmapContextCreate(nil, Int(width), Int(height), 8, 0, colorSpace, bitmapInfo)

        CGContextClipToMask(bitmapContext, bounds, maskImage)
        CGContextSetFillColorWithColor(bitmapContext, color.CGColor)
        CGContextFillRect(bitmapContext, bounds)

        let cImage = CGBitmapContextCreateImage(bitmapContext)
        let coloredImage = UIImage(CGImage: cImage)

        return coloredImage!
    }
}

Then you can use it like that:

image.maskWithColor(UIColor.redColor())

This ignores `scale`, `orientation` and other parameters of `UIImage`. — Nikolai Ruhe, Apr 13 '16 at 07:15

score 9 · Answer 9 · answered May 07 '20 at 03:17

9

For iOS13+ there are withTintColor(__:) and withTintColor(_:renderingMode:) methods.

Example usage:

let newImage = oldImage.withTintColor(.red)

or

let newImage = oldImage.withTintColor(.red, renderingMode: .alwaysTemplate)

answered May 07 '20 at 03:17

dakota

293
3
13

score 6 · Answer 10 · answered May 12 '17 at 11:28

Swift 3 extension wrapper from @Nikolai Ruhe answer.

extension UIImageView {

    func maskWith(color: UIColor) {
        guard let tempImage = image?.withRenderingMode(.alwaysTemplate) else { return }
        image = tempImage
        tintColor = color
    }

}

It can be use for UIButton as well, e.g:

button.imageView?.maskWith(color: .blue)

Rajesh Loganathan · Answer 11 · 2019-09-23T05:21:53.463

Add this extension in your code and change image color in storyboard itself.

Swift 4 & 5:

extension UIImageView {
    @IBInspectable
    var changeColor: UIColor? {
        get {
            let color = UIColor(cgColor: layer.borderColor!);
            return color
        }
        set {
            let templateImage = self.image?.withRenderingMode(.alwaysTemplate)
            self.image = templateImage
            self.tintColor = newValue
        }
    }
}

Storyboard Preview:

score 5 · Answer 12 · answered Dec 16 '17 at 07:03

5

Swift 4

 let image: UIImage? =  #imageLiteral(resourceName: "logo-1").withRenderingMode(.alwaysTemplate)
    topLogo.image = image
    topLogo.tintColor = UIColor.white

answered Dec 16 '17 at 07:03

Ahmadreza

6,950
5
50
69

score 5 · Answer 13 · answered Apr 24 '21 at 17:11

5

Simpleminded way:

yourIcon.image = yourIcon.image?.withRenderingMode(.alwaysTemplate)
yourIcon.tintColor = .someColor

BTW it's more fun on Android!

yourIcon.setColorFilter(getColor(R.color.someColor), PorterDuff.Mode.MULTIPLY);

answered Apr 24 '21 at 17:11

Fattie

27,874
70
431
719

This should be the accepted answer! Very straightforward solution! – chlkdst Apr 28 '21 at 13:51
@chlkdst - right, nowadays **it is very easy.** A huge problem with Stackoverflow is that, you get answers which change drastically over the many years. This question is some ten years old - the answers from that era are of no value now. It's a difficult problem on SO. – Fattie Apr 28 '21 at 14:07

Ngima Sherpa · Answer 14 · 2019-12-28T03:00:22.160

4

Add extension Function:

extension UIImageView {
    func setImage(named: String, color: UIColor) {
        self.image = #imageLiteral(resourceName: named).withRenderingMode(.alwaysTemplate)
        self.tintColor = color
    }
}

Use like:

anyImageView.setImage(named: "image_name", color: .red)

edited Dec 28 '19 at 03:00

answered Dec 26 '19 at 10:39

Ngima Sherpa

1,397
1
13
34

score 2 · Answer 15 · answered Dec 11 '19 at 14:24

2

Post iOS 13 you can use it something like this

arrowWhiteImage.withTintColor(.black, renderingMode: .alwaysTemplate)

answered Dec 11 '19 at 14:24

Sanjeevcn

441
7
10

score 1 · Answer 16 · edited Jun 20 '20 at 09:12

Swift 3

21 June 2017

I use CALayer to mask the given image with Alpha Channel

import Foundation


extension UIImage {

    func maskWithColor(color: UIColor) -> UIImage? {
    
        let maskLayer = CALayer()
        maskLayer.bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        maskLayer.backgroundColor = color.cgColor
        maskLayer.doMask(by: self)
        let maskImage = maskLayer.toImage()
        return maskImage
    }

}


extension CALayer {
    func doMask(by imageMask: UIImage) {
        let maskLayer = CAShapeLayer()
        maskLayer.bounds = CGRect(x: 0, y: 0, width: imageMask.size.width, height: imageMask.size.height)
        bounds = maskLayer.bounds
        maskLayer.contents = imageMask.cgImage
        maskLayer.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height)
        mask = maskLayer
    }

    func toImage() -> UIImage?
    {
        UIGraphicsBeginImageContextWithOptions(bounds.size,
                                               isOpaque,
                                               UIScreen.main.scale)
        guard let context = UIGraphicsGetCurrentContext() else {
            UIGraphicsEndImageContext()
            return nil
        }
        render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

score 1 · Answer 17 · answered Sep 15 '17 at 11:34

Swift 3 version with scale and Orientation from @kuzdu answer

extension UIImage {

    func mask(_ color: UIColor) -> UIImage? {
        let maskImage = cgImage!

        let width = (cgImage?.width)!
        let height = (cgImage?.height)!
        let bounds = CGRect(x: 0, y: 0, width: width, height: height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        let context = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)!

        context.clip(to: bounds, mask: maskImage)
        context.setFillColor(color.cgColor)
        context.fill(bounds)

        if let cgImage = context.makeImage() {
            let coloredImage = UIImage.init(cgImage: cgImage, scale: scale, orientation: imageOrientation)
            return coloredImage
        } else {
            return nil
        }
    }
}

score 1 · Answer 18 · answered Jan 16 '18 at 08:31

Swift 4.

Use this extension to create a solid colored image

extension UIImage {   

    public func coloredImage(color: UIColor) -> UIImage? {
        return coloredImage(color: color, size: CGSize(width: 1, height: 1))
    }

    public func coloredImage(color: UIColor, size: CGSize) -> UIImage? {

        UIGraphicsBeginImageContextWithOptions(size, false, 0)

        color.setFill()
        UIRectFill(CGRect(origin: CGPoint(), size: size))

        guard let image = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
        UIGraphicsEndImageContext()

        return image
    }
}

Worked prefect for me in navigationBar.setBackgroundImage and Swift 5. Thanks! — Jesse, Apr 23 '20 at 17:54

score 0 · Answer 19 · answered May 15 '17 at 07:07

Here is swift 3 version of H R's solution.

func overlayImage(color: UIColor) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(self.size, false, UIScreen.main.scale)
    let context = UIGraphicsGetCurrentContext()

    color.setFill()

    context!.translateBy(x: 0, y: self.size.height)
    context!.scaleBy(x: 1.0, y: -1.0)

    context!.setBlendMode(CGBlendMode.colorBurn)
    let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
    context!.draw(self.cgImage!, in: rect)

    context!.setBlendMode(CGBlendMode.sourceIn)
    context!.addRect(rect)
    context!.drawPath(using: CGPathDrawingMode.fill)

    let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return coloredImage
}

score -1 · Answer 20 · answered Sep 17 '16 at 19:31

Since I found Darko's answer very helpful in colorizing custom pins for mapView annotations, but had to do some conversions for Swift 3, thought I'd share the updated code along with my recommendation for his answer:

extension UIImage {
    func maskWithColor(color: UIColor) -> UIImage {

        var maskImage = self.CGImage
        let width = self.size.width
        let height = self.size.height
        let bounds = CGRect(x: 0, y: 0, width: width, height: height)

        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        let bitmapContext = CGContext(data: nil, width: Int(width), height: Int(height), bitsPerComponent: 8, bytesPerRow: 0, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)

        bitmapContext!.clip(to: bounds, mask: maskImage!)
        bitmapContext!.setFillColor(color.cgColor)
        bitmapContext!.fill(bounds)

        let cImage = bitmapContext!.makeImage()
        let coloredImage = UIImage(CGImage: cImage)

        return coloredImage!
    }
}

score -1 · Answer 21 · answered Jul 05 '17 at 16:07

I have modified the extension found here: Github Gist, for Swift 3 which I have tested in the context of an extension for UIImage.

func tint(with color: UIColor) -> UIImage 
{
   UIGraphicsBeginImageContext(self.size)
   guard let context = UIGraphicsGetCurrentContext() else { return self }

   // flip the image
   context.scaleBy(x: 1.0, y: -1.0)
   context.translateBy(x: 0.0, y: -self.size.height)

   // multiply blend mode
   context.setBlendMode(.multiply)

   let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
   context.clip(to: rect, mask: self.cgImage!)
   color.setFill()
   context.fill(rect)

   // create UIImage
   guard let newImage = UIGraphicsGetImageFromCurrentImageContext() else { return self }
   UIGraphicsEndImageContext()

   return newImage
}

works fine, work in swift 5.x AND answer to question ! :) – ingconti Jan 31 '21 at 08:05 — ingconti, Jan 31 '21 at 08:05

How can I color a UIImage in Swift?

21 Answers21

Simpleminded way:

BTW it's more fun on Android!

Swift 3

21 June 2017

Linked