Colors
beta

Purple
#5627d8
$link-color
Copy
Hex
Copy
SASS
Text links and other interactive elements
Negative red
#cc0000
$negative
Copy
Hex
Copy
Class
Copy
SASS
Error state
Data trending down
Positive green
#107a1b
$positive
Copy
Hex
Copy
Class
Copy
SASS
Success state
Data trending up
Set back gray
#767676
$text-muted
Copy
Hex
Copy
Class
Copy
SASS
For disabled/placeholder text, use this color and a "light" weight
Label color
#444444
$label-color
Copy
Hex
Copy
SASS
Labels
Body gray
#242424
$body-text-color
Copy
Hex
Copy
Class
Copy
SASS
Headers and body text
Background accent color
#f1ecff
$background-accent-color
Copy
Hex
Copy
SASS
Background color
Dark background
#241056
$dark-background-color
Copy
Hex
Copy
SASS
Background color
Lightest gray
#f6f6f6
$background-color
Copy
Hex
Copy
SASS
Background color
Not for Text
Light gray
#eeeeee
$background-inactive-color
Copy
Hex
Copy
SASS
Inactive state background color
Not for Text
Medium gray
#dbdbdb
$border-color
Copy
Hex
Copy
SASS
Borders and lines
Rules around text field
Not for Text
Accent colors should be used sparingly, to draw the eye to a specific part of the UI. Prioritize the first accent color where possible.
Accent color 1
#5627d8
$accent-color-1
Copy
Hex
Copy
Class
Copy
SASS
Accent color 2
#0065e3
$accent-color-2
Copy
Hex
Copy
Class
Copy
SASS
Accent color 3
#f2dc17
$accent-color-3
Copy
Hex
Copy
Class
Copy
SASS
Accent color 4
#ffa120
$accent-color-4
Copy
Hex
Copy
Class
Copy
SASS
Accent color 5
#f97cfa
$accent-color-5
Copy
Hex
Copy
Class
Copy
SASS
Accent color 6
#ff5593
$accent-color-6
Copy
Hex
Copy
Class
Copy
SASS
Accent color 7
#65eced
$accent-color-7
Copy
Hex
Copy
Class
Copy
SASS
Accent color 8
#94533d
$accent-color-8
Copy
Hex
Copy
Class
Copy
SASS
Accent color 9
#aaaaaa
$accent-color-9
Copy
Hex
Copy
Class
Copy
SASS
Accent color 10
#8a99b8
$accent-color-10
Copy
Hex
Copy
Class
Copy
SASS
Accent color 11
#ff9c9c
$accent-color-11
Copy
Hex
Copy
Class
Copy
SASS

The chart colors should appear in the order displayed below, with no specific ties to a type of data across the chart system. Color one represents the first category of data on a chart, color two the second, color three the third, etc. There are 11 colors provided, each having a base plus three tints. Use light and dark tints combined with the base to differentiate within data categories. Use the base colors first!

chart-color(param1, param2);

chart-color calls a SASS function where the first parameter is 1 of 11 chart colors, and the second parameter is the hue or tint.

  1. The first parameter is required and must be a number 1-11 (see below).
  2. The second parameter is optional with the default being "base".

    Options:

    1. darker
    2. base
    3. lighter
    4. lightest
