Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

All these colors are available in LESS variable. You include this with any class/ID as mentioned below.

Example usage:

.highlight-block {
  background-color: $red;
  color: $green;
}


Available color previews


Red
#ff6b68
$red
Pink
#ff85af
$pink
Purple
#d066e2
$purple
Deep Purple
#673AB7
$deep-purple
Indigo
#3F51B5
$indigo
Blue
#2196F3
$blue
Light Blue
#03A9F4
$light-blue
Cyan
#00BCD4
$cyan
Teal
#39bbb0
$teal
Green
#32c787
$green
Light Green
#8BC34A
$light-green
Lime
#CDDC39
$lime
Yellow
#FFEB3B
$yellow
Amber
#ffc721
$amber
Orange
#FF9800
$orange
Deep Orange
#FF5722
$deep-orange
Brown
#795548
$brown
Grey
#9E9E9E
$grey
Blue Grey
#607D8B
$blue-grey
Black
#000000
$black
White
#FFFFFF
$white