Javatpoint Logo
Javatpoint Logo

Materialize CSS Colors

Materialize supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.

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


Following is the list of lightness/darkness classes, which can be used to vary the color applied.

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


The following example demonstrates how to use the above classes to render the background or to change the color of the text. In case of background, add the classes as such and in case of text, suffix '-text' to color class and prefix 'text-' to lightning class.

Test it Now

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA