How to use materialize colors classes

Deepak Tailor Image
Deepak Tailor - Dec 21 2020
How to use materialize colors classes

There are many classes for colors in materialize css. We can use these classes on any text or any background. materialize provided three type of colors : lighten for light color, darken for dark color and accent for accent colors.

Color class use in backgrounds

To add color to the background, we write the name of the class. If we want to make the color light or dark, then we can also give it in this class. Light class has classes from lighten-1 to lighten-5. And in dark class there is class from darken-1 to darken-4. Like:

Live Demo

<!-- background color class -->
<div class="card-panel red lighten-1">background color use in card</div>
<div class="card-panel red lighten-2">background color use in card</div>
<div class="card-panel red lighten-3">background color use in card</div>
<div class="card-panel red lighten-4">background color use in card</div>
<div class="card-panel red lighten-5">background color use in card</div>

<div class="card-panel red darken-1">background color use in card</div>
<div class="card-panel red darken-2">background color use in card</div>
<div class="card-panel red darken-3">background color use in card</div>
<div class="card-panel red darken-4">background color use in card</div>

<div class="card-panel red accent-1">background color use in card</div>
<div class="card-panel red accent-2">background color use in card</div>
<div class="card-panel red accent-3">background color use in card</div>
<div class="card-panel red accent-4">background color use in card</div>
<!-- background color class -->
Color class use in text or headings

Live Demo

<!-- text colors -->
<div class="card-panel">
    <h6 class="red-text">this is text color class</h6>
    <h6 class="red-text text-lighten-1">this is text color class</h6>
    <h6 class="red-text text-lighten-2">this is text color class</h6>
    <h6 class="red-text text-lighten-3">this is text color class</h6>
    <h6 class="red-text text-lighten-4">this is text color class</h6>
    <h6 class="red-text text-lighten-5">this is text color class</h6>
    <br/>
    <h6 class="red-text text-darken-1">this is text color class</h6>
    <h6 class="red-text text-darken-2">this is text color class</h6>
    <h6 class="red-text text-darken-3">this is text color class</h6>
    <h6 class="red-text text-darken-4">this is text color class</h6>
    <br/>
    <h6 class="red-text text-accent-1">this is text color class</h6>
    <h6 class="red-text text-accent-2">this is text color class</h6>
    <h6 class="red-text text-accent-3">this is text color class</h6>
    <h6 class="red-text text-accent-4">this is text color class</h6>
</div>
<!-- text colors -->
Color class use in buttons

Live Demo

<!-- color use in buttons -->
<button type="button" class="btn blue">Primary Button</button>
<button type="button" class="btn grey">Secondary Button</button>
<button type="button" class="btn cyan">Info Button</button>
<button type="button" class="btn orange">Warning Button</button>
<button type="button" class="btn green">Success Button</button>
<!-- color use in buttons -->
Deepak Tailor Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry for the last 5 years. For professional and customize web development, you can send inquiry on our email.
----
You can contact him at support@fulstackdev.com