Working with colors in Materialize CSS

Quick answer: Colors in Materialize CSS work through a named palette applied as classes, such as teal, indigo or deep-orange, plus theme support for dark and light surfaces. Background and text colors get their own classes, while darker shades come automatically from the material design palette, and your own hex values still work.

Learn Working with colors in Materialize CSS

Changing the text and container colour on a website is one of the basic yet frequently performed tasks while designing a website. Usually, changing the colour is done using CSS. A designer can either use in-line CSS or write a class for changing the colour. 
In Materialize CSS, the framework developers have made the process of changing the colour of both the text and container easy. Just by calling the colour name inside the class tag will produce the desired result. For example, if you would like to have red colour text colour, just add the text red-text inside the h1 tag.

Here’s the link to Materialize CSS Color Library.

<div class="row red-text">
<h1>Changing color of text</h1>
</div>

In order to achieve this in CSS, we have to write the code as follows … 

<div class="row" style="color: red">
<h1>Changing color of text</h1>
</div>

Furthermore, in order to achieve the change in background colour in CSS following is the code 

<div class="row" style="background-color: red">
<h1>Changing color of division</h1>
</div>

The same result can be achieved by simply adding the text red in the div class, the following is the code

<div class="row red">
<h1>Changing color of division</h1>
</div>

Materialize CSS has not only eased the process of adding colour to the text and division but also enabled the designers to follow consistency in the design level.

Learn about Mega Menu in Materialize CSS

Frequently asked questions