Colors

Available since 1.0.0 Last updated 1.4.2

Colors bring designs to life. It is used in a meaningful way to express emotions and tone, and promotes a distinct and consistent look and feel throughout all application.

Each color is available to developers with a SASS mixin, CSS variables and as a series of CSS helpers.

Action

The brand color used prominently in the application for interactive elements like buttons and links. An inverse value is included when the action color is used as a background.

1 hsl(210, 91%, 43%)
#0A6ED1 var(--fd-color-action-1)
2 hsl(210, 0%, 100%)
#FFFFFF var(--fd-color-action-2)
3 hsl(210, 90%, 33%)
#0854A1 var(--fd-color-action-3)

Shell

Special colors used for the application shellbar background and icons.

1 hsl(210, 28%, 29%)
#354A5F var(--fd-color-shell-1)
2 hsl(210, 100%, 91%)
#D1E8FF var(--fd-color-shell-2)
3 hsl(210, 44%, 23%)
#283848 var(--fd-color-shell-3)
4 hsl(211, 44%, 19%)
#23303E var(--fd-color-shell-4)
5 hsl(211, 33%, 61%)
#7996B4 var(--fd-color-shell-5)

Text

Several shades of text, as well as an inverse color, are included for varying degrees of emphasis.

1 hsl(210, 7.5%, 21%)
#32363A var(--fd-color-text-1)
2 hsl(210, 5%, 33.5%)
#515559 var(--fd-color-text-2)
3 hsl(210, 3%, 42.7%)
#6A6d70 var(--fd-color-text-3)
4 hsl(210, 2.5%, 46.5%)
#74777A var(--fd-color-text-4)
5 hsl(210, 0%, 100%)
#FFFFFF var(--fd-color-text-5)

Backgrounds

1 hsl(210, 9%, 93.7%)
#EDEFF0 var(--fd-color-background-1)
2 hsl(210, 0%, 100%)
#FFFFFF var(--fd-color-background-2)
3 hsl(145, 10%, 97%)
#E4FCEE var(--fd-color-background-3)
4 hsl(28, 86.7%, 97.1%)
#FEF7F1 var(--fd-color-background-4)
5 hsl(0, 100%, 96.1%)
#FFEBEB var(--fd-color-background-5)
6 hsl(210, 4%, 98%)
#F5FAFF var(--fd-color-background-6)
7 hsl(0, 0, 96%)
#F4F4F4 var(--fd-color-background-7)

Neutral

1 hsl(210, 3%, 98%)
#FAFAFA var(--fd-color-neutral-1)
2 hsl(210, 3%, 93.5%)
#EEEEEF var(--fd-color-neutral-2)
3 hsl(0, 0%, 85%)
#D9D9D9 var(--fd-color-neutral-3)
4 hsl(212, 8%, 57%)
#89919A var(--fd-color-neutral-4)
5 hsl(0, 0%, 97%)
#F7F7F7 var(--fd-color-neutral-5)
6 hsl(0, 0%, 95%)
#F2F2F2 var(--fd-color-neutral-6)

Status

1 hsl(147, 85.3%, 26.7%)
#107E3E var(--fd-color-status-1)
2 hsl(28, 90.2%, 48%)
#E9730C var(--fd-color-status-2)
3 hsl(0, 100%, 36.7%)
#BB0000 var(--fd-color-status-3)
4 hsl(210, 2.8%, 42.7%)
#6A6D70 var(--fd-color-status-4)
5 hsl(210, 90.9%, 42.9%)
#0A6ED1 var(--fd-color-status-5)

Accent

These colors are optimized for two different uses. The first ten colors meet a contrast standard of 3:1 and are best used for differentiating between similar items, e.g., in a calendar, legend, or pills. The last four colors meet a contrast standard or 4.6:1 and best used when text is important, e.g., identifiers and avatars.

1 hsl(34, 90%, 61%)
#D08014 var(--fd-color-accent-1)
2 hsl(0, 68%, 50%)
#D04343 var(--fd-color-accent-2)
3 hsl(332, 75%, 49%)
#DB1F77 var(--fd-color-accent-3)
4 hsl(315, 54%, 49%)
#C0399F var(--fd-color-accent-4)
5 hsl(238, 65%, 63%)
#6367DE var(--fd-color-accent-5)
6 hsl(210, 78%, 45%)
#286EB4 var(--fd-color-accent-6)
7 hsl(186, 90%, 49%)
#0F828F var(--fd-color-accent-7)
8 hsl(75, 86%, 34%)
#7CA10C var(--fd-color-accent-8)
9 hsl(269, 54%, 58%)
#955ECF var(--fd-color-accent-9)
10 hsl(206, 26%, 49%)
#647887 var(--fd-color-accent-10)
11 hsl(34, 82%, 45%)
#D17F15 var(--fd-color-accent-11)
12 hsl(0, 60%, 54%)
#D04343 var(--fd-color-accent-12)
13 hsl(210, 64.2%, 47.1%)
#2B78C5 var(--fd-color-accent-13)
14 hsl(238, 65.1%, 62.9%)
#0F828F var(--fd-color-accent-14)
15 hsl(272.2, 60%, 55.9%)
#647887 var(--fd-color-accent-15)

State Action

hover hsla(210, 91%, 36%, 1)
#085CAF var(--fd-color-action-hover)
selected hsla(210, 98%, 33%, 1)
#0254A7 var(--fd-color-action-selected)
disabled hsla(210, 91%, 43%, 0.4)
#0a6ed1 var(--fd-color-action-disabled)

State Background

hover hsla(210, 3%, 98%, 1)
#FAFAFA var(--fd-color-background-hover)
selected hsla(210, 91%, 43%, 0.07)
#0A6ED1 var(--fd-color-background-selected)
selected-hover hsla(210, 91%, 43%, 0.1)
#0A6ED1 var(--fd-color-background-selected-hover)