Swift UIColor Extension – Create using RGB Values (Not %)

I’ll say it up front – I’m not a great designer. What tends to happen with me and projects is that I end up saving all-things color until the end of a project. You know… the old procrastinator’s motto: “If you don’t get it done today and tomorrow doesn’t come, then you ain’t gotta do it!”

So the other day came and I had to “do color”…

Thankfully, a buddy of mine has good skills in the area, and gave me a color palette to use. Score!

Working with colors

I decided it might be nice to go ahead and encapsulate my color scheme in code and set the various tints and font colors and navigation bar backgrounds to their appropriate values in code.

This seemed like a really nice way to keep all the color stuff in once place, so that if I ever needed to change things, I’d be able to do it in one spot, and the whole app would just magically take on the adjustments.

Inevitably, I’d need to create myself some UIColor instances.

Baffled

For those of us who spend a lot of time designing in the Storyboard, as opposed to creating views and layouts directly in code, coming up against the UIColor API when you haven’t in a while can be…well…baffling. Not because it’s “hard” but because it’s not as intuitive as it looks on first-sight. Here’s what I mean…

My color-adept friend had given me some hex color values. Looking at UIColor of course, there’s no initializer or class function to create a color with such a value. No worries, though – there are plenty of converters out there!

So I got my red, green, and blue values all in order and did the thing that seemed most obvious: I supplied UIColor‘s init method with those values, verbatim:

let primaryColor = UIColor(red: 39.0, green: 44.0, blue: 79.0, alpha: 1.0)

And then I realized that I hit the same “gotcha” that I had before. UIColor takes a percentage of red, green, and blue, not the value of red, green, and blue. I needed to divide the values by 255.0 each in order to obtain a value between 0 and 1 as the initializer requires. Sure, this is in the documentation:

The red component of the color object, specified as a value from 0.0 to 1.0.

Similar instructions appear for green, blue, and alpha.

It’s easy enough to fix, but man – that sure seems like an easy-to-fall-for mistake if you’re coming to this API after spending time away from it, or if you’re brand new to iOS development.

UIColor extension

Having to divide the RGB values by 255.0 every time was just annoying enough that I created a UIColor extension to help me be able to do the intuitive thing and just supply the RGB values verbatim, like I’d done to begin with. Here it is for your enjoyment:

1extension UIColor {
2    static func colorWithRedValue(#redValue: CGFloat, greenValue: CGFloat, blueValue: CGFloat, alpha: CGFloat) -> UIColor {
3        return UIColor(red: redValue/255.0, green: greenValue/255.0, blue: blueValue/255.0, alpha: alpha)
4    }
5}

Wrapping up

I feel a little silly for having made this mistake, but hey – making the mistake is a good way to remember what not to do in the future. And now that I’ve written an extension (and this blog post), maybe I’ll be set for next time I spend extended periods of time avoiding colors.