Design system

Material Colors

Material Design color scales with HEX values, contrast notes, and production-ready tokens. 190 colors in this reference. Shade numbers are official for this system; other hex values on ColorBase are labeled as nearest approximations.

#f44336

#e91e63

#9c27b0

#2196f3

#4caf50

#ff9800

#ffecb3

rgb(255, 236, 179)

Material Amber 100

Shade 100

#ffe082

rgb(255, 224, 130)

Material Amber 200

Shade 200

#ffd54f

rgb(255, 213, 79)

Material Amber 300

Shade 300

#ffca28

rgb(255, 202, 40)

Material Amber 400

Shade 400

#fff8e1

rgb(255, 248, 225)

Material Amber 50

Shade 50

#ffc107

rgb(255, 193, 7)

Material Amber 500

Shade 500

#ffb300

rgb(255, 179, 0)

Material Amber 600

Shade 600

#ffa000

rgb(255, 160, 0)

Material Amber 700

Shade 700

#ff8f00

rgb(255, 143, 0)

Material Amber 800

Shade 800

#ff6f00

rgb(255, 111, 0)

Material Amber 900

Shade 900

#bbdefb

rgb(187, 222, 251)

Material Blue 100

Shade 100

#90caf9

rgb(144, 202, 249)

Material Blue 200

Shade 200

#64b5f6

rgb(100, 181, 246)

Material Blue 300

Shade 300

#42a5f5

rgb(66, 165, 245)

Material Blue 400

Shade 400

#e3f2fd

rgb(227, 242, 253)

Material Blue 50

Shade 50

#2196f3

rgb(33, 150, 243)

Material Blue 500

Shade 500

#1e88e5

rgb(30, 136, 229)

Material Blue 600

Shade 600

#1976d2

rgb(25, 118, 210)

Material Blue 700

Shade 700

#1565c0

rgb(21, 101, 192)

Material Blue 800

Shade 800

#0d47a1

rgb(13, 71, 161)

Material Blue 900

Shade 900

#cfd8dc

rgb(207, 216, 220)

Material Blue Grey 100

Shade 100

#b0bec5

rgb(176, 190, 197)

Material Blue Grey 200

Shade 200

#90a4ae

rgb(144, 164, 174)

Material Blue Grey 300

Shade 300

#78909c

rgb(120, 144, 156)

Material Blue Grey 400

Shade 400

#eceff1

rgb(236, 239, 241)

Material Blue Grey 50

Shade 50

#607d8b

rgb(96, 125, 139)

Material Blue Grey 500

Shade 500

#546e7a

rgb(84, 110, 122)

Material Blue Grey 600

Shade 600

#455a64

rgb(69, 90, 100)

Material Blue Grey 700

Shade 700

#37474f

rgb(55, 71, 79)

Material Blue Grey 800

Shade 800

#263238

rgb(38, 50, 56)

Material Blue Grey 900

Shade 900

#d7ccc8

rgb(215, 204, 200)

Material Brown 100

Shade 100

#bcaaa4

rgb(188, 170, 164)

Material Brown 200

Shade 200

#a1887f

rgb(161, 136, 127)

Material Brown 300

Shade 300

#8d6e63

rgb(141, 110, 99)

Material Brown 400

Shade 400

#efebe9

rgb(239, 235, 233)

Material Brown 50

Shade 50

#795548

rgb(121, 85, 72)

Material Brown 500

Shade 500

#6d4c41

rgb(109, 76, 65)

Material Brown 600

Shade 600

#5d4037

rgb(93, 64, 55)

Material Brown 700

Shade 700

#4e342e

rgb(78, 52, 46)

Material Brown 800

Shade 800

#3e2723

rgb(62, 39, 35)

Material Brown 900

Shade 900

#b2ebf2

rgb(178, 235, 242)

Material Cyan 100

Shade 100

#80deea

rgb(128, 222, 234)

Material Cyan 200

Shade 200

#4dd0e1

rgb(77, 208, 225)

Material Cyan 300

Shade 300

#26c6da

rgb(38, 198, 218)

Material Cyan 400

Shade 400

#e0f7fa

rgb(224, 247, 250)

Material Cyan 50

