Material Color Palette

As you could guess from the name one of the main features of MCPVR is material color palette.

You can use it directly in your emup by specifying class bg-color-tone for background color or color-tone for text color.

In sass you can use mixins palette('color','tone') and text('color') for opaque black and white

red

.bg-red

.red

#f44336

.bg-red-50

.red-50

#ffebee

.bg-red-100

.red-100

#ffcdd2

.bg-red-200

.red-200

#ef9a9a

.bg-red-300

.red-300

#e57373

.bg-red-400

.red-400

#ef5350

.bg-red-500

.red-500

#f44336

.bg-red-600

.red-600

#e53935

.bg-red-700

.red-700

#d32f2f

.bg-red-800

.red-800

#c62828

.bg-red-900

.red-900

#b71c1c

.bg-red-A100

.red-A100

#ff8a80

.bg-red-A200

.red-A200

#ff5252

.bg-red-A400

.red-A400

#ff1744

.bg-red-A700

.red-A700

#d50000

pink

.bg-pink

.pink

#e91e63

.bg-pink-50

.pink-50

#fce4ec

.bg-pink-100

.pink-100

#f8bbd0

.bg-pink-200

.pink-200

#f48fb1

.bg-pink-300

.pink-300

#f06292

.bg-pink-400

.pink-400

#ec407a

.bg-pink-500

.pink-500

#e91e63

.bg-pink-600

.pink-600

#d81b60

.bg-pink-700

.pink-700

#c2185b

.bg-pink-800

.pink-800

#ad1457

.bg-pink-900

.pink-900

#880e4f

.bg-pink-A100

.pink-A100

#ff80ab

.bg-pink-A200

.pink-A200

#ff4081

.bg-pink-A400

.pink-A400

#f50057

.bg-pink-A700

.pink-A700

#c51162

purple

.bg-purple

.purple

#9c27b0

.bg-purple-50

.purple-50

#f3e5f5

.bg-purple-100

.purple-100

#e1bee7

.bg-purple-200

.purple-200

#ce93d8

.bg-purple-300

.purple-300

#ba68c8

.bg-purple-400

.purple-400

#ab47bc

.bg-purple-500

.purple-500

#9c27b0

.bg-purple-600

.purple-600

#8e24aa

.bg-purple-700

.purple-700

#7b1fa2

.bg-purple-800

.purple-800

#6a1b9a

.bg-purple-900

.purple-900

#4a148c

.bg-purple-A100

.purple-A100

#ea80fc

.bg-purple-A200

.purple-A200

#e040fb

.bg-purple-A400

.purple-A400

#d500f9

.bg-purple-A700

.purple-A700

#aa00ff

deep-purple

.bg-deep-purple

.deep-purple

#673ab7

.bg-deep-purple-50

.deep-purple-50

#ede7f6

.bg-deep-purple-100

.deep-purple-100

#d1c4e9

.bg-deep-purple-200

.deep-purple-200

#b39ddb

.bg-deep-purple-300

.deep-purple-300

#9575cd

.bg-deep-purple-400

.deep-purple-400

#7e57c2

.bg-deep-purple-500

.deep-purple-500

#673ab7

.bg-deep-purple-600

.deep-purple-600

#5e35b1

.bg-deep-purple-700

.deep-purple-700

#512da8

.bg-deep-purple-800

.deep-purple-800

#4527a0

.bg-deep-purple-900

.deep-purple-900

#311b92

.bg-deep-purple-A100

.deep-purple-A100

#b388ff

.bg-deep-purple-A200

.deep-purple-A200

#7c4dff

.bg-deep-purple-A400

.deep-purple-A400

#651fff

.bg-deep-purple-A700

.deep-purple-A700

#6200ea

indigo

.bg-indigo

.indigo

#3f51b5

.bg-indigo-50

.indigo-50

#e8eaf6

.bg-indigo-100

.indigo-100

#c5cae9

.bg-indigo-200

.indigo-200

#9fa8da

.bg-indigo-300

.indigo-300

#7986cb

.bg-indigo-400

.indigo-400

#5c6bc0

.bg-indigo-500

.indigo-500

#3f51b5

.bg-indigo-600

.indigo-600

#3949ab

.bg-indigo-700

