Skip to main content

Colors

Color distinguishes our brand and helps us create consistent experiences across products.

Primary Color Palette

Name900
TypePrimary
HEX#11642D
CSS Variablevar(--color-primary-900)
Usage
Name800
TypePrimary
HEX#238440
CSS Variablevar(--color-primary-800)
Usage
Name700
TypePrimary
HEX#2C954B
CSS Variablevar(--color-primary-700)
Usage
Name600
TypePrimary
HEX#37A857
CSS Variablevar(--color-primary-600)
Usage
Name500
TypePrimary
HEX#3FB760
CSS Variablevar(--color-primary-500)
UsageBase color
Name400
TypePrimary
HEX#5EC279
CSS Variablevar(--color-primary-400)
Usage
Name300
TypePrimary
HEX#7CCD90
CSS Variablevar(--color-primary-300)
Usage
Name200
TypePrimary
HEX#A2DBB0
CSS Variablevar(--color-primary-200)
Usage
Name100
TypePrimary
HEX#C6E9CE
CSS Variablevar(--color-primary-100)
Usage
Name50
TypePrimary
HEX#E7F6EB
CSS Variablevar(--color-primary-50)
Usage
Name25
TypePrimary
HEX#F1F9F3
CSS Variablevar(--color-primary-25)
Usage

Accent Color Palette

Name900
TypeAccent
HEX#0A179E
CSS Variablevar(--color-accent-900)
Usage
Name800
TypeAccent
HEX#1E2EB6
CSS Variablevar(--color-accent-800)
Usage
Name700
TypeAccent
HEX#2939C2
CSS Variablevar(--color-accent-700)
Usage
Name600
TypeAccent
HEX#3143D0
CSS Variablevar(--color-accent-600)
Usage
Name500
TypeAccent
HEX#364BDA
CSS Variablevar(--color-accent-500)
UsageBase color
Name400
TypeAccent
HEX#5365E4
CSS Variablevar(--color-accent-400)
Usage
Name300
TypeAccent
HEX#7182F1
CSS Variablevar(--color-accent-300)
Usage
Name200
TypeAccent
HEX#96A4FF
CSS Variablevar(--color-accent-200)
Usage
Name100
TypeAccent
HEX#C3C9FF
CSS Variablevar(--color-accent-100)
Usage
Name50
TypeAccent
HEX#E8EAFF
CSS Variablevar(--color-accent-50)
Usage
Name25
TypeAccent
HEX#F1F2FF
CSS Variablevar(--color-accent-25)
Usage
Name12
TypeAccent
HEX#F7F7FF
CSS Variablevar(--color-accent-12)
Usage

Extended Color Palette

Name900
TypeNeutral
HEX#212121
CSS Variablevar(--color-neutrals-900)
Usage
Name800
TypeNeutral
HEX#424242
CSS Variablevar(--color-neutrals-800)
Usage
Name700
TypeNeutral
HEX#616161
CSS Variablevar(--color-neutrals-700)
Usage
Name600
TypeNeutral
HEX#757575
CSS Variablevar(--color-neutrals-600)
Usage
Name500
TypeNeutral
HEX#9e9e9e
CSS Variablevar(--color-neutrals-500)
Usage
Name400
TypeNeutral
HEX#bdbdbd
CSS Variablevar(--color-neutrals-400)
Usage
Name300
TypeNeutral
HEX#e0e0e0
CSS Variablevar(--color-neutrals-300)
Usage
Name200
TypeNeutral
HEX#eeeeee
CSS Variablevar(--color-neutrals-200)
Usage
Name100
TypeNeutral
HEX#f5f5f5
CSS Variablevar(--color-neutrals-100)
Usage
Name50
TypeNeutral
HEX#fafafa
CSS Variablevar(--color-neutrals-50)
Usage

Color Crimes

Don't

Use unapproved colors.