30 Examples of Material Design Palette Color Usage

Easily find the best Material color for your projects.

Here is 30 color combination based on material design color palette.

By clicking color sample bar, You can check usage example in material design UI.

Each of color combinations consists of following three kinds of colors.
(1) Main (2) Optional (3) Accent

 color Constitution

For details, see Google Guideline.

Contents

Main : Blue

#2196F3 #1976D2 #EF5350

#03A9F4 #039BE5 #FFC107

#03A9F4 #64B5F6 #FF80AB

#00BCD4 #4DD0E1 #FDD835

#00BCD4 #00ACC1 #FFA726

#3F51B5 #5C6BC0 #FFC107

Main : Purple

Sponsored Link

#673AB7 #512DA8 #2196F3

#9C27B0 #BA68C8 #FFCA28

#673AB7 #9575CD #2196F3

Main : Red

#f44336 #ff5252 #FFA726

#f44336 #e53935 #FDD835

#E91E63 #F06292 #42A5F5

Main : Orange

#FF5722 #FF6E40 #FBC02D

#FF5722 #E64A19 #3F51B5

#FF9800 #FB8C00 #f44336

#FF9800 #FFB74D #29B6F6

#FFC107 #FFA000 #26C6DA

#FFC107 #FFD54F #4FC3F7

Main : Green

#CDDC39 #C0CA33 #009688

#8BC34A #9CCC65 #FF8A65

#CDDC39 #689F38 #FFD740

#4CAF50 #66BB6A #FFC107

#009688 #00897B #4DD0E1

#009688 #80CBC4 #FDD835

Low Chroma

Sponsored Link

#607D8B #455A64 #FDD835

#607D8B #37474F #F06292

#9E9E9E #757575 #42A5F5

#9E9E9E #BDBDBD #FF7043

#795548 #A1887F #FFCA28

#795548 #5D4037 #4CAF50

UI Preview

 UI Preview