.indigo-700

#303f9f

.bg-indigo-800

.indigo-800

#283593

.bg-indigo-900

.indigo-900

#1a237e

.bg-indigo-A100

.indigo-A100

#8c9eff

.bg-indigo-A200

.indigo-A200

#536dfe

.bg-indigo-A400

.indigo-A400

#3d5afe

.bg-indigo-A700

.indigo-A700

#304ffe

blue

.bg-blue

.blue

#2196f3

.bg-blue-50

.blue-50

#e3f2fd

.bg-blue-100

.blue-100

#bbdefb

.bg-blue-200

.blue-200

#90caf9

.bg-blue-300

.blue-300

#64b5f6

.bg-blue-400

.blue-400

#42a5f5

.bg-blue-500

.blue-500

#2196f3

.bg-blue-600

.blue-600

#1e88e5

.bg-blue-700

.blue-700

#1976d2

.bg-blue-800

.blue-800

#1565c0

.bg-blue-900

.blue-900

#0d47a1

.bg-blue-A100

.blue-A100

#82b1ff

.bg-blue-A200

.blue-A200

#448aff

.bg-blue-A400

.blue-A400

#2979ff

.bg-blue-A700

.blue-A700

#2962ff

light-blue

.bg-light-blue

.light-blue

#03a9f4

.bg-light-blue-50

.light-blue-50

#e1f5fe

.bg-light-blue-100

.light-blue-100

#b3e5fc

.bg-light-blue-200

.light-blue-200

#81d4fa

.bg-light-blue-300

.light-blue-300

#4fc3f7

.bg-light-blue-400

.light-blue-400

#29b6f6

.bg-light-blue-500

.light-blue-500

#03a9f4

.bg-light-blue-600

.light-blue-600

#039be5

.bg-light-blue-700

.light-blue-700

#0288d1

.bg-light-blue-800

.light-blue-800

#0277bd

.bg-light-blue-900

.light-blue-900

#01579b

.bg-light-blue-A100

.light-blue-A100

#80d8ff

.bg-light-blue-A200

.light-blue-A200

#40c4ff

.bg-light-blue-A400

.light-blue-A400

#00b0ff

.bg-light-blue-A700

.light-blue-A700

#0091ea

cyan

.bg-cyan

.cyan

#00bcd4

.bg-cyan-50

.cyan-50

#e0f7fa

.bg-cyan-100

.cyan-100

#b2ebf2

.bg-cyan-200

.cyan-200

#80deea

.bg-cyan-300

.cyan-300

#4dd0e1

.bg-cyan-400

.cyan-400

#26c6da

.bg-cyan-500

.cyan-500

#00bcd4

.bg-cyan-600

.cyan-600

#00acc1

.bg-cyan-700

.cyan-700

#0097a7

.bg-cyan-800

.cyan-800

#00838f

.bg-cyan-900

.cyan-900

#006064

.bg-cyan-A100

.cyan-A100

#84ffff

.bg-cyan-A200

.cyan-A200

#18ffff

.bg-cyan-A400

.cyan-A400

#00e5ff

.bg-cyan-A700

.cyan-A700

#00b8d4

teal

.bg-teal

.teal

#009688

.bg-teal-50

.teal-50

#e0f2f1

.bg-teal-100

.teal-100

#b2dfdb

.bg-teal-200

.teal-200

#80cbc4

.bg-teal-300

.teal-300

#4db6ac

.bg-teal-400

.teal-400

#26a69a

.bg-teal-500

.teal-500

#009688

.bg-teal-600

.teal-600

#00897b

.bg-teal-700

.teal-700

#00796b

.bg-teal-800

.teal-800

#00695c

.bg-teal-900

.teal-900

#004d40

.bg-teal-A100

.teal-A100

#a7ffeb

.bg-teal-A200

.teal-A200

#64ffda

.bg-teal-A400

.teal-A400

#1de9b6

.bg-teal-A700

.teal-A700

#00bfa5

green

.bg-green

.green

#4caf50

.bg-green-50

.green-50

#e8f5e9

.bg-green-100

.green-100

#c8e6c9

.bg-green-200

.green-200

#a5d6a7

.bg-green-300

.green-300

#81c784

.bg-green-400