Shade 50

#00bcd4

rgb(0, 188, 212)

Material Cyan 500

Shade 500

#00acc1

rgb(0, 172, 193)

Material Cyan 600

Shade 600

#0097a7

rgb(0, 151, 167)

Material Cyan 700

Shade 700

#00838f

rgb(0, 131, 143)

Material Cyan 800

Shade 800

#006064

rgb(0, 96, 100)

Material Cyan 900

Shade 900

#ffccbc

rgb(255, 204, 188)

Material Deep Orange 100

Shade 100

#ffab91

rgb(255, 171, 145)

Material Deep Orange 200

Shade 200

#ff8a65

rgb(255, 138, 101)

Material Deep Orange 300

Shade 300

#ff7043

rgb(255, 112, 67)

Material Deep Orange 400

Shade 400

#fbe9e7

rgb(251, 233, 231)

Material Deep Orange 50

Shade 50

#ff5722

rgb(255, 87, 34)

Material Deep Orange 500

Shade 500

#f4511e

rgb(244, 81, 30)

Material Deep Orange 600

Shade 600

#e64a19

rgb(230, 74, 25)

Material Deep Orange 700

Shade 700

#d84315

rgb(216, 67, 21)

Material Deep Orange 800

Shade 800

#bf360c

rgb(191, 54, 12)

Material Deep Orange 900

Shade 900

#d1c4e9

rgb(209, 196, 233)

Material Deep Purple 100

Shade 100

#b39ddb

rgb(179, 157, 219)

Material Deep Purple 200

Shade 200

#9575cd

rgb(149, 117, 205)

Material Deep Purple 300

Shade 300

#7e57c2

rgb(126, 87, 194)

Material Deep Purple 400

Shade 400

#ede7f6

rgb(237, 231, 246)

Material Deep Purple 50

Shade 50

#673ab7

rgb(103, 58, 183)

Material Deep Purple 500

Shade 500

#5e35b1

rgb(94, 53, 177)

Material Deep Purple 600

Shade 600

#512da8

rgb(81, 45, 168)

Material Deep Purple 700

Shade 700

#4527a0

rgb(69, 39, 160)

Material Deep Purple 800

Shade 800

#311b92

rgb(49, 27, 146)

Material Deep Purple 900

Shade 900

#c8e6c9

rgb(200, 230, 201)

Material Green 100

Shade 100

#a5d6a7

rgb(165, 214, 167)

Material Green 200

Shade 200

#81c784

rgb(129, 199, 132)

Material Green 300

Shade 300

#66bb6a

rgb(102, 187, 106)

Material Green 400

Shade 400

#e8f5e9

rgb(232, 245, 233)

Material Green 50

Shade 50

#4caf50

rgb(76, 175, 80)

Material Green 500

Shade 500

#43a047

rgb(67, 160, 71)

Material Green 600

Shade 600

#388e3c

rgb(56, 142, 60)

Material Green 700

Shade 700

#2e7d32

rgb(46, 125, 50)

Material Green 800

Shade 800

#1b5e20

rgb(27, 94, 32)

Material Green 900

Shade 900

#eeeeee

rgb(238, 238, 238)

Material Grey 200

Shade 200

#e0e0e0

rgb(224, 224, 224)

Material Grey 300

Shade 300

#bdbdbd

rgb(189, 189, 189)

Material Grey 400

Shade 400

#fafafa

rgb(250, 250, 250)

Material Grey 50

Shade 50

#9e9e9e

rgb(158, 158, 158)

Material Grey 500

Shade 500

#757575

rgb(117, 117, 117)

Material Grey 600

Shade 600

#616161

rgb(97, 97, 97)

Material Grey 700

Shade 700

#424242

rgb(66, 66, 66)

Material Grey 800

Shade 800

#212121

rgb(33, 33, 33)

Material Grey 900

Shade 900

#c5cae9

rgb(197, 202, 233)

Material Indigo 100

Shade 100

#9fa8da

rgb(159, 168, 218)

Material Indigo 200

Shade 200

#7986cb

rgb(121, 134, 203)

Material Indigo 300

Shade 300

#5c6bc0

rgb(92, 107, 192)

