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

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

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

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.

Materialize CSS Grids

tanvi_gupta

Improve

Article Tags :

Materialize CSS Colors

Similar Reads

Materialize as CSS

Materialize Components

Materialize with JS

Materialize Forms

Thank You!

What kind of Experience do you want to share?