UIColor finest practices in Swift

What are coloration fashions and coloration areas?

A coloration mannequin is a technique of describing a coloration.

• RGB – Crimson+Inexperienced+Blue
• HSB – Hue+Saturation+Brightness

There are a number of different coloration fashions, however in case you are coping with iOS colours you ought to be acquainted with these two above. Normally you will work with the RGBA & HSBA coloration fashions that are principally the identical as above prolonged with the alpha channel the place the letter A stands for that. 😉

A coloration area is the set of colours which might be displayed or reproduced in a medium (whether or not saved, printed or displayed). For instance, sRGB is a selected set of intensities for crimson, inexperienced and blue and defines the colours that may be reproduced by mixing these ranges of crimson, inexperienced and blue.

Sufficient from the idea, let’s do some coloration magic! 💫💫💫

The way to work with UIColor objects utilizing RGBA and HSBA values in Swift?

Do you bear in mind the outdated Paint program from old-school Home windows occasions?

I’ve used Microsoft Paint so much, and I liked it. 😅

Again then with none CS data I used to be all the time questioning in regards to the numbers between 0 and 255 that I needed to decide. If you’re working with RGB colours you often outline your coloration the identical means, besides that in iOS the values are between 0 and 1, however that is only a totally different illustration of the fraction of 255.

So you may make a coloration with RGB codes utilizing the identical logic.

UIColor(crimson: CGFloat(128)/CGFloat(255),
        inexperienced: CGFloat(128)/CGFloat(255),
        blue: CGFloat(128)/CGFloat(255),
        alpha: 1)

UIColor(crimson: 0.5, inexperienced: 0.5, blue: 0.5, alpha: 1)

See? Fairly straightforward, huh? 👍

Alternatively you should utilize HSB values, nearly the identical logic applies for these values, besides that hue goes from 0 ’til 360 (due to the precise coloration wheel), nonetheless saturation and brightness are measured in a “p.c like” format 0-100, so it’s important to take into consideration these numbers in case you map them to floating level values.

UIColor(hue: CGFloat(120)/CGFloat(360), saturation: 0.5, brightness: 0.5, alpha: 1)
UIColor(hue: 0.3, saturation: 0.5, brightness: 0.5, alpha: 1)

Now let’s reverse the scenario and let me present you methods to get again these elements from an precise UIColor occasion with the assistance of an extension.

public extension UIColor {
    public var rgba: (crimson: CGFloat, inexperienced: CGFloat, blue: CGFloat, alpha: CGFloat) {
        var r: CGFloat = 0
        var g: CGFloat = 0
        var b: CGFloat = 0
        var a: CGFloat = 0
        self.getRed(&r, inexperienced: &g, blue: &b, alpha: &a)
        return (r, g, b, a)
    }

    public var hsba: (hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat) {
        var h: CGFloat = 0
        var s: CGFloat = 0
        var b: CGFloat = 0
        var a: CGFloat = 0
        self.getHue(&h, saturation: &s, brightness: &b, alpha: &a)
        return (h, s, b, a)
    }
}

So right here it’s methods to learn the crimson, inexperienced blue slash hue saturation brightness and alpha elements from a UIColor. With this little neat extension you possibly can merely get the part values and use them via their correct names.

UIColor.yellow.rgba.crimson
UIColor.yellow.hsba.hue

The way to convert HEX colours to RGB and vica versa for UIColor objects in Swift?

iOS developer 101 course, first questions:

• How the fuck can I create a UIColor from a hex string?
• The way to convert a hex coloration to a UIColor?
• The way to use a hext string to make a UIColor?

Okay, perhaps these will not be the primary questions, however it’s undoubtedly inside widespread ones. The reply is fairly easy: via an extension. I’ve a very nice answer in your wants, which can deal with a lot of the instances like utilizing just one, 2, 3 or 6 hex values.

public extension UIColor {

    public comfort init(hex: Int, alpha: CGFloat = 1.0) {
        let crimson = CGFloat((hex & 0xFF0000) >> 16) / 255.0
        let inexperienced = CGFloat((hex & 0xFF00) >> 8) / 255.0
        let blue = CGFloat((hex & 0xFF)) / 255.0

        self.init(crimson: crimson, inexperienced: inexperienced, blue: blue, alpha: alpha)
    }

    public comfort init(hex string: String, alpha: CGFloat = 1.0) {
        var hex = string.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

        if hex.hasPrefix("#") {
            let index = hex.index(hex.startIndex, offsetBy: 1)
            hex = String(hex[index...])
        }

        if hex.rely < 3 {
            hex = "(hex)(hex)(hex)"
        }

        if hex.vary(of: "(^[0-9A-Fa-f]{6}$)|(^[0-9A-Fa-f]{3}$)", choices: .regularExpression) != nil {
            if hex.rely == 3 {

                let startIndex = hex.index(hex.startIndex, offsetBy: 1)
                let endIndex = hex.index(hex.startIndex, offsetBy: 2)

                let redHex = String(hex[..<startIndex])
                let greenHex = String(hex[startIndex..<endIndex])
                let blueHex = String(hex[endIndex...])

                hex = redHex + redHex + greenHex + greenHex + blueHex + blueHex
            }

            let startIndex = hex.index(hex.startIndex, offsetBy: 2)
            let endIndex = hex.index(hex.startIndex, offsetBy: 4)
            let redHex = String(hex[..<startIndex])
            let greenHex = String(hex[startIndex..<endIndex])
            let blueHex = String(hex[endIndex...])

            var redInt: CUnsignedInt = 0
            var greenInt: CUnsignedInt = 0
            var blueInt: CUnsignedInt = 0

            Scanner(string: redHex).scanHexInt32(&redInt)
            Scanner(string: greenHex).scanHexInt32(&greenInt)
            Scanner(string: blueHex).scanHexInt32(&blueInt)

            self.init(crimson: CGFloat(redInt) / 255.0,
                      inexperienced: CGFloat(greenInt) / 255.0,
                      blue: CGFloat(blueInt) / 255.0,
                      alpha: CGFloat(alpha))
        }
        else {
            self.init(crimson: 0.0, inexperienced: 0.0, blue: 0.0, alpha: 0.0)
        }
    }