.green-400

#66bb6a

.bg-green-500

.green-500

#4caf50

.bg-green-600

.green-600

#43a047

.bg-green-700

.green-700

#388e3c

.bg-green-800

.green-800

#2e7d32

.bg-green-900

.green-900

#1b5e20

.bg-green-A100

.green-A100

#b9f6ca

.bg-green-A200

.green-A200

#69f0ae

.bg-green-A400

.green-A400

#00e676

.bg-green-A700

.green-A700

#00c853

light-green

.bg-light-green

.light-green

#8bc34a

.bg-light-green-50

.light-green-50

#f1f8e9

.bg-light-green-100

.light-green-100

#dcedc8

.bg-light-green-200

.light-green-200

#c5e1a5

.bg-light-green-300

.light-green-300

#aed581

.bg-light-green-400

.light-green-400

#9ccc65

.bg-light-green-500

.light-green-500

#8bc34a

.bg-light-green-600

.light-green-600

#7cb342

.bg-light-green-700

.light-green-700

#689f38

.bg-light-green-800

.light-green-800

#558b2f

.bg-light-green-900

.light-green-900

#33691e

.bg-light-green-A100

.light-green-A100

#ccff90

.bg-light-green-A200

.light-green-A200

#b2ff59

.bg-light-green-A400

.light-green-A400

#76ff03

.bg-light-green-A700

.light-green-A700

#64dd17

lime

.bg-lime

.lime

#cddc39

.bg-lime-50

.lime-50

#f9fbe7

.bg-lime-100

.lime-100

#f0f4c3

.bg-lime-200

.lime-200

#e6ee9c

.bg-lime-300

.lime-300

#dce775

.bg-lime-400

.lime-400

#d4e157

.bg-lime-500

.lime-500

#cddc39

.bg-lime-600

.lime-600

#c0ca33

.bg-lime-700

.lime-700

#afb42b

.bg-lime-800

.lime-800

#9e9d24

.bg-lime-900

.lime-900

#827717

.bg-lime-A100

.lime-A100

#f4ff81

.bg-lime-A200

.lime-A200

#eeff41

.bg-lime-A400

.lime-A400

#c6ff00

.bg-lime-A700

.lime-A700

#aeea00

yellow

.bg-yellow

.yellow

#ffeb3b

.bg-yellow-50

.yellow-50

#fffde7

.bg-yellow-100

.yellow-100

#fff9c4

.bg-yellow-200

.yellow-200

#fff59d

.bg-yellow-300

.yellow-300

#fff176

.bg-yellow-400

.yellow-400

#ffee58

.bg-yellow-500

.yellow-500

#ffeb3b

.bg-yellow-600

.yellow-600

#fdd835

.bg-yellow-700

.yellow-700

#fbc02d

.bg-yellow-800

.yellow-800

#f9a825

.bg-yellow-900

.yellow-900

#f57f17

.bg-yellow-A100

.yellow-A100

#ffff8d

.bg-yellow-A200

.yellow-A200

#ffff00

.bg-yellow-A400

.yellow-A400

#ffea00

.bg-yellow-A700

.yellow-A700

#ffd600

amber

.bg-amber

.amber

#ffc107

.bg-amber-50

.amber-50

#fff8e1

.bg-amber-100

.amber-100

#ffecb3

.bg-amber-200

.amber-200

#ffe082

.bg-amber-300

.amber-300

#ffd54f

.bg-amber-400

.amber-400

#ffca28

.bg-amber-500

.amber-500

#ffc107

.bg-amber-600

.amber-600

#ffb300

.bg-amber-700

.amber-700

#ffa000

.bg-amber-800

.amber-800

#ff8f00

.bg-amber-900

.amber-900

#ff6f00

.bg-amber-A100

.amber-A100

#ffe57f

.bg-amber-A200

.amber-A200

#ffd740

.bg-amber-A400

.amber-A400

#ffc400

.bg-amber-A700

.amber-A700

#ffab00

orange

.bg-orange

.orange

#ff9800

.bg-orange-50

.orange-50

#fff3e0

.bg-orange-100

.orange-100

#ffe0b2

.bg-orange-200

.orange-200

#ffcc80

.bg-orange-300

.orange-300

