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 >
< link href=
rel="stylesheet">
< link rel="stylesheet" href=
< meta name="viewport" content=
" width = device -width, initial-scale = 1 .0" />
</ head >
< body >
< div class="card-panel green">
GeeksforGeeks
</ div >
< script src=
</ script >
</ body >
</ html >
|
- To apply a text color simply append -text to the color class just like done before.
html
<!DOCTYPE html>
< html >
< head >
< link href=
rel="stylesheet">
< link rel="stylesheet" href=
< 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 >
< script src=
</ script >
</ body >
</ html >
|
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
Share your thoughts in the comments
Please Login to comment...