code

Color Palette

Primary Palette

#684bb6 purple
#41c664 green
#11b3cf teal
#1964ca blue
#c3589c pink
#ec615d red
#ff8a48 orange
#ffac00 yellow
#79919e grey

Full Palette

#d5c6fd purple lighten-1
#684bb6 purple base
#523b90 purple darken-1
#41c664 green base
#349d4f green darken-1
#11b3cf teal base
#0c8da4 teal darken-1
#1964ca blue base
#1450a0 blue darken-1
#c3589c pink base
#9c467c pink darken-1
#ec615d red base
#bb4d4a red darken-1
#ff8a48 orange base
#cb6e39 orange darken-1
#ffac00 yellow base
#ff9c00 yellow darken-1
#cccccc grey lighten-2
#aeaeae grey lighten-1
#79919e grey base
#60727d grey darken-1
#333333 grey darken-2
#000000 black
#ffffff white
#ffffff 85% trans-white
transparent

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.

Color
#684bb6
#41c664
#11b3cf
#1964ca
#c3589c
#ec615d
#ff8a48
#ffac00
#79919e
Background
.purple
.green
.teal
.blue
.pink
.red
.orange
.yellow
.grey

Darken/lighten
.lighten-2
.lighten-1
.darken-1
.darken-2*
Text
.text-purple
.text-green
.text-teal
.text-blue
.text-pink
.text-red
.text-orange
.text-yellow
.text-grey

Darken/lighten
.text-lighten-2
.text-lighten-1
.text-darken-1
.text-darken-2*
Border
.border-purple
.border-green
.border-teal
.border-blue
.border-pink
.border-red
.border-orange
.border-yellow
.border-grey

Darken/lighten
.border-lighten-2
.border-lighten-1
.border-darken-1
.border-darken-2*
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 teal darken-1 class
<div class="card-panel teal lighten-2">
This is a card panel with a teal lighten-2 class
</div>

Text Color

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

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

Border Color

To apply a border color, use the .border class and prepend border- to the color class like this:

This is a div with blue border
<div class="card-panel">
<span class="border border-blue border-lighten-2">
This is a card panel with a light blue border
</span>
</div>
This is a div with .border-red .border-top
This is a div with .border-red .border-right
This is a div with .border-red .border-bottom
This is a div with .border-red .border-left
This is a div with .border-red .border-none
<div class="card-panel">
<span class="border border-blue border-top border-lighten-2">
This is a card panel with a light blue top border
</span>
</div>

Sass

Hex color #684bb6;
#41c664;
#11b3cf;
#1964ca;
#c3589c;
#ec615d;
#ff8a48;
#ffac00;
#79919e;
Variable $mat-purple
$mat-green
$mat-teal
$mat-blue
$mat-pink
$mat-red
$mat-orange
$mat-yellow
$mat-grey
Sass color("purple", "base");
color("green", "base");
color("teal", "base");
color("blue", "base");
color("pink", "base");
color("red", "base");
color("orange", "base");
color("yellow", "base");
color("grey", "base");
Darken/Lighten Options lighten-2
lighten-1
base
darken-1
darken-2*

To reference basic varaibles, pass in the variable name with the prefix $vol-.

.red-text {
color: $vol-red;
}

To use dynamic variables, pass in a color and a lightness or darkness amount

.dark-red-text {
color: color("red", "darken-1");
}

For background colors, you can apply the color simply by extending the classes like the example below.


.ilike-blue-container
{
@extend .blue, .lighten-4;
}

For changing text color, you can apply the color simply by extending the classes like the example below.


.ilike-blue-container
{
@extend .blue-text, .text-lighten-4;
}