Material Indigo 400

Shade 400

#e8eaf6

rgb(232, 234, 246)

Material Indigo 50

Shade 50

#3f51b5

rgb(63, 81, 181)

Material Indigo 500

Shade 500

#3949ab

rgb(57, 73, 171)

Material Indigo 600

Shade 600

#303f9f

rgb(48, 63, 159)

Material Indigo 700

Shade 700

#283593

rgb(40, 53, 147)

Material Indigo 800

Shade 800

#1a237e

rgb(26, 35, 126)

Material Indigo 900

Shade 900

#b3e5fc

rgb(179, 229, 252)

Material Light Blue 100

Shade 100

#81d4fa

rgb(129, 212, 250)

Material Light Blue 200

Shade 200

#4fc3f7

rgb(79, 195, 247)

Material Light Blue 300

Shade 300

#29b6f6

rgb(41, 182, 246)

Material Light Blue 400

Shade 400

#e1f5fe

rgb(225, 245, 254)

Material Light Blue 50

Shade 50

#03a9f4

rgb(3, 169, 244)

Material Light Blue 500

Shade 500

#039be5

rgb(3, 155, 229)

Material Light Blue 600

Shade 600

#0288d1

rgb(2, 136, 209)

Material Light Blue 700

Shade 700

#0277bd

rgb(2, 119, 189)

Material Light Blue 800

Shade 800

#01579b

rgb(1, 87, 155)

Material Light Blue 900

Shade 900

#dcedc8

rgb(220, 237, 200)

Material Light Green 100

Shade 100

#c5e1a5

rgb(197, 225, 165)

Material Light Green 200

Shade 200

#aed581

rgb(174, 213, 129)

Material Light Green 300

Shade 300

#9ccc65

rgb(156, 204, 101)

Material Light Green 400

Shade 400

#f1f8e9

rgb(241, 248, 233)

Material Light Green 50

Shade 50

#8bc34a

rgb(139, 195, 74)

Material Light Green 500

Shade 500

#7cb342

rgb(124, 179, 66)

Material Light Green 600

Shade 600

#689f38

rgb(104, 159, 56)

Material Light Green 700

Shade 700

#558b2f

rgb(85, 139, 47)

Material Light Green 800

Shade 800

#33691e

rgb(51, 105, 30)

Material Light Green 900

Shade 900

#f0f4c3

rgb(240, 244, 195)

Material Lime 100

Shade 100

#e6ee9c

rgb(230, 238, 156)

Material Lime 200

Shade 200

#dce775

rgb(220, 231, 117)

Material Lime 300

Shade 300

#d4e157

rgb(212, 225, 87)

Material Lime 400

Shade 400

#f9fbe7

rgb(249, 251, 231)

Material Lime 50

Shade 50

#cddc39

rgb(205, 220, 57)

Material Lime 500

Shade 500

#c0ca33

rgb(192, 202, 51)

Material Lime 600

Shade 600

#afb42b

rgb(175, 180, 43)

Material Lime 700

Shade 700

#9e9d24

rgb(158, 157, 36)

Material Lime 800

Shade 800

#827717

rgb(130, 119, 23)

Material Lime 900

Shade 900

#ffe0b2

rgb(255, 224, 178)

Material Orange 100

Shade 100

#ffcc80

rgb(255, 204, 128)

Material Orange 200

Shade 200

#ffb74d

rgb(255, 183, 77)

Material Orange 300

Shade 300

#ffa726

rgb(255, 167, 38)

Material Orange 400

Shade 400

#fff3e0

rgb(255, 243, 224)

Material Orange 50

Shade 50

#ff9800

rgb(255, 152, 0)

Material Orange 500

Shade 500

#fb8c00

rgb(251, 140, 0)

Material Orange 600

Shade 600

#f57c00

rgb(245, 124, 0)

Material Orange 700

Shade 700

#ef6c00

rgb(239, 108, 0)

Material Orange 800

Shade 800

#e65100

rgb(230, 81, 0)

Material Orange 900

Shade 900

#f8bbd0

rgb(248, 187, 208)

Material Pink 100

Shade 100

#f48fb1

rgb(244, 143, 177)

