Open In App

Materialize CSS Colors

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

html




<!DOCTYPE html>
<html>
 
<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0" />
</head>
 
<body>
 
    <div class="card-panel green">
        GeeksforGeeks
    </div>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


  • Output: 

  • To apply a text color simply append -text to the color class just like done before.

html




<!DOCTYPE html>
<html>
 
<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
                "width=device-width,
                initial-scale=1.0" />
</head>
 
<body>
    <div class="card-panel">
        <span class="green-text text-darken-2">
            GeeksforGeeks
        </span>
    </div>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


  • Output: 

Here is a list of some color palettes:  

Name HEX Color
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.



Last Updated : 16 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads