swift 3 convert string color to cgcolor

Question

I am new on swift and iOS and there is something I don't know what should I do.

I have colors coming from backend and I want to convert it to CGColor

"colors": [
        "6909A1",
        "7552D1",
        "59B0DC",
        "62E3CC"
      ],

func drawGradient(colors: [CGColor]) {
        addLayer(colors: colors)
    }

What should I do here to pass CGColor array after converting it from JSON. I couldn't find the right solution how to get CGColor from simple String

Various steps: Look how to create UIColor from Hex String, then `UIColor` has a property `CGColor` (that's the one to use). — Larme, Nov 23 '16 at 13:00

vadian · Accepted Answer · 2016-11-23T13:22:50.017

UInt has a convenience initializer to convert a hex string to its hex value

func color(from hexString : String) -> CGColor
{
  if let rgbValue = UInt(hexString, radix: 16) {
    let red   =  CGFloat((rgbValue >> 16) & 0xff) / 255
    let green =  CGFloat((rgbValue >>  8) & 0xff) / 255
    let blue  =  CGFloat((rgbValue      ) & 0xff) / 255
    return UIColor(red: red, green: green, blue: blue, alpha: 1.0).cgColor
  } else {
    return UIColor.black.cgColor
  }
}

Now map the string array to the color array

let hexColors = ["6909A1", "7552D1", "59B0DC", "62E3CC"]

let gradientColors = hexColors.map { color(from:$0) }

or alternatively in an UIColor extension

extension UIColor {

    convenience init(hexString : String)
    {
        if let rgbValue = UInt(hexString, radix: 16) {
            let red   =  CGFloat((rgbValue >> 16) & 0xff) / 255
            let green =  CGFloat((rgbValue >>  8) & 0xff) / 255
            let blue  =  CGFloat((rgbValue      ) & 0xff) / 255
            self.init(red: red, green: green, blue: blue, alpha: 1.0)
        } else {
            self.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
        }
    }
}

let hexColors = ["6909A1", "7552D1", "59B0DC", "62E3CC"]

let gradientColors = hexColors.map { UIColor(hexString:$0).cgColor }

Thank you @vadian. That's exactly what I am looking for – pmb Nov 23 '16 at 13:16 — pmb, Nov 23 '16 at 13:16

score 1 · Answer 2 · answered Nov 23 '16 at 13:00

Not too hard, but the ability to create UIColor/CGColor objects from hex strings is not built into Swift. You can however just place this extension into your project to add it:

extension UIColor {
    public convenience init?(hexString: String) {
        let r, g, b, a: CGFloat

        if hexString.hasPrefix("#") {
            let start = hexString.index(hexString.startIndex, offsetBy: 1)
            let hexColor = hexString.substring(from: start)

            if hexColor.characters.count == 8 {
                let scanner = Scanner(string: hexColor)
                var hexNumber: UInt64 = 0

                if scanner.scanHexInt64(&hexNumber) {
                    r = CGFloat((hexNumber & 0xff000000) >> 24) / 255
                    g = CGFloat((hexNumber & 0x00ff0000) >> 16) / 255
                    b = CGFloat((hexNumber & 0x0000ff00) >> 8) / 255
                    a = CGFloat(hexNumber & 0x000000ff) / 255

                    self.init(red: r, green: g, blue: b, alpha: a)
                    return
                }
            }
        }

        return nil
    }
}

Then you could do something like this to convert that hex colour array to a CGColor array:

func convertColours() {
    let stringColours = ["6909A1",
                         "7552D1",
                         "59B0DC",
                         "62E3CC"]
    var colours = [CGColor]()

    for stringColour in stringColours {
        if let colour = UIColor(hexString: stringColour) {
            colours.append(colour.cgColor)
        }
    }        
}

score 0 · Answer 3 · answered Nov 23 '16 at 13:24

Try This way

extension UIColor {
    convenience init(red: Int, green: Int, blue: Int) {
        self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0)
    }

    func color(with hex: Int) -> CGColor {
        let color = UIColor(red:(hex >> 16) & 0xff, green:(hex >> 8) & 0xff, blue:hex & 0xff)
        return color.cgColor
    }
}
UIColor().color(with: Int(stringColours[0], radix: 16)!)
UIColor().color(with: 0x333333)

swift 3 convert string color to cgcolor

3 Answers3