VOOZH about

URL: https://www.geeksforgeeks.org/css/materialize-css-colors/

⇱ Materialize CSS Colors - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Materialize CSS Colors

Last Updated : 16 May, 2022

It is created with HTML, CSS, and JavaScript, and designed by Google. Material Design is a design language that combines the classic principles of successful design along with innovation and technology. 
Color: Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class. 
 

  • To apply background color simply add the color name and light/darkness as a class to the element
  • Output: 
👁 Image
  • To apply a text color simply append -text to the color class just like done before.
  • Output: 
👁 Image


Here is a list of some color palettes:  

NameHEXColor
red lighten-2#e57373
red darken-4#b71c1c
pink lighten-3#f48fb1
pink darken-4#880e4f
purple lighten-3#ce93d8
purple accent-2#e040fb
deep-purple#673ab7
indigo#3f51b5
blue accent-1#82b1ff
teal darken-3#00695c
green#4caf50
light-green#8bc34a
light-green darken-4#33691e
yellow darken-4#f57f17
brown darken-1#6d4c41


You can refer https://materializecss.com/color.html for different color palettes.

Comment
Article Tags: