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.

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

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

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.

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

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

Colors

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

Lightness/Darkness

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

Basic Colors

Let us create an example of basic colors listed above-

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

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-

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