Colors

Site Brand Colors

Primary

$p_blue

#017acd
WCAG-safe

$p_green

#138761
WCAG-safe

$p_purple

#5972c8
WCAG-safe

$p_coolgray10

#666666
WCAG-safe

Secondary

$s_bgblue

#002f6c
WCAG-safe

$s_blue

#00b5e2
Not Safe

$s_red

#af272f
WCAG-safe

$s_warmgray10

#796e65
WCAG-safe

$s_green

#78be20
Not Safe

$s_purple

#5949a7
WCAG-safe

$s_coolgray6

#a7a8aa
Not Safe

$s_darkblue

#003da5
WCAG-safe

$s_warmgray6

#a59c94
Not Safe

$s_coolgray11

#53565a
WCAG-safe

Tertiary

$t_orange

#ffa300
Not Safe

$t_darkorange

#ae650c
WCAG-safe

$t_pink

#ef4a81
Not Safe

Text

$text

#231f20
WCAG-safe

$link

#0773be
WCAG-safe

$s_lightgray

#f5f5f5
Default background color for html body

Pastel

These colors are WCAG-safe with black text, and can be used against a white or gray background.

$pastel_blue

#e0eff9

$pastel_green

#e7f3ef

$pastel_purple

#e7ebf7

$pastel_gray

#e8e8e8

$pastel_orange

#fff3de

Recommended Color Combinations

These text/background color combinations meet our accessibility standards.

Text on a Default Background

#ffffff

$s_lightgray

Text on Background Colors

$p_blue

$p_green

$p_purple

$p_coolgray10

$s_red

$s_warmgray10

$s_purple

$s_darkblue

$s_coolgray11

$pastel_blue

$pastel_green

$pastel_purple

$pastel_gray

$pastel_orange

Documentation

Formatting

Eyebrows should use darker colors for weight:

  • $p_blue
  • $s_warmgray10
  • $s_purple
  • $p_green
  • $p_purple
  • $s_red

Alerts should use vibrant colors for visibility:

  • $s_green
  • $t_orange
  • $s_blue
  • $s_red

Icons should use WCAG safe colors.

* $link must be bold to have enough contrast against a colored background.