Colors
beta

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
Set Back Gray
#767676
$text-muted
Copy Hex
Copy SASS
For legal copy, timestamps, labels, null states, etc.
For disabled/placeholder text use this color and a "Light" weight
Body Gray
#444444
$body-text-color
Copy Hex
Copy SASS
Subhead and body
Header Text Gray
#242424
$header-text-color
Copy Hex
Copy SASS
Headers
E*TRADE Purple
#6633cc
$brand-purple
Copy Hex
Copy SASS
Button background
Not for Text
E*TRADE Green
#99cc00
$brand-green
Copy Hex
Copy SASS
Current state
Selected state
Not for Text
E*TRADE Navy
#19233c
$brand-navy
Copy Hex
Copy SASS
Background color
Clickable Purple
#3F05E0
$link-color
Copy Hex
Copy SASS
For text links and other interactive elements
Negative Red
#cc0000
$negative
Copy Hex
Copy SASS
Error state
Data trending down
Positive Green
#107a1b
$positive
Copy Hex
Copy SASS
Success state
Data trending up
White
#ffffff
$white
Copy Hex
Copy SASS
For body copy on navy backgrounds
Clickable Blue
#49b0ff
$link-dark-color
Copy Hex
Copy SASS
For text links and other interactive elements
Negative Red
#ff5522
$negative-dark
Copy Hex
Copy SASS
Error state
Data trending down
E*TRADE Green
#99cc00
$brand-green
Copy Hex
Copy SASS
Success state
Data trending up
accent text
Medium Gray
#dbdbdb
$link-dark-disabled-color
Copy Hex
Copy SASS
For disabled states on navy background only

Chart Colors
link

These colors should appear in order shown, 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 hues provided, which represents a worst case scenario. Use light and dark tints combined with base tints to differentiate within data categories. Use the base tints first!

Usage

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.

  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

Example: as property value

.classname-1 {background-color: chart-color(1);}
.classname-2 {background-color: chart-color(1, lighter);}

Example: as a classname

Chart 1 darker
#004498
Copy Hex
Copy SASS
Copy Class
Chart 1 base
#0065e3
Copy Hex
Copy SASS
Copy Class
Chart 1 lighter
#3991ff
Copy Hex
Copy SASS
Copy Class
Chart 1 lightest
#98c6ff
Copy Hex
Copy SASS
Copy Class
Chart 2 darker
#4ccecf
Copy Hex
Copy SASS
Copy Class
Chart 2 base
#65eced
Copy Hex
Copy SASS
Copy Class
Chart 2 lighter
#87feff
Copy Hex
Copy SASS
Copy Class
Chart 2 lightest
#cffeff
Copy Hex
Copy SASS
Copy Class
Chart 3 darker
#cdbb15
Copy Hex
Copy SASS
Copy Class
Chart 3 base
#f2dc17
Copy Hex
Copy SASS
Copy Class
Chart 3 lighter
#fdee67
Copy Hex
Copy SASS
Copy Class
Chart 3 lightest
#fcf4af
Copy Hex
Copy SASS
Copy Class
Chart 4 darker
#d28720
Copy Hex
Copy SASS
Copy Class
Chart 4 base
#ffa120
Copy Hex
Copy SASS
Copy Class
Chart 4 lighter
#fcba5f
Copy Hex
Copy SASS
Copy Class
Chart 4 lightest
#fed49a
Copy Hex
Copy SASS
Copy Class
Chart 5 darker
#cf71d1
Copy Hex
Copy SASS
Copy Class
Chart 5 base
#f97cfa
Copy Hex
Copy SASS
Copy Class
Chart 5 lighter
#f9a1fb
Copy Hex
Copy SASS
Copy Class
Chart 5 lightest
#f9d3f9
Copy Hex
Copy SASS
Copy Class
Chart 6 darker
#c74272
Copy Hex
Copy SASS
Copy Class
Chart 6 base
#ff5593
Copy Hex
Copy SASS
Copy Class
Chart 6 lighter
#fa86b0
Copy Hex
Copy SASS
Copy Class
Chart 6 lightest
#f5bdd1
Copy Hex
Copy SASS
Copy Class
Chart 7 darker
#892eb1
Copy Hex
Copy SASS
Copy Class
Chart 7 base
#b137e8
Copy Hex
Copy SASS
Copy Class
Chart 7 lighter
#c37ae4
Copy Hex
Copy SASS
Copy Class
Chart 7 lightest
#ebbeff
Copy Hex
Copy SASS
Copy Class
Chart 8 darker
#663b2d
Copy Hex
Copy SASS
Copy Class
Chart 8 base
#94533d
Copy Hex
Copy SASS
Copy Class
Chart 8 lighter
#d46a46
Copy Hex
Copy SASS
Copy Class
Chart 8 lightest
#ee9b7f
Copy Hex
Copy SASS
Copy Class
Chart 9 darker
#868686
Copy Hex
Copy SASS
Copy Class
Chart 9 base
#aaaaaa
Copy Hex
Copy SASS
Copy Class
Chart 9 lighter
#c9c9c9
Copy Hex
Copy SASS
Copy Class
Chart 9 lightest
#dddcdc
Copy Hex
Copy SASS
Copy Class
Chart 10 darker
#828b9b
Copy Hex
Copy SASS
Copy Class
Chart 10 base
#8a99b8
Copy Hex
Copy SASS
Copy Class
Chart 10 lighter
#b7c9ed
Copy Hex
Copy SASS
Copy Class
Chart 10 lightest
#e3e8f2
Copy Hex
Copy SASS
Copy Class
Chart 11 darker
#cd8484
Copy Hex
Copy SASS
Copy Class
Chart 11 base
#ff9c9c
Copy Hex
Copy SASS
Copy Class
Chart 11 lighter
#fec8c8
Copy Hex
Copy SASS
Copy Class
Chart 11 lightest
#fde1e1
Copy Hex
Copy SASS
Copy Class
Chart Positive
#63ad02
Copy Hex
Copy SASS
Copy Class
Chart Negative
#e33501
Copy Hex
Copy SASS
Copy Class
Chart Neutral
#c6c6c6
Copy Hex
Copy SASS
Copy Class