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