UIColor in Swift

Make your apps colorful

Sridharan T

Published in

The Startup

3 min readJul 17, 2020

UIColor

An object that stores color data and sometimes opacity.

There are several ways to select colors. The two important color identification systems are RGB and HSB. The most useful to programmers is the RGB or Red-Green-Blue color system. Each of the color components can be expressed separately as a value between 0 and 255, with 255 being the full color and 0 being no color.

Built-In UIColor Presets

There are a few built-in colors, which are accessed with class variables. These are the available preset colors:

If you need to store these, like for background color, you would use the code:

Since this is a class variable, you call these presets directly from the UIColor class, without having to make an instance of it.

Creating a custom UIColor Object

Now, the presets above are useful, but if you want to make your own color i.e. somewhere between those colors. This can be done in swift by instantiating a custom UIColor object with an initializer.

These are some available initializers,

init(white: CGFloat, alpha: CGFloat)
init(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat)
init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
init(displayP3Red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat)
init(cgColor: CGColor)
init(patternImage image: UIImage)
init(ciColor: CIColor)
init(dynamicProvider: @escaping (UITraitCollection) -> UIColor)

Each one takes a CGFloat value between 0.0 and 1.0, referring to either the complete absence of or the maximum amount of that color component respectively. So, this means that even if you have pure RGB values in decimal or hexadecimal format, you will have to divide them by decimal 255 to get the amount to input here.

Then we make a new color with one of these initializers and store it in a variable, like so:

Instead of decimal values, we can also use HEX values.

Here, the 0x represents the hex type and red, blue, green values are represented as 00.

First of all, what is alpha?.

Alpha levels are the amount of transparency of color, or how much of the color underneath we can see. These colors can be made completely transparent with an alpha value of 0, or completely opaque with an alpha of 1.

Extension for UIColor

We can extend our UIColor as

NOTE: we cannot name the parameter alpha because of a name collision with the existing initializer.

It can be called as:

Demo Project

Let’s make a demonstration project so that you can know better about UIColor.

In this project, I will change the background color of the view using RGB values. I will change the values using sliders for each type(RGB).

Create a sample project and add three sliders to your main.storyboard. Set the minimum value is 0 and the maximum value is 255.
Create outlets for three sliders and the background view.
Create IBAction for three sliders and add RGB values to the background color.

The code for this project is

When we run the app, the result will be