Breadcrumb

    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. You can learn more on the proper use of color on the Accessiblity page.