Color Scheme

Color

Materialize offers a lot of colors which can be used in your next project.

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 teal lighten-2 class
              Copied!
              content_copy
              

<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 append -text to the color class like this:

This is a card panel with dark blue text 
              Copied!
              content_copy
              

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

Sass

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;
  }

Color Palette