Open In App

Materialize CSS Colors

Improve
Improve
Like Article
Like
Save
Share
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