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.

Materialize 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

Followings are 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.

Example
Card panel with dark blue color.

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

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

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.

Example
Card panel with light blue color.

General Syntax

    <element class="{TextColorName}-text  text-lighten-{1 to 5} "></element>
     
Try It Now

Source Code

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

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.

Example
This is a card panel with dark blue text

General Syntax

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

Source Code

     
      <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

Background Colors

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

Example
Background Color

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

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

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.

Example
Light Background Color

General Syntax

    <element class="{TextColorName} lighten-{1 to 5} "></element>
     
Try It Now

Source Code

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

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.

Example
Dark Background Color

General Syntax

    <element class="{TextColorName} dark-{1 to 4} "></element>
     
Try It Now

Source Code

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

Conclusion

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.

Web Tutorials

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