Materialize CSS | Colors

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
      
      
        <!--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=
    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
        </script>
    </body>
      
    </html>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 

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

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
    

      
    

        <!--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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
    

        </script> 
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    


    • 



Here are some list of color palatte:






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 palette.





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
tanvi_gupta
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.