logo

Material Design Lite color classes list

Hi all,
If you tried Material Design Lite you should have noticed the complex class pattern it use. It comes pretty handy when dealing with background and text colors.

Schermata 2016-02-22 alle 22.59.33

This is the complete list of classes you can give to your elements, enjoy!

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

    thanks! This helps a lot

    • cchoin
    • August 1st, 2016

    haha! Hilarious that the only comment is from a guy named penis!

    • Thiago
    • August 23rd, 2016

    Woah! This helps a lot! Thank you Jonathan.

    • Pidl
    • September 4th, 2016

    This is a life saver.
    Thanks man!

    • AlexKhram
    • September 14th, 2016

    Thanks! Realy help.

    • Stefanie
    • October 8th, 2016

    Thank you!! 🙂

    • not a penis
    • February 16th, 2017

    thx 🙂

    • Steve Lewis
    • March 23rd, 2017

    Nice one man! Really helpful 🙂

    • Thedath Oudarya
    • June 2nd, 2017

    Thanks! Very useful! 🙂

  10. Thanks a Lot!!! Before I’ve found your blog post, the HEX values have been a real pain in the a…
    Saved me a lot of time
    Thanks!

    • Mystic Smeg
    • November 20th, 2018

    Nice one, a very useful post. Thanks for posting. 🙂
    Makes you wonder why mdl creators haven’t done this themselves? Hmmm…
    Keep up the good work.

    • small penis
    • April 30th, 2019

    Use this all the time. Thanks for taking the time to write it out.

    • Bhupiister
    • April 26th, 2020

    Thanks a lot man. This saved me a lot of time and helped my head getting scratched off.

    • Mehmet Cifci
    • March 21st, 2021

    Thnx bro 😉

  1. No trackbacks yet.

 
Bitnami