Colors

Usage

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.

Background Color

To apply a background color, just add the color name and light/darkness as a class to the element.

This is a card panel with a teal lighten-2 class

<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>

Text Color

To apply a text color, just append -text to the color class like this:

This is a card panel with dark red text

                        <div class="card-panel"> <span class="red-text text-darken-2">This is a card panel with dark red text</span> </div>

Color Palette

                            #ffebee red lighten-5
                        
                            #ffcdd2 red lighten-4
                        
                            #ef9a9a red lighten-3
                        
                            #e57373 red lighten-2
                        
                            #ef5350 red lighten-1
                        
                            #f44336 red
                        
                            #e53935 red darken-1
                        
                            #d32f2f red darken-2
                        
                            #c62828 red darken-3
                        
                            #b71c1c red darken-4
                        
                            #ff8a80 red accent-1
                        
                            #ff5252 red accent-2
                        
                            #ff1744 red accent-3
                        
                            #d50000 red accent-4
                        
                            #fce4ec pink lighten-5
                        
                            #f8bbd0 pink lighten-4
                        
                            #f48fb1 pink lighten-3
                        
                            #f06292 pink lighten-2
                        
                            #ec407a pink lighten-1
                        
                            #e91e63 pink
                        
                            #d81b60 pink darken-1
                        
                            #c2185b pink darken-2
                        
                            #ad1457 pink darken-3
                        
                            #880e4f pink darken-4
                        
                            #ff80ab pink accent-1
                        
                            #ff4081 pink accent-2
                        
                            #f50057 pink accent-3
                        
                            #c51162 pink accent-4
                        
                            #f3e5f5 purple lighten-5
                        
                            #e1bee7 purple lighten-4
                        
                            #ce93d8 purple lighten-3
                        
                            #ba68c8 purple lighten-2
                        
                            #ab47bc purple lighten-1
                        
                            #9c27b0 purple
                        
                            #8e24aa purple darken-1
                        
                            #7b1fa2 purple darken-2
                        
                            #6a1b9a purple darken-3
                        
                            #4a148c purple darken-4
                        
                            #ea80fc purple accent-1
                        
                            #e040fb purple accent-2
                        
                            #d500f9 purple accent-3
                        
                            #aa00ff purple accent-4
                        
                            #ede7f6 deep-purple lighten-5
                        
                            #d1c4e9 deep-purple lighten-4
                        
                            #b39ddb deep-purple lighten-3
                        
                            #9575cd deep-purple lighten-2
                        
                            #7e57c2 deep-purple lighten-1
                        
                            #673ab7 deep-purple
                        
                            #5e35b1 deep-purple darken-1
                        
                            #512da8 deep-purple darken-2
                        
                            #4527a0 deep-purple darken-3
                        
                            #311b92 deep-purple darken-4
                        
                            #b388ff deep-purple accent-1
                        
                            #7c4dff deep-purple accent-2
                        
                            #651fff deep-purple accent-3
                        
                            #6200ea deep-purple accent-4
                        
                            #e8eaf6 indigo lighten-5
                        
                            #c5cae9 indigo lighten-4
                        
                            #9fa8da indigo lighten-3
                        
                            #7986cb indigo lighten-2
                        
                            #5c6bc0 indigo lighten-1
                        
                            #3f51b5 indigo
                        
                            #3949ab indigo darken-1
                        
                            #303f9f indigo darken-2
                        
                            #283593 indigo darken-3
                        
                            #1a237e indigo darken-4
                        
                            #8c9eff indigo accent-1
                        
                            #536dfe indigo accent-2
                        
                            #3d5afe indigo accent-3
                        
                            #304ffe indigo accent-4
                        
                            #e3f2fd blue lighten-5
                        
                            #bbdefb blue lighten-4
                        
                            #90caf9 blue lighten-3
                        
                            #64b5f6 blue lighten-2
                        
                            #42a5f5 blue lighten-1
                        
                            #2196f3 blue
                        
                            #1e88e5 blue darken-1
                        
                            #1976d2 blue darken-2
                        
                            #1565c0 blue darken-3
                        
                            #0d47a1 blue darken-4
                        
                            #82b1ff blue accent-1
                        
                            #448aff blue accent-2
                        
                            #2979ff blue accent-3
                        
                            #2962ff blue accent-4
                        
                            #e1f5fe light-blue lighten-5
                        
                            #b3e5fc light-blue lighten-4
                        
                            #81d4fa light-blue lighten-3
                        
                            #4fc3f7 light-blue lighten-2
                        
                            #29b6f6 light-blue lighten-1
                        
                            #03a9f4 light-blue
                        
                            #039be5 light-blue darken-1
                        
                            #0288d1 light-blue darken-2
                        
                            #0277bd light-blue darken-3
                        
                            #01579b light-blue darken-4
                        
                            #80d8ff light-blue accent-1
                        
                            #40c4ff light-blue accent-2
                        
                            #00b0ff light-blue accent-3
                        
                            #0091ea light-blue accent-4
                        
                            #e0f7fa cyan lighten-5
                        
                            #b2ebf2 cyan lighten-4
                        
                            #80deea cyan lighten-3
                        
                            #4dd0e1 cyan lighten-2
                        
                            #26c6da cyan lighten-1
                        
                            #00bcd4 cyan
                        
                            #00acc1 cyan darken-1
                        
                            #0097a7 cyan darken-2
                        
                            #00838f cyan darken-3
                        
                            #006064 cyan darken-4
                        
                            #84ffff cyan accent-1
                        
                            #18ffff cyan accent-2
                        
                            #00e5ff cyan accent-3
                        
                            #00b8d4 cyan accent-4
                        
                            #e0f2f1 teal lighten-5
                        
                            #b2dfdb teal lighten-4
                        
                            #80cbc4 teal lighten-3
                        
                            #4db6ac teal lighten-2
                        
                            #26a69a teal lighten-1
                        
                            #009688 teal
                        
                            #00897b teal darken-1
                        
                            #00796b teal darken-2
                        
                            #00695c teal darken-3
                        
                            #004d40 teal darken-4
                        
                            #a7ffeb teal accent-1
                        
                            #64ffda teal accent-2
                        
                            #1de9b6 teal accent-3
                        
                            #00bfa5 teal accent-4
                        
                            #e8f5e9 green lighten-5
                        
                            #c8e6c9 green lighten-4
                        
                            #a5d6a7 green lighten-3
                        
                            #81c784 green lighten-2
                        
                            #66bb6a green lighten-1
                        
                            #4caf50 green
                        
                            #43a047 green darken-1
                        
                            #388e3c green darken-2
                        
                            #2e7d32 green darken-3
                        
                            #1b5e20 green darken-4
                        
                            #b9f6ca green accent-1
                        
                            #69f0ae green accent-2
                        
                            #00e676 green accent-3
                        
                            #00c853 green accent-4
                        
                            #f1f8e9 light-green lighten-5
                        
                            #dcedc8 light-green lighten-4
                        
                            #c5e1a5 light-green lighten-3
                        
                            #aed581 light-green lighten-2
                        
                            #9ccc65 light-green lighten-1
                        
                            #8bc34a light-green
                        
                            #7cb342 light-green darken-1
                        
                            #689f38 light-green darken-2
                        
                            #558b2f light-green darken-3
                        
                            #33691e light-green darken-4
                        
                            #ccff90 light-green accent-1
                        
                            #b2ff59 light-green accent-2
                        
                            #76ff03 light-green accent-3
                        
                            #64dd17 light-green accent-4
                        
                            #f9fbe7 lime lighten-5
                        
                            #f0f4c3 lime lighten-4
                        
                            #e6ee9c lime lighten-3
                        
                            #dce775 lime lighten-2
                        
                            #d4e157 lime lighten-1
                        
                            #cddc39 lime
                        
                            #c0ca33 lime darken-1
                        
                            #afb42b lime darken-2
                        
                            #9e9d24 lime darken-3
                        
                            #827717 lime darken-4
                        
                            #f4ff81 lime accent-1
                        
                            #eeff41 lime accent-2
                        
                            #c6ff00 lime accent-3
                        
                            #aeea00 lime accent-4
                        
                            #fffde7 yellow lighten-5
                        
                            #fff9c4 yellow lighten-4
                        
                            #fff59d yellow lighten-3
                        
                            #fff176 yellow lighten-2
                        
                            #ffee58 yellow lighten-1
                        
                            #ffeb3b yellow
                        
                            #fdd835 yellow darken-1
                        
                            #fbc02d yellow darken-2
                        
                            #f9a825 yellow darken-3
                        
                            #f57f17 yellow darken-4
                        
                            #ffff8d yellow accent-1
                        
                            #ffff00 yellow accent-2
                        
                            #ffea00 yellow accent-3
                        
                            #ffd600 yellow accent-4
                        
                            #fff8e1 amber lighten-5
                        
                            #ffecb3 amber lighten-4
                        
                            #ffe082 amber lighten-3
                        
                            #ffd54f amber lighten-2
                        
                            #ffca28 amber lighten-1
                        
                            #ffc107 amber
                        
                            #ffb300 amber darken-1
                        
                            #ffa000 amber darken-2
                        
                            #ff8f00 amber darken-3
                        
                            #ff6f00 amber darken-4
                        
                            #ffe57f amber accent-1
                        
                            #ffd740 amber accent-2
                        
                            #ffc400 amber accent-3
                        
                            #ffab00 amber accent-4
                        
                            #fff3e0 orange lighten-5
                        
                            #ffe0b2 orange lighten-4
                        
                            #ffcc80 orange lighten-3
                        
                            #ffb74d orange lighten-2
                        
                            #ffa726 orange lighten-1
                        
                            #ff9800 orange
                        
                            #fb8c00 orange darken-1
                        
                            #f57c00 orange darken-2
                        
                            #ef6c00 orange darken-3
                        
                            #e65100 orange darken-4
                        
                            #ffd180 orange accent-1
                        
                            #ffab40 orange accent-2
                        
                            #ff9100 orange accent-3
                        
                            #ff6d00 orange accent-4
                        
                            #fbe9e7 deep-orange lighten-5
                        
                            #ffccbc deep-orange lighten-4
                        
                            #ffab91 deep-orange lighten-3
                        
                            #ff8a65 deep-orange lighten-2
                        
                            #ff7043 deep-orange lighten-1
                        
                            #ff5722 deep-orange
                        
                            #f4511e deep-orange darken-1
                        
                            #e64a19 deep-orange darken-2
                        
                            #d84315 deep-orange darken-3
                        
                            #bf360c deep-orange darken-4
                        
                            #ff9e80 deep-orange accent-1
                        
                            #ff6e40 deep-orange accent-2
                        
                            #ff3d00 deep-orange accent-3
                        
                            #dd2c00 deep-orange accent-4
                        
                            #efebe9 brown lighten-5
                        
                            #d7ccc8 brown lighten-4
                        
                            #bcaaa4 brown lighten-3
                        
                            #a1887f brown lighten-2
                        
                            #8d6e63 brown lighten-1
                        
                            #795548 brown
                        
                            #6d4c41 brown darken-1
                        
                            #5d4037 brown darken-2
                        
                            #4e342e brown darken-3
                        
                            #3e2723 brown darken-4
                        
                            #fafafa grey lighten-5
                        
                            #f5f5f5 grey lighten-4
                        
                            #eeeeee grey lighten-3
                        
                            #e0e0e0 grey lighten-2
                        
                            #bdbdbd grey lighten-1
                        
                            #9e9e9e grey
                        
                            #757575 grey darken-1
                        
                            #616161 grey darken-2
                        
                            #424242 grey darken-3
                        
                            #212121 grey darken-4