Colors

Usage

Legibility

Website elements like text and icons should meet accesibility standards when used against colored backgrounds. The following swatches contain a sample of each of the primary palette colors, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.

Primary Colors

The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.

A
A
A
A
A
A
A
A
A
A
Name
Brand
Variable
--color-brand
Class Name
bg-brand
RGB
224, 78, 57
HEX
#E04E39
A
A
A
A
A
A
A
A
A
A
Name
White
Variable
--color-white
RGB
255, 255, 255
HEX
#FFFFFF
A
A
A
A
A
A
A
A
A
A
Name
Gray 100
Variable
--color-gray-100
RGB
244, 246, 248
HEX
#F4F6F8
A
A
A
A
A
A
A
A
A
A
Name
Gray 200
Variable
--color-gray-200
RGB
235, 238, 242
HEX
#EBEEF2
A
A
A
A
A
A
A
A
A
A
Name
Gray 300
Variable
--color-gray-300
RGB
220, 224, 230
HEX
#DCE0E6
A
A
A
A
A
A
A
A
A
A
Name
Gray 400
Variable
--color-gray-400
RGB
190, 196, 204
HEX
#BEC4CC
A
A
A
A
A
A
A
A
A
A
Name
Gray 500
Variable
--color-gray-500
RGB
143, 148, 159
HEX
#8F949F
A
A
A
A
A
A
A
A
A
A
Name
Gray 600
Variable
--color-gray-600
RGB
106, 112, 122
HEX
#6A707A
A
A
A
A
A
A
A
A
A
A
Name
Gray 700
Variable
--color-gray-700
RGB
66, 71, 79
HEX
#42474F
A
A
A
A
A
A
A
A
A
A
Name
Gray 800
Variable
--color-gray-800
RGB
43, 45, 52
HEX
#2B2D34
A
A
A
A
A
A
A
A
A
A
Name
Gray 900
Variable
--color-gray-900
RGB
28, 30, 36
HEX
#1C1E24
A
A
A
A
A
A
A
A
A
A
Name
Black
Variable
--color-black
RGB
0, 0, 0
HEX
#000000

Illustration Colors

These colors are for charts and diagrams only. The secondary palette is applied to UI elements and is not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of charts and diagrams and enhance the communication of actions, changes in state, or errors.

A
A
A
A
A
A
A
A
A
A
Name
Dark Blue
Variable
--color-blue-dark
RGB
0, 118, 214
HEX
#0076D6
A
A
A
A
A
A
A
A
A
A
Name
Blue
Variable
--color-blue
RGB
16, 170, 255
HEX
#10AAFF
A
A
A
A
A
A
A
A
A
A
Name
Light Blue
Variable
--color-blue-light
RGB
223, 253, 255
HEX
#DFFDFF
A
A
A
A
A
A
A
A
A
A
Name
Green
Variable
--color-green
RGB
139, 233, 152
HEX
#8BE998
A
A
A
A
A
A
A
A
A
A
Name
Light Green
Variable
--color-green-light
RGB
199, 249, 222
HEX
#C7F9DE
A
A
A
A
A
A
A
A
A
A
Name
Yellow
Variable
--color-yellow
RGB
255, 236, 100
HEX
#FFEC64
A
A
A
A
A
A
A
A
A
A
Name
Light Yellow
Variable
--color-yellow-light
RGB
255, 250, 214
HEX
#FFFAD6
A
A
A
A
A
A
A
A
A
A
Name
Lilac
Variable
--color-lilac
RGB
118, 80, 241
HEX
#7650F1
A
A
A
A
A
A
A
A
A
A
Name
Light Lilac
Variable
--color-lilac-light
RGB
213, 203, 255
HEX
#D5CBFF