Introduction

Universal Theme uses a consistent set of colors across the included components. These colors can be grouped into two palettes: General Colors and Stateful Colors.

You can learn how to use these colors in your own custom UI components by viewing the CSS modifier classes in the Reference section.

General Colors

General colors are used for adding color accents to several application components such as Charts, Cards, and and more.

There are 15 primary colors which are modified to become slightly lighter or darker to create a total of 45 color options. You can customize these colors by modifying the Color Palette within Theme Roller.

Primary Colors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Primary Colors - Lighter

16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Primary Colors - Darker

31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Stateful Colors

Stateful colors are used for convey additional meaning for a given UI component. For example, you may choose to color a warning alert with a yellow tint.

There are 6 stateful colors: normal, hot, informational, danger, warning, and success. You may customize these colors by modifying the Status Colors within Theme Roller.

Normal State
Hot State
Info State
Danger State
Warning
Success

Note: Color alone should not be used to convey information as it may not always be accessible.