.classname-1 {background-color: chart-color(1);}
.classname-2 {background-color: chart-color(1, lighter);}
<div class="chart-color-1"></div>
<div class="chart-color-1 chart-color-lighter"></div>
Chart 1 darker
#391b8d
Copy
Hex
Copy
Class
Copy
SASS
Chart 1 base
#5627d8
Copy
Hex
Copy
Class
Copy
SASS
Chart 1 lighter
#8a61fa
Copy
Hex
Copy
Class
Copy
SASS
Chart 1 lightest
#b99fff
Copy
Hex
Copy
Class
Copy
SASS
Chart 2 darker
#004498
Copy
Hex
Copy
Class
Copy
SASS
Chart 2 base
#0065e3
Copy
Hex
Copy
Class
Copy
SASS
Chart 2 lighter
#3991ff
Copy
Hex
Copy
Class
Copy
SASS
Chart 2 lightest
#98c6ff
Copy
Hex
Copy
Class
Copy
SASS
Chart 3 darker
#cdbb15
Copy
Hex
Copy
Class
Copy
SASS
Chart 3 base
#f2dc17
Copy
Hex
Copy
Class
Copy
SASS
Chart 3 lighter
#fdee67
Copy
Hex
Copy
Class
Copy
SASS
Chart 3 lightest
#fcf4af
Copy
Hex
Copy
Class
Copy
SASS
Chart 4 darker
#d28720
Copy
Hex
Copy
Class
Copy
SASS
Chart 4 base
#ffa120
Copy
Hex
Copy
Class
Copy
SASS
Chart 4 lighter
#fcba5f
Copy
Hex
Copy
Class
Copy
SASS
Chart 4 lightest
#fed49a
Copy
Hex
Copy
Class
Copy
SASS
Chart 5 darker
#cf71d1
Copy
Hex
Copy
Class
Copy
SASS
Chart 5 base
#f97cfa
Copy
Hex
Copy
Class
Copy
SASS
Chart 5 lighter
#f9a1fb
Copy
Hex
Copy
Class
Copy
SASS
Chart 5 lightest
#f9d3f9
Copy
Hex
Copy
Class
Copy
SASS
Chart 6 darker
#c74272
Copy
Hex
Copy
Class
Copy
SASS
Chart 6 base
#ff5593
Copy
Hex
Copy
Class
Copy
SASS
Chart 6 lighter
#fa86b0
Copy
Hex
Copy
Class
Copy
SASS
Chart 6 lightest
#f5bdd1
Copy
Hex
Copy
Class
Copy
SASS
Chart 7 darker
#4ccecf
Copy
Hex
Copy
Class
Copy
SASS
Chart 7 base
#65eced
Copy
Hex
Copy
Class
Copy
SASS
Chart 7 lighter
#87feff
Copy
Hex
Copy
Class
Copy
SASS
Chart 7 lightest
#cffeff
Copy
Hex
Copy
Class
Copy
SASS
Chart 8 darker
#663b2d
Copy
Hex
Copy
Class
Copy
SASS
Chart 8 base
#94533d
Copy
Hex
Copy
Class
Copy
SASS
Chart 8 lighter
#d46a46
Copy
Hex
Copy
Class
Copy
SASS
Chart 8 lightest
#ee9b7f
Copy
Hex
Copy
Class
Copy
SASS
Chart 9 darker
#868686
Copy
Hex
Copy
Class
Copy
SASS
Chart 9 base
#aaaaaa
Copy
Hex
Copy
Class
Copy
SASS
Chart 9 lighter
#c9c9c9
Copy
Hex
Copy
Class
Copy
SASS
Chart 9 lightest
#dddcdc
Copy
Hex
Copy
Class
Copy
SASS
Chart 10 darker
#828b9b
Copy
Hex
Copy
Class
Copy
SASS
Chart 10 base
#8a99b8
Copy
Hex
Copy
Class
Copy
SASS
Chart 10 lighter
#b7c9ed
Copy
Hex
Copy
Class
Copy
SASS
Chart 10 lightest
#e3e8f2
Copy
Hex
Copy
Class
Copy
SASS
Chart 11 darker
#cd8484
Copy
Hex
Copy
Class
Copy
SASS
Chart 11 base
#ff9c9c
Copy
Hex
Copy
Class
Copy
SASS
Chart 11 lighter
#fec8c8
Copy
Hex
Copy
Class
Copy
SASS
Chart 11 lightest
#fde1e1
Copy
Hex
Copy
Class
Copy
SASS
Chart Positive
#63ad02
Copy Hex
Copy Class
Copy SASS
Chart Negative
#e33501
Copy Hex
Copy Class
Copy SASS
Chart Neutral
#c6c6c6
Copy Hex
Copy Class
Copy SASS