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