Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the best/shortest way to convert a UIColor to hex (web color) in Swift?

Tags:

xcode

swift

I came up with the following solution, but would like to know if someone has a cleaner approach to it (tested it in Xcode-Playground):

let colors = CGColorGetComponents( UIColor.greenColor().CGColor )
let hexCol:String = NSString(format: "#%02x%02x%02x", Int(colors[0] * 255.0), Int(colors[1] * 255.0), Int(colors[2] * 255.0))

resulting in #00ff00

where UIColor.greenColor() is an example for any UIColor.

edit: Taken from Leonardo's Answer, i felt like refactoring it a bit (all of his tests still apply).

extension UIColor {
    typealias RGBComponents = (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
    typealias HSBComponents = (hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat)

    var rgbComponents:RGBComponents {
        var c:RGBComponents = (0,0,0,0)

        if getRed(&c.red, green: &c.green, blue: &c.blue, alpha: &c.alpha) {
            return c
        }

        return (0,0,0,0)
    }

    var cssRGBA:String {
        return String(format: "rgba(%d,%d,%d, %.02f)", Int(rgbComponents.red * 255), Int(rgbComponents.green * 255), Int(rgbComponents.blue * 255), Float(rgbComponents.alpha))
    }
    var hexRGB:String {
        return String(format: "#%02x%02x%02x", Int(rgbComponents.red * 255), Int(rgbComponents.green * 255), Int(rgbComponents.blue * 255))
    }
    var hexRGBA:String {
        return String(format: "#%02x%02x%02x%02x", Int(rgbComponents.red * 255), Int(rgbComponents.green * 255), Int(rgbComponents.blue * 255), Int(rgbComponents.alpha * 255) )
    }

    var hsbComponents:HSBComponents {
        var c:HSBComponents = (0,0,0,0)

        if getHue(&c.hue, saturation: &c.saturation, brightness: &c.brightness, alpha: &c.alpha) {
            return c
        }

        return (0,0,0,0)
    }
}

let v1 = UIColor.redColor().rgbComponents.red
let v2 = UIColor.redColor().cssRGBA
let v3 = UIColor.redColor().hexRGBA
let v4test = UIColor.RGBComponents(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
like image 365
BananaAcid Avatar asked Feb 24 '15 13:02

BananaAcid


1 Answers

Xcode 8.2 • Swift 3.0.2

Getting Red, Green, Blue and Alpha components from a UIColor:

extension UIColor {
    var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
        var r: CGFloat = 0, g: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
        if getRed(&r, green: &g, blue: &b, alpha: &a) { 
            return (r,g,b,a)
        }
        return (0, 0, 0, 0)
    }

    // hue, saturation, brightness and alpha components from UIColor**
    var hsba: (hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat) {
        var hue: CGFloat = 0, saturation: CGFloat = 0, brightness: CGFloat = 0, alpha: CGFloat = 0
        if getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha) {
            return (hue, saturation, brightness, alpha)
        }
        return (0,0,0,0)
    }

    var htmlRGB: String {
        let rgbaCache = rgba
        return String(format: "#%02x%02x%02x", Int(round(rgbaCache.red * 255)), Int(round(rgbaCache.green * 255)), Int(round(rgbaCache.blue * 255)))
    }

    var htmlRGBA: String {
        let rgbaCache = rgba
        return String(format: "#%02x%02x%02x%02x", Int(round(rgbaCache.red * 255)), Int(round(rgbaCache.green * 255)), Int(round(rgbaCache.blue * 255)), Int(round(rgbaCache.alpha * 255)) )
    }
}

Testing it:

HTML Colors

let myWhiteWebColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1).htmlRGBA      // #ffffffff
let myGreyWebColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1).htmlRGBA // #7f7f7fff
let myBlackWebColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).htmlRGBA      // #000000ff
let myRedWebColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1).htmlRGBA        // #ff0000ff
let myGreenWebColor = UIColor(red: 0, green: 1, blue: 0, alpha: 1).htmlRGBA      // #00ff00ff
let myBlueWebColor = UIColor(red: 0, green: 0, blue: 1, alpha: 1).htmlRGBA       // #0000ffff

let myColorBlack = UIColor.black.htmlRGBA              // #000000ff
let myLghtGrayColor = UIColor.lightGray.htmlRGBA       // #aaaaaaff
let myDarkGrayColor = UIColor.darkGray.htmlRGBA        // #555555ff

let myRedHueWebColor = UIColor(hue: 1, saturation: 1, brightness: 1, alpha: 1).htmlRGBA  //ff0000ff

RGB Components

UIColor.red.rgba        // (1.0, 0.0, 0.0, 1.0)
UIColor.red.rgba.red    // 1
UIColor.red.rgba.green  // 0
UIColor.red.rgba.blue   // 0
UIColor.red.rgba.alpha  // 1

UIColor.green.rgba       // (0.0, 1.0, 0.0, 1.0)
UIColor.green.rgba.red   // 0
UIColor.green.rgba.green // 1
UIColor.green.rgba.blue  // 0
UIColor.green.rgba.alpha // 1

UIColor.blue.rgba        // (0.0, 0.0, 1.0, 1.0)
UIColor.blue.rgba.red    // 0
UIColor.blue.rgba.green  // 0
UIColor.blue.rgba.blue   // 1
UIColor.blue.rgba.alpha  // 1

Hue Components

UIColor.red.hsba               // (0.0, 1.0, 1.0, 1.0)
UIColor.red.hsba.hue           // 1
UIColor.red.hsba.saturation    // 1
UIColor.red.hsba.brightness    // 1
UIColor.red.hsba.alpha         // 1

UIColor.green.hsba             // (0.333333333333333, 1.0, 1.0, 1.0)
UIColor.green.hsba.hue         // 0.3333333333333333
UIColor.green.hsba.saturation  // 1
UIColor.green.hsba.brightness  // 1
UIColor.green.hsba.alpha       // 1

UIColor.blue.hsba              // (0.666666666666667, 1.0, 1.0, 1.0)
UIColor.blue.hsba.hue          // 0.666666666666667
UIColor.blue.hsba.saturation   // 1.0
UIColor.blue.hsba.brightness   // 1.0
UIColor.blue.hsba.alpha        // 1.0

UIColor.clear.hsba       // (.0 0, .1 0, .2 0, .3 0)

UIColor.blue.htmlRGB     //"#0000ff"
UIColor.blue.htmlRGBA    //"#0000ffff"
like image 71
Leo Dabus Avatar answered Nov 15 '22 06:11

Leo Dabus