#ffb74d

.bg-orange-400

.orange-400

#ffa726

.bg-orange-500

.orange-500

#ff9800

.bg-orange-600

.orange-600

#fb8c00

.bg-orange-700

.orange-700

#f57c00

.bg-orange-800

.orange-800

#ef6c00

.bg-orange-900

.orange-900

#e65100

.bg-orange-A100

.orange-A100

#ffd180

.bg-orange-A200

.orange-A200

#ffab40

.bg-orange-A400

.orange-A400

#ff9100

.bg-orange-A700

.orange-A700

#ff6d00

deep-orange

.bg-deep-orange

.deep-orange

#ff5722

.bg-deep-orange-50

.deep-orange-50

#fbe9e7

.bg-deep-orange-100

.deep-orange-100

#ffccbc

.bg-deep-orange-200

.deep-orange-200

#ffab91

.bg-deep-orange-300

.deep-orange-300

#ff8a65

.bg-deep-orange-400

.deep-orange-400

#ff7043

.bg-deep-orange-500

.deep-orange-500

#ff5722

.bg-deep-orange-600

.deep-orange-600

#f4511e

.bg-deep-orange-700

.deep-orange-700

#e64a19

.bg-deep-orange-800

.deep-orange-800

#d84315

.bg-deep-orange-900

.deep-orange-900

#bf360c

.bg-deep-orange-A100

.deep-orange-A100

#ff9e80

.bg-deep-orange-A200

.deep-orange-A200

#ff6e40

.bg-deep-orange-A400

.deep-orange-A400

#ff3d00

.bg-deep-orange-A700

.deep-orange-A700

#dd2c00

brown

.bg-brown

.brown

#795548

.bg-brown-50

.brown-50

#efebe9

.bg-brown-100

.brown-100

#d7ccc8

.bg-brown-200

.brown-200

#bcaaa4

.bg-brown-300

.brown-300

#a1887f

.bg-brown-400

.brown-400

#8d6e63

.bg-brown-500

.brown-500

#795548

.bg-brown-600

.brown-600

#6d4c41

.bg-brown-700

.brown-700

#5d4037

.bg-brown-800

.brown-800

#4e342e

.bg-brown-900

.brown-900

#3e2723

grey

.bg-grey

.grey

#9e9e9e

.bg-grey-50

.grey-50

#fafafa

.bg-grey-100

.grey-100

#f5f5f5

.bg-grey-200

.grey-200

#eeeeee

.bg-grey-300

.grey-300

#e0e0e0

.bg-grey-400

.grey-400

#bdbdbd

.bg-grey-500

.grey-500

#9e9e9e

.bg-grey-600

.grey-600

#757575

.bg-grey-700

.grey-700

#616161

.bg-grey-800

.grey-800

#424242

.bg-grey-900

.grey-900

#212121

blue-grey

.bg-blue-grey

.blue-grey

#607d8b

.bg-blue-grey-50

.blue-grey-50

#eceff1

.bg-blue-grey-100

.blue-grey-100

#cfd8dc

.bg-blue-grey-200

.blue-grey-200

#b0bec5

.bg-blue-grey-300

.blue-grey-300

#90a4ae

.bg-blue-grey-400

.blue-grey-400

#78909c

.bg-blue-grey-500

.blue-grey-500

#607d8b

.bg-blue-grey-600

.blue-grey-600

#546e7a

.bg-blue-grey-700

.blue-grey-700

#455a64

.bg-blue-grey-800

.blue-grey-800

#37474f

.bg-blue-grey-900

.blue-grey-900

#263238

dark

.bg-dark-primary

.dark-primary

rgba(0,0,0,0.87)

.bg-dark-secondary

.dark-secondary

rgba(0,0,0,0.54)

.bg-dark-hint

.dark-hint

rgba(0,0,0,0.38)

.bg-dark-divider

.dark-divider

rgba(0,0,0,0.12)

light

.bg-light-primary

.light-primary

#FFFFFF

.bg-light-secondary

.light-secondary

rgba(255, 255, 255, 0.7)

.bg-light-hint

.light-hint

rgba(255, 255, 255, 0.5)

.bg-light-divider

.light-divider

rgba(255, 255, 255, 0.12)