Material Pink 200

Shade 200

#f06292

rgb(240, 98, 146)

Material Pink 300

Shade 300

#ec407a

rgb(236, 64, 122)

Material Pink 400

Shade 400

#fce4ec

rgb(252, 228, 236)

Material Pink 50

Shade 50

#e91e63

rgb(233, 30, 99)

Material Pink 500

Shade 500

#d81b60

rgb(216, 27, 96)

Material Pink 600

Shade 600

#c2185b

rgb(194, 24, 91)

Material Pink 700

Shade 700

#ad1457

rgb(173, 20, 87)

Material Pink 800

Shade 800

#880e4f

rgb(136, 14, 79)

Material Pink 900

Shade 900

#e1bee7

rgb(225, 190, 231)

Material Purple 100

Shade 100

#ce93d8

rgb(206, 147, 216)

Material Purple 200

Shade 200

#ba68c8

rgb(186, 104, 200)

Material Purple 300

Shade 300

#ab47bc

rgb(171, 71, 188)

Material Purple 400

Shade 400

#f3e5f5

rgb(243, 229, 245)

Material Purple 50

Shade 50

#9c27b0

rgb(156, 39, 176)

Material Purple 500

Shade 500

#8e24aa

rgb(142, 36, 170)

Material Purple 600

Shade 600

#7b1fa2

rgb(123, 31, 162)

Material Purple 700

Shade 700

#6a1b9a

rgb(106, 27, 154)

Material Purple 800

Shade 800

#4a148c

rgb(74, 20, 140)

Material Purple 900

Shade 900

#ffcdd2

rgb(255, 205, 210)

Material Red 100

Shade 100

#ef9a9a

rgb(239, 154, 154)

Material Red 200

Shade 200

#e57373

rgb(229, 115, 115)

Material Red 300

Shade 300

#ef5350

rgb(239, 83, 80)

Material Red 400

Shade 400

#ffebee

rgb(255, 235, 238)

Material Red 50

Shade 50

#f44336

rgb(244, 67, 54)

Material Red 500

Shade 500

#e53935

rgb(229, 57, 53)

Material Red 600

Shade 600

#d32f2f

rgb(211, 47, 47)

Material Red 700

Shade 700

#c62828

rgb(198, 40, 40)

Material Red 800

Shade 800

#b71c1c

rgb(183, 28, 28)

Material Red 900

Shade 900

#b2dfdb

rgb(178, 223, 219)

Material Teal 100

Shade 100

#80cbc4

rgb(128, 203, 196)

Material Teal 200

Shade 200

#4db6ac

rgb(77, 182, 172)

Material Teal 300

Shade 300

#26a69a

rgb(38, 166, 154)

Material Teal 400

Shade 400

#e0f2f1

rgb(224, 242, 241)

Material Teal 50

Shade 50

#009688

rgb(0, 150, 136)

Material Teal 500

Shade 500

#00897b

rgb(0, 137, 123)

Material Teal 600

Shade 600

#00796b

rgb(0, 121, 107)

Material Teal 700

Shade 700

#00695c

rgb(0, 105, 92)

Material Teal 800

Shade 800

#004d40

rgb(0, 77, 64)

Material Teal 900

Shade 900

#fff9c4

rgb(255, 249, 196)

Material Yellow 100

Shade 100

#fff59d

rgb(255, 245, 157)

Material Yellow 200

Shade 200

#fff176

rgb(255, 241, 118)

Material Yellow 300

Shade 300

#ffee58

rgb(255, 238, 88)

Material Yellow 400

Shade 400

#fffde7

rgb(255, 253, 231)

Material Yellow 50

Shade 50

#ffeb3b

rgb(255, 235, 59)

Material Yellow 500

Shade 500

#fdd835

rgb(253, 216, 53)

Material Yellow 600

Shade 600

#fbc02d

rgb(251, 192, 45)

Material Yellow 700

Shade 700

#f9a825

rgb(249, 168, 37)

Material Yellow 800

Shade 800

#f57f17

rgb(245, 127, 23)

Material Yellow 900

Shade 900

#f5f5f5

rgb(245, 245, 245)

WhiteSmoke

white