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