# Color

Classes and helpers for setting an element's background color, or text color.

There are a number of color classes, as well as helper utilities to set the color of an element. You should (almost) never need to add CSS to change color; instead, prefer to use one of the utility classes listed herein.

TIP

All colors are defined in the settings file: styles/settings/colors.scss. This includes backgrounds, text colors, and more.

# Background colors

# Brand

Class	Properties
.bg-teal	`background-color:#01bbb4` `border-color:#01bbb4`
.bg-seafoam	`background-color:#3cdbc0` `border-color:#3cdbc0`
.bg-blue	`background-color:#0072f0` `border-color:#0072f0`
.bg-purple	`background-color:#1b1443` `border-color:#1b1443`
.bg-royal	`background-color:#303ab2` `border-color:#303ab2`
.bg-green	`background-color:#00816d` `border-color:#00816d`

# Alerts

Class	Properties
.bg-error	`background-color:#ed5565` `border-color:#ed5565`
.bg-warning	`background-color:#f8ac59` `border-color:#f8ac59`
.bg-success	`background-color:#01bbb4` `border-color:#01bbb4`
.bg-info	`background-color:#01bbb4` `border-color:#01bbb4`

# Shades

Class	Properties
.bg-white	`background-color:#fff` `border-color:#fff`
.bg-light-grey	`background-color:#eef2f4` `border-color:#eef2f4`
.bg-grey	`background-color:#c5c9d4` `border-color:#c5c9d4`
.bg-dark-grey	`background-color:#676a6c` `border-color:#676a6c`
.bg-black	`background-color:#262626` `border-color:#262626`

# Text colors

# Default

Class	Properties
.color-light	`color:#c5c9d4`	The quick brown fox
.color-medium	`color:#676a6c`	The quick brown fox
.color-dark	`color:#262626`	The quick brown fox
.color-inverted	`color:#fff`	The quick brown fox
.color-disabled	`color:#rgba(#000, 0.38)`	The quick brown fox
.color-link	`color:#0072f0`	The quick brown fox
.color-hover	`color:#338ff3`	The quick brown fox

# Brand

Class	Properties
.color-teal	`color:#01bbb4`	The quick brown fox
.color-seafoam	`color:#3cdbc0`	The quick brown fox
.color-blue	`color:#0072f0`	The quick brown fox
.color-royal	`color:#0022ac`	The quick brown fox
.color-purple	`color:#1b1443`	The quick brown fox

# Alerts

Class	Properties
.color-error	`color:#e4002b`	The quick brown fox
.color-warning	`color:#ff9425`	The quick brown fox
.color-success	`color:#01bbc8`	The quick brown fox
.color-info	`color:#01bbc8`	The quick brown fox

← Notifications Layout →