Materialize CSS Colors

Materialize CSS Colors

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.

Materialized CSS colors are mainly divided into two parts.

  • Foreground Color Or Text Color
  • Background Color

Materialize CSS Base Color

Followings are the Materialize CSS base color classes.

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

Materialize CSS Optional Color Classes

Following is the list of Materialize CSS optional color classes that are used to create either color lightness or color darkness.

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

Text Color

Text color is used to assign foreground color of the text.

Basic steps to assign text foreground colors.

  • Simply, assign .{colorName}-text class to the HTML element base class.
  • To make text color darker, assign .{colorName}-text & .text-darken-{1 to 4} class to the textual element class.
  • To create light text color, apply .{colorName}-text & .text-lighten-{1 to 5} to the textual element base class.

General Syntax

<element class="{BaseColorName}-text">HTML Element</element>    
Try It Now

Source Code

Download
<div class="card-panel">
    <span class="blue-text">Card panel with dark blue color.</span>
</div>    
Try it yourself

Source Code : Output

Card panel with dark blue color.

Text: Light Color

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>    
Try It Now

Source Code

Download
<div class="card-panel">
    <span class="blue-text text-lighten-5">Card panel with light blue color.</span>
</div>    
Try it yourself

Source Code : Output

Card panel with light blue color.

Text: Dark Color

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>    
Try It Now

Source Code

Download
<div class="card-panel">
    <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>    
Try it yourself

Source Code : Output

This is a card panel with dark blue text

Background Colors

Materialize CSS background color is used to provide background color around the HTML elements.

Primary steps to apply background colors:

  • Add the .TextColorName class to the HTML element base class to achieve specific background color.
  • To create darker background color, add the .{TextColorName} class followed by an additional .dark-{1 to 4} class to the specific HTML element base class.
  • To create light background color, add the .{TextColorName} class followed by an additional .lighten-{1 to 5} class to the textual element base class.

General Syntax

<element class="TextColorName"></element>    
Try It Now

Source Code

Download
<div class="card-panel blue">
    <div class="center-align white-text">Background Color </div>
</div>    
Try it yourself

Source Code : Output

Background Color

Background Color: Light

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>    
Try It Now

Source Code

Download
<div class="card-panel blue lighten-4">
    <div class="center-align white-text">Background Color </div>
</div>    
Try it yourself

Source Code : Output

Background Color

Background Color: Dark

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>    
Try It Now

Source Code

Download
<div class="card-panel blue dark-4">
    <div class="center-align white-text">Background Color </div>
</div>    
Try it yourself

Source Code : Output

Background Color

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS