Usage

Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.

Background Color

To apply a background color, just add the color name and light/darkness as a class to the element.

This is a card panel with a red lighten-1 class

    <div class="card-panel red lighten-1">This is a card panel with a red lighten-1 class</div>

Text Color

To apply a text color, just append -text to the color class like this:

This is a card panel with dark red text

    <div class="card-panel">
      <span class="red-text text-darken-2">This is a card panel with dark red text</span>
    </div>

Color Palette

Neutral

#ffffff neutral lighten-2
#e3e3e3 neutral lighten-1
#cccccc neutral
#7e7e7e neutral darken-1
#333333 neutral darken-2

Grey

#f7f7f7 grey lighten-2
#d7d7d7 grey lighten-1
#8d8d8d grey
#6a6a6a grey darken-1
#5a5a5a grey darken-2

Red

#ffe4e3 red lighten-2
#ffcecd red lighten-1
#df4e4b red
#cf1814 red darken-1
#c2130f red darken-2

Orange

#fee3d0 orange lighten-2
#fbab60 orange lighten-1
#f88c2d orange
#f56329 orange darken-1
#e24b0f orangedarken-2

Yellow

#feee9f yellow lighten-2
#fbd242 yellow lighten-1
#fbbd0e yellow
#cc9900 yellow darken-1
#a87e00 yellow darken-2

Teal

#e7f9f6 teal lighten-2
#73dccd teal lighten-1
#00bfa5 teal
#00a08b teal darken-1
#00757b teal darken-2

Green

#bdecc6 green lighten-2
#6ed783 green lighten-1
#39b151 green
#2d8d40 green darken-1
#1c491c green darken-2

Blue

#f0f8ff blue lighten-2
#3aa3ff blue lighten-1
#007aff blue
#1475e0 blue darken-1
#00428c blue darken-2

Violet

#e7f0ff violet lighten-2
#618bff violet lighten-1
#2760ff violet
#004fe1 violet darken-1
#23395b violet darken-2