    var hexValue: String {
        var coloration = self

        if coloration.cgColor.numberOfComponents < 4 {
            let c = coloration.cgColor.elements!
            coloration = UIColor(crimson: c[0], inexperienced: c[0], blue: c[0], alpha: c[1])
        }
        if coloration.cgColor.colorSpace!.mannequin != .rgb {
            return "#FFFFFF"
        }
        let c = coloration.cgColor.elements!
        return String(format: "#%02Xpercent02Xpercent02X", Int(c[0]*255.0), Int(c[1]*255.0), Int(c[2]*255.0))
    }
}

Right here is how you should utilize it with a number of enter variations:

let colours = [
    UIColor(hex: "#cafe00"),
    UIColor(hex: "cafe00"),
    UIColor(hex: "c"),
    UIColor(hex: "ca"),
    UIColor(hex: "caf"),
    UIColor(hex: 0xcafe00),
]
let values = colours.map { $0.hexValue }
print(values) 

As you possibly can see I’ve tried to copy the conduct of the CSS guidelines, so you should have the liberty of much less characters if a hext string is like #ffffff (you should utilize simply f, as a result of # is non-compulsory). Additionally you possibly can present integers as properly, that is only a easy “overloaded” comfort init methodology.

Additionally .hexValue will return the string illustration of a UIColor occasion. 👏👏👏

The way to generate a random UIColor in Swift?

That is additionally a quite common query for freshmen, I do not actually need to waste the area right here by deep rationalization, arc4random() is simply doing it is job and the output is a pleasant randomly generated coloration.

public extension UIColor {
    public static var random: UIColor {
        let max = CGFloat(UInt32.max)
        let crimson = CGFloat(arc4random()) / max
        let inexperienced = CGFloat(arc4random()) / max
        let blue = CGFloat(arc4random()) / max

        return UIColor(crimson: crimson, inexperienced: inexperienced, blue: blue, alpha: 1.0)
    }
}

The way to create a 1×1 pixel huge UIImage object with a single stable coloration in Swift?

I am utilizing this trick to set the background coloration of a UIButton object. The rationale for that is state administration. If you happen to press the button the background picture shall be darker, so there shall be a visible suggestions for the person. Nonetheless by setting the background coloration straight of a UIButton occasion will not work like this, and the colour will not change in any respect on the occasion. 👆

public extension UIColor {
    public var imageValue: UIImage {
        let rect = CGRect(origin: .zero, dimension: CGSize(width: 1, top: 1))
        UIGraphicsBeginImageContext(rect.dimension)
        let context = UIGraphicsGetCurrentContext()!
        context.setFillColor(self.cgColor)
        context.fill(rect)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage!
    }
}

The snippet above will produce a 1×1 pixel picture object from the supply coloration. You should utilize that anywere, however right here is my instance with a button background:

button.setBackgroundImage(UIColor.crimson.imageValue, for: .regular)

On-line coloration palettes

You possibly can’t discover the precise coloration? No drawback, these hyperlinks will allow you to to decide on the right one and to get some inspiration. Additionally in case you are in search of flat UI colours or materials design colours these are the precise hyperlinks the place it is best to head first.

A private factor of mine: expensive designers, please by no means ever attempt to use materials design rules for iOS apps. Thanks. HIG

Convert colours on-line

Lastly there are some nice on-line coloration converter instruments, in case you are in search of an amazing one, it is best to attempt these first.

Managing UIColors

In case your app goal is iOS 11+ you should utilize asset catalogs to arrange your coloration palettes, but when you’ll want to go under iOS 11, I might recommend to make use of an enum or struct with static UIColor properties. These days I am often doing one thing like this.

class App {
    struct Colour {
        static var inexperienced: UIColor { return UIColor(hex: 0x4cd964) }
        static var yellow: UIColor { return UIColor(hex: 0xffcc00) }
        static var crimson: UIColor { return UIColor(hex: 0xff3b30) }
    }

    
}

App.Colour.yellow

Normally I am grouping collectively fonts, colours and so forth inside structs, however this is only one means of doing issues. You too can use one thing like R.swift or something that you just want.

That is it for now, I feel I’ve lined a lot of the fundamental questions on UIColor.

Be happy to contact me when you have a subject or suggestion that you just’d wish to see lined right here within the weblog. I am all the time open for brand new concepts. 😉