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

    chevron_right

    
    

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

    chevron_right

    
    

    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

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.