UIColor Extended

CreaTECH Tips

While developing a color management app for iPhone I found that I needed to be able to extract all of the rgba, hsba and hex values from any of the following three ways of creating UIColor objects:

Preset Values
 example: let preSetColor = UIColor.blackColor()
RGBA Values
 example: let rgbaColor = UIColor(red: 15/255, green: 33/255, blue: 18/255, alpha: 0.5)
HSBA Values
 example: let hsbaColor = UIColor(hue: 80/360, saturation: 0.96, brightness: 0.75, alpha: 0.88)

No matter how I created the color, I wanted to extract each of the following proprties: red, green, blue, alpha, hue, saturation, brightness, rgabaString, hsbaString and hexString

To do this, I needed to extend the UIColor Class with two functions and create a new Class to store my color and all of the new properties.

Extending the UIColor Class

To extend the UIColor Class, I added the following to my code:

extension UIColor {
     func rgb() -> (red:CGFloat, green:CGFloat, blue:CGFloat, alpha:CGFloat)? {
        var fRed : CGFloat = 0
         var fGreen : CGFloat = 0
         var fBlue : CGFloat = 0
         var fAlpha: CGFloat = 0

        if self.getRed(&fRed, green: &fGreen, blue: &fBlue, alpha: &fAlpha) {
             return (red:fRed, green:fGreen, blue:fBlue, alpha:fAlpha)
         } else {
             // Could not extract RGBA components:
             return nil
         }
     }
 }
extension UIColor {
     func hsb() -> (hue: CGFloat, saturation: CGFloat,brightness: CGFloat,alpha: CGFloat)? {
         var fHue: CGFloat = 0
         var fSaturation: CGFloat = 0
         var fBrightness: CGFloat = 0
         var fAlpha: CGFloat = 0

        if self.getHue(&fHue, saturation: &fSaturation, brightness: &fBrightness, alpha: &fAlpha) {
             return (hue: fHue, saturation:fSaturation, brightness: fBrightness, alpha:fAlpha)
         } else {
             // Could not extract RGBA components:
             return nil
         }
     }
 }

This now allows me to create some colors like this:

var myColor: UIColor = UIColor(red: 10/255, green: 255/255, blue: 50/255, alpha: 0.5)
var myNewColor: UIColor = UIColor.blueColor()
var myHueColor: UIColor = UIColor(hue: 54/360, saturation: 0.42, brightness: 0.63, alpha: 0.85)

And now use the extension to retrieve the corresponding rgb and hsb values

myColor.rgb()
     returns (.0 0.0392156862745098, .1 1, .2 0.196078431372549, .3 0.5)
myColor.hsb()
     returns (.0 0.360544217687075, .1 0.96078431372549, .2 1, .3 0.5)
myColor.rgb()!.red
     returns 0.0392156862745098
myColor.hsb()!.brightness
     returns 1

Creating a New Class

The extension was not really good enough for me however, as I wanted to be able to have all of the new color properties available to me with more friendly value types, plus I wanted to be able to generate strings that could be passed on to a designer. So I created a new class called colorValues.

class colorValues {
    var color: UIColor
     init(color:UIColor) {
         self.color = color
     }

    var red: Int  {
             return Int(color.rgb()!.red * 255.0)
     }

    var green: Int {
             return Int(color.rgb()!.green * 255.0)
     }

    var blue: Int {
             return Int(color.rgb()!.blue * 255.0)
     }

    var alpha: Float {
             return Float(color.rgb()!.alpha)
     }

    var hue: Int {
             return Int(Float(color.hsb()!.hue * 360.0))
     }

    var saturation: Float {
             return Float(color.hsb()!.saturation)
     }

    var brightness: Float {
             return Float(color.hsb()!.brightness)
     }

    var rgbaString : String {
             return "(\(red), \(green), \(blue), \(alpha))"
     }

    var hexString : String {
             let rHex = String(format: "%02X", red)
             let gHex = String(format: "%02X", green)
             let bHex = String(format: "%02X", blue)
             return "#\(rHex)\(gHex)\(bHex)"
     }

    var hsbString : String {
             return "(\(hue)°, \(round(saturation*1000)/10)%, \(round(brightness*1000)/10)%, \(alpha))"
     }
 }

Now I can add any color to that class and easily retrieve the color itself or any of its properties.

For example:

  1. Create a color using any of the three different methods
     let newColor = UIColor(hue: 54/360, saturation: 42, brightness: 0.63, alpha: 0.5)
  2. Create a new colorValues object with that color
     let newColorWithValues = colorValues(color: newColor)
  3. Now you can extract all of the properties for that color.
newColorWithValues.color - returns the color itself so it can be used just as you would the original constant or variable.
newColorWithValues.red - returns 160 (an integer between 0 and 255)
newColorWithValues.green - returns 153 (an integer between 0 and 255)
newColorWithValues.blue - returns 93 (an integer between 0 and 255)
newColorWithValues.alpha - returns 0.5 (a float between 0 and 1)
newColorWithValues.hue - returns 54 (an integer between 1 and 360)
newColorWithValues.saturation - returns (a float between 0 and 1)
newColorWithValues.brightness - returns (a float between 0 and 1)
newColorWithValues.rgbaString - returns "(160, 153, 93, 0.5)"
newColorWithValues.hexString - returns "#A0995D"
newColorWithValues.hsbString - returns "(54°, 42.0%, 63.0%, 0.5)"

You can download the code and playground used for this blog from here > UIColorExtension.playground

Leave a Reply

Your email address will not be published. Required fields are marked *