This is a quick Swift Recipe on how to convert hex colour to UIColor.
You can convert hex colour to UIColor using this simple String extension.
Below is a simple extension to String
that will get the UIColor
from the hex colour:
extension String {
var color: UIColor {
let hex = trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
if #available(iOS 13, *) {
//If your string is not a hex colour String then we are returning white color. you can change this to any default colour you want.
guard let int = Scanner(string: hex).scanInt32(representation: .hexadecimal) else { return #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) }
let a, r, g, b: Int32
switch hex.count {
case 3: (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17) // RGB (12-bit)
case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF) // RGB (24-bit)
case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF) // ARGB (32-bit)
default: (a, r, g, b) = (255, 0, 0, 0)
}
return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: CGFloat(a) / 255.0)
} else {
var int = UInt32()
Scanner(string: hex).scanHexInt32(&int)
let a, r, g, b: UInt32
switch hex.count {
case 3: (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17) // RGB (12-bit)
case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF) // RGB (24-bit)
case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF) // ARGB (32-bit)
default: (a, r, g, b) = (255, 0, 0, 0)
}
return UIColor(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: CGFloat(a) / 255.0)
}
}
}
To use the extension:
let hexColor = "#970a28".color
//For invalid hex colour string it returns default white colour.
let hexColor = "hello".color
So this is a String extension, you might want to use UIColor extension!
Don’t worry, we have got you covered on that as well. Use this:
extension UIColor {
convenience init?(_ string: String) {
let hex = string.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
if #available(iOS 13, *) {
//If your string is not a hex colour String then we are returning white color. you can change this to any default colour you want.
guard let int = Scanner(string: hex).scanInt32(representation: .hexadecimal) else { return nil }
let a, r, g, b: Int32
switch hex.count {
case 3: (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17) // RGB (12-bit)
case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF) // RGB (24-bit)
case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF) // ARGB (32-bit)
default: (a, r, g, b) = (255, 0, 0, 0)
}
self.init(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: CGFloat(a) / 255.0)
} else {
var int = UInt32()
Scanner(string: hex).scanHexInt32(&int)
let a, r, g, b: UInt32
switch hex.count {
case 3: (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17) // RGB (12-bit)
case 6: (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF) // RGB (24-bit)
case 8: (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF) // ARGB (32-bit)
default: (a, r, g, b) = (255, 0, 0, 0)
}
self.init(red: CGFloat(r) / 255.0, green: CGFloat(g) / 255.0, blue: CGFloat(b) / 255.0, alpha: CGFloat(a) / 255.0)
}
}
}
We have used the same logic as we used in the String extension with some adjustments to use it as the initialiser for UIColor.
This is an optional initialiser, so it might produce nil
for invalid hex strings. Be careful while force unwrapping!
Use the UIColor extension as follows:
let hexColor = UIColor("#970a28")
//For invalid hex colour string it returns nil.
let hexColor = UIColor("hello")
So there it is, an extension of String and an extension of UIColor. Whatever feels right and easy to use to you, use it! As both does the exact same thing. Again, be careful when you use the UIColor extension as it will produce an optional UIColor value.
Use it and build your own rainbow!
Learn how to add animations to your SwiftUi app here!
Checkout another quick article on How To Add Splash Screen in SwiftUI.
If you want to learn how to use SwiftUI
in your existing app, then you can read it here!
or If you want to learn how to use and convert your UIViewControllers
in SwiftUI
, then you can read it here!
0 Comments