Materialize CSS colors are used to assign either text foreground color or background colors. The color concept is based upon a base color class and an optional lighten or darken class.
Materialize colors are mainly divided into two parts.
Followings are the Materialize CSS base color classes.
Followings are the list of Materialize CSS optional color classes that are used to create either color lightness or color darkness.
Text color is used to assign foreground color of the text.
Basic steps to assign text foreground colors.
.{colorName}-text
class to the HTML element base class.
.{colorName}-text
& .text-darken-{1 to 4}
class to the textual element class.
.{colorName}-text
& .text-lighten-{1 to 5}
to the textual element base class.
General Syntax
<element class="{BaseColorName}-text">HTML Element</element>
Source Code
<div class="card-panel">
<span class="blue-text">Card panel with dark blue color.</span>
</div>
Materializes CSS text light color can be created by assigning the text color class name followed by the text lighten color class.
General Syntax
<element class="{TextColorName}-text text-lighten-{1 to 5} "></element>
Source Code
<div class="card-panel">
<span class="blue-text text-lighten-5">Card panel with light blue color.</span>
</div>
To create Materialize CSS dark text color, add the text color class name followed by the dark color class name to the HTML element base class.
General Syntax
<element class="{BaseColorName}-text text-darken-{1 to 4}">HTML Element</element>
Source Code
<div class="card-panel">
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>
Materialize background color is used to provide background color around the HTML elements.
Primary steps to apply background colors:
.TextColorName
class to the HTML element base class to achieve specific background color.
.{TextColorName}
class followed by an additional .dark-{1 to 4}
class to the specific HTML element base class.
.{TextColorName}
class followed by an additional .lighten-{1 to 5}
class to the textual element base class.
General Syntax
<element class="TextColorName"></element>
Source Code
<div class="card-panel blue">
<div class="center-align white-text">Background Color </div>
</div>
To create light background color, simply assign the .{TextColorName}
class & the .lighten-{1 to 5}
class to the HTML element base class.
General Syntax
<element class="{TextColorName} lighten-{1 to 5} "></element>
Source Code
<div class="card-panel blue lighten-4">
<div class="center-align white-text">Background Color </div>
</div>
Dark background color can be created easily by assigning the .{TextColorName}
class name followed by the .dark-{1 to 4}
class to the HTML element base class.
General Syntax
<element class="{TextColorName} dark-{1 to 4} "></element>
Source Code
<div class="card-panel blue dark-4">
<div class="center-align white-text">Background Color </div>
</div>
Materialize CSS colors are primarily used for foreground as well as background color. It uses base color classes and optional color classes. Optional color classes are very helpful to create light or dark text foreground color and background color.