UIKit iOS v3
UIKit iOS
UIKit
iOS
Home
/
UIKit
/
iOS
This is the new Docs for UIKit v3 beta for iOS. To see the previous Docs, click here.

Color set

The SBUColorSet class manages a set of UIColor properties used in UIKit views, which includes background and main colors. While the UIKit provides a default color set, you can customize the values of SBUColorSet and create your own colorful views. See what the default color palette used in SBUColorSet looks like below.

Note : You need to configure custom colors prior to initializing the views in view controller.


Customize colors

You can override the properties of SBUColorSet to customize the colors. However, you must also customize and apply the changes to the theme that's using the colors. Make sure you select and change colors you wish to use in your client app and then customize the theme accordingly.

SBUColorSet.background100 = .red;

Note : Change the color values before you customize the theme.

List of colors for elements

ElementColor

primary100

UIColor(red: 219.0 / 255.0, green: 209.0 / 255.0, blue: 1.0, alpha: 1.0)

primary200

UIColor(red: 194.0 / 255.0, green: 169.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0)

primary300

UIColor(red: 116.0 / 255.0, green: 45.0 / 255.0, blue: 221.0 / 255.0, alpha: 1.0)

primary400

UIColor(red: 98.0 / 255.0, green: 17.0 / 255.0, blue: 200.0 / 255.0, alpha: 1.0)

primary500

UIColor(red: 73.0 / 255.0, green: 19.0 / 255.0, blue: 137.0 / 255.0, alpha: 1.0)

secondary100

UIColor(red: 168.0 / 255.0, green: 226.0 / 255.0, blue: 171.0 / 255.0, alpha: 1.0)

secondary200

UIColor(red: 105.0 / 255.0, green: 192.0 / 255.0, blue: 133.0 / 255.0, alpha: 1.0)

secondary300

UIColor(red: 37.0 / 255.0, green: 156.0 / 255.0, blue: 114.0 / 255.0, alpha: 1.0)

secondary400

UIColor(red: 2.0 / 255.0, green: 125.0 / 255.0, blue: 105.0 / 255.0, alpha: 1.0)

secondary500

UIColor(red: 6.0 / 255.0, green: 104.0 / 255.0, blue: 88.0 / 255.0, alpha: 1.0)

background50

UIColor(white: 1.0, alpha: 1.0)

background100

UIColor(white: 238.0 / 255.0, alpha: 1.0)

background200

UIColor(white: 224.0 / 255.0, alpha: 1.0)

background300

UIColor(white: 189.0 / 255.0, alpha: 1.0)

background400

UIColor(white: 57.0 / 255.0, alpha: 1.0)

background500

UIColor(white: 44.0 / 255.0, alpha: 1.0)

background600

UIColor(white: 22.0 / 255.0, alpha: 1.0)

background700

UIColor(white: 0.0, alpha: 1.0)

overlay01

UIColor(white: 0.0, alpha: 0.55)

overlay02

UIColor(white: 0.0, alpha: 0.32)

onlight01

UIColor(white: 0.0, alpha: 0.88)

onlight02

UIColor(white: 0.0, alpha: 0.5)

onlight03

UIColor(white: 0.0, alpha: 0.38)

onlight04

UIColor(white: 0.0, alpha: 0.12)

ondark01

UIColor(white: 1.0, alpha: 0.88)

ondark02

UIColor(white: 1.0, alpha: 0.5)

ondark03

UIColor(white: 1.0, alpha: 0.38)

ondark04

UIColor(white: 1.0, alpha: 0.12)

error100

UIColor(red: 253.0 / 255.0, green: 170.0 / 255.0, blue: 170.0 / 255.0, alpha: 1.0)

error200

UIColor(red: 246.0 / 255.0, green: 97.0 / 255.0, blue: 97.0 / 255.0, alpha: 1.0)

error300

UIColor(red: 222.0 / 255.0, green: 54.0 / 255.0, blue: 11.0 / 255.0, alpha: 1.0)

error400

UIColor(red: 191.0 / 255.0, green: 7.0 / 255.0, blue: 17.0 / 255.0, alpha: 1.0)

error500

UIColor(red: 157.0 / 255.0, green: 9.0 / 255.0, blue: 30.0 / 255.0, alpha: 1.0)

information

UIColor(red: 173.0 / 255.0, green: 201.0 / 255.0, blue: 1.0, alpha: 1.0)

highlight

UIColor(red: 1.0, green: 242.0 / 255.0, blue: 182.0 / 255.0, alpha: 1.0)