Materialize Color

Materialize Color: Materialize provides rich predefined colors. These colors are based on Material Design base colors. Colors in Materialize are defined with a base color class and an optional class which can be used for lighten or darken. Here in this tutorial we are going to explain how you can use colors in using the predefined classes in Materialize.

Materialize Color Usage | Example

Let us go step by step to understand the colors in Materialize –

Background Color

You can add the background color just add the color name and lightness/brightness as the class to the element. Here is an example to add background color in Materialize.

Materialize Add Background Color Example:

<div class="card-panel teal lighten-2">Background Color Example.</div>      

Try it »

If you run the above example it will produce the output something like this –

Background Color : Background Color Examaple

Text Color

To change text color you just need to append “-text” in color classes. Let us create an example to change the color of the text.

Text Color Change in Materialize:

<div class="yellow-text text-darken-2">Text Color Example.</div>      

Try it »

If you run the above example it will produce output something like this –

Materialize Text Color


Following colors are available which you can use with lightness/darkness-

  • red
  • pink
  • purple
  • deep-purple
  • blue
  • indigo
  • light-blue
  • teal
  • cyan
  • green
  • light-green
  • lime
  • yellow
  • amber
  • orange
  • deep-orange
  • brown
  • grey
  • blue-grey
  • black
  • white
  • transparent


Following Lightness/Darkness classes Are available which can be used to apply darkness or lightness in color.

  • lighten-1
  • lighten-2
  • lighten-3
  • lighten-4
  • lighten-5
  • darken-1
  • darken-2
  • darken-3
  • darken-4
  • accent-1
  • accent-2
  • accent-3
  • accent-4

Learn More

Let us have some more example and demo about the Materialize Colors.

Basic Colors

Let us create an example of basic colors listed above-

Materialize Add Background Color Example:

<li class="red">red</li>
<li class="pink">pink</li>
<li class="purple">purple</li>
<li class="deep-purple">deep-purple</li>
<li class="blue">blue</li>
<li class="indigo">indigo</li>
<li class="light-blue">light-blue</li>
<li class="teal">teal</li>
<li class="cyan">cyan</li>
<li class="green">green</li>
<li class="light-green">light-green</li>
<li class="lime">lime</li>
<li class="yellow">yellow</li>
<li class="amber">amber</li>
<li class="orange">orange</li>
<li class="deep-orange">deep-orange</li>
<li class="brown">brown</li>
<li class="grey">grey</li>
<li class="blue-grey">blue-grey</li>
<li class="black">black</li>
<li class="white">white</li>
<li class="transparent">transparent</li>

Try it »

If you run the above example it will produce the output something like this –

Materialize Color Picker

Now let us Understand how lightness and darkness works.

Lightness/Darkness Example

Here let us pick one color let us say “blue” and add lightness/darkness classes to see how it works-

Materialize Lightness | Darkness Color Example:

<li class="blue">Blue</li>
<li class="blue lighten-1<">Blue lighten-1</li>
<li class="blue lighten-2<">Blue lighten-2</li>
<li class="blue lighten-3">Blue lighten-3</li>
<li class="blue lighten-4">Blue lighten-4</li>
<li class="blue lighten-5">Blue lighten-5</li>
<li class="blue darken-1">Blue darken-1</li>
<li class="blue darken-2">Blue darken-2</li>
<li class="blue darken-3">Blue darken-3</li>
<li class="blue darken-4">Blue darken-4</li>
<li class="blue accent-1">Blue accent-1</li>
<li class="blue accent-2">Blue accent-2</li>
<li class="blue accent-3">Blue accent-3</li>
<li class="blue accent-4">Blue accent-4</li>

Try it »

If you run the above example it will produce the output something like this –

Materialize Color Lightness Brightness


Add Comment

📖 Read More