Create a gist now

Instantly share code, notes, and snippets.

material color in both HEX and RGB for reference

Red

  50  #ffebee  (255, 235, 238)
 100  #ffcdd2  (255, 205, 210)
 200  #ef9a9a  (239, 154, 154)
 300  #e57373  (229, 115, 115)
 400  #ef5350  (239, 83, 80)
 500  #f44336  (244, 67, 54)
 600  #e53935  (229, 57, 53)
 700  #d32f2f  (211, 47, 47)
 800  #c62828  (198, 40, 40)
 900  #b71c1c  (183, 28, 28)
A100  #ff8a80  (255, 138, 128)
A200  #ff5252  (255, 82, 82)
A400  #ff1744  (255, 23, 68)
A700  #d50000  (213, 0, 0)

Pink

  50  #fce4ec  (252, 228, 236)
 100  #f8bbd0  (248, 187, 208)
 200  #f48fb1  (244, 143, 177)
 300  #f06292  (240, 98, 146)
 400  #ec407a  (236, 64, 122)
 500  #e91e63  (233, 30, 99)
 600  #d81b60  (216, 27, 96)
 700  #c2185b  (194, 24, 91)
 800  #ad1457  (173, 20, 87)
 900  #880e4f  (136, 14, 79)
A100  #ff80ab  (255, 128, 171)
A200  #ff4081  (255, 64, 129)
A400  #f50057  (245, 0, 87)
A700  #c51162  (197, 17, 98)

Purple

  50  #f3e5f5  (243, 229, 245)
 100  #e1bee7  (225, 190, 231)
 200  #ce93d8  (206, 147, 216)
 300  #ba68c8  (186, 104, 200)
 400  #ab47bc  (171, 71, 188)
 500  #9c27b0  (156, 39, 176)
 600  #8e24aa  (142, 36, 170)
 700  #7b1fa2  (123, 31, 162)
 800  #6a1b9a  (106, 27, 154)
 900  #4a148c  (74, 20, 140)
A100  #ea80fc  (234, 128, 252)
A200  #e040fb  (224, 64, 251)
A400  #d500f9  (213, 0, 249)
A700  #aa00ff  (170, 0, 255)

Deep Purple

  50  #ede7f6  (237, 231, 246)
 100  #d1c4e9  (209, 196, 233)
 200  #b39ddb  (179, 157, 219)
 300  #9575cd  (149, 117, 205)
 400  #7e57c2  (126, 87, 194)
 500  #673ab7  (103, 58, 183)
 600  #5e35b1  (94, 53, 177)
 700  #512da8  (81, 45, 168)
 800  #4527a0  (69, 39, 160)
 900  #311b92  (49, 27, 146)
A100  #b388ff  (179, 136, 255)
A200  #7c4dff  (124, 77, 255)
A400  #651fff  (101, 31, 255)
A700  #6200ea  (98, 0, 234)

Indigo

  50  #e8eaf6  (232, 234, 246)
 100  #c5cae9  (197, 202, 233)
 200  #9fa8da  (159, 168, 218)
 300  #7986cb  (121, 134, 203)
 400  #5c6bc0  (92, 107, 192)
 500  #3f51b5  (63, 81, 181)
 600  #3949ab  (57, 73, 171)
 700  #303f9f  (48, 63, 159)
 800  #283593  (40, 53, 147)
 900  #1a237e  (26, 35, 126)
A100  #8c9eff  (140, 158, 255)
A200  #536dfe  (83, 109, 254)
A400  #3d5afe  (61, 90, 254)
A700  #304ffe  (48, 79, 254)

Blue

  50  #e3f2fd  (227, 242, 253)
 100  #bbdefb  (187, 222, 251)
 200  #90caf9  (144, 202, 249)
 300  #64b5f6  (100, 181, 246)
 400  #42a5f5  (66, 165, 245)
 500  #2196f3  (33, 150, 243)
 600  #1e88e5  (30, 136, 229)
 700  #1976d2  (25, 118, 210)
 800  #1565c0  (21, 101, 192)
 900  #0d47a1  (13, 71, 161)
A100  #82b1ff  (130, 177, 255)
A200  #448aff  (68, 138, 255)
A400  #2979ff  (41, 121, 255)
A700  #2962ff  (41, 98, 255)

Light Blue

  50  #e1f5fe  (225, 245, 254)
 100  #b3e5fc  (179, 229, 252)
 200  #81d4fa  (129, 212, 250)
 300  #4fc3f7  (79, 195, 247)
 400  #29b6f6  (41, 182, 246)
 500  #03a9f4  (3, 169, 244)
 600  #039be5  (3, 155, 229)
 700  #0288d1  (2, 136, 209)
 800  #0277bd  (2, 119, 189)
 900  #01579b  (1, 87, 155)
A100  #80d8ff  (128, 216, 255)
A200  #40c4ff  (64, 196, 255)
A400  #00b0ff  (0, 176, 255)
A700  #0091ea  (0, 145, 234)

Cyan

  50  #e0f7fa  (224, 247, 250)
 100  #b2ebf2  (178, 235, 242)
 200  #80deea  (128, 222, 234)
 300  #4dd0e1  (77, 208, 225)
 400  #26c6da  (38, 198, 218)
 500  #00bcd4  (0, 188, 212)
 600  #00acc1  (0, 172, 193)
 700  #0097a7  (0, 151, 167)
 800  #00838f  (0, 131, 143)
 900  #006064  (0, 96, 100)
A100  #84ffff  (132, 255, 255)
A200  #18ffff  (24, 255, 255)
A400  #00e5ff  (0, 229, 255)
A700  #00b8d4  (0, 184, 212)

Teal

  50  #e0f2f1  (224, 242, 241)
 100  #b2dfdb  (178, 223, 219)
 200  #80cbc4  (128, 203, 196)
 300  #4db6ac  (77, 182, 172)
 400  #26a69a  (38, 166, 154)
 500  #009688  (0, 150, 136)
 600  #00897b  (0, 137, 123)
 700  #00796b  (0, 121, 107)
 800  #00695c  (0, 105, 92)
 900  #004d40  (0, 77, 64)
A100  #a7ffeb  (167, 255, 235)
A200  #64ffda  (100, 255, 218)
A400  #1de9b6  (29, 233, 182)
A700  #00bfa5  (0, 191, 165)

Green

  50  #e8f5e9  (232, 245, 233)
 100  #c8e6c9  (200, 230, 201)
 200  #a5d6a7  (165, 214, 167)
 300  #81c784  (129, 199, 132)
 400  #66bb6a  (102, 187, 106)
 500  #4caf50  (76, 175, 80)
 600  #43a047  (67, 160, 71)
 700  #388e3c  (56, 142, 60)
 800  #2e7d32  (46, 125, 50)
 900  #1b5e20  (27, 94, 32)
A100  #b9f6ca  (185, 246, 202)
A200  #69f0ae  (105, 240, 174)
A400  #00e676  (0, 230, 118)
A700  #00c853  (0, 200, 83)

Light Green

  50  #f1f8e9  (241, 248, 233)
 100  #dcedc8  (220, 237, 200)
 200  #c5e1a5  (197, 225, 165)
 300  #aed581  (174, 213, 129)
 400  #9ccc65  (156, 204, 101)
 500  #8bc34a  (139, 195, 74)
 600  #7cb342  (124, 179, 66)
 700  #689f38  (104, 159, 56)
 800  #558b2f  (85, 139, 47)
 900  #33691e  (51, 105, 30)
A100  #ccff90  (204, 255, 144)
A200  #b2ff59  (178, 255, 89)
A400  #76ff03  (118, 255, 3)
A700  #64dd17  (100, 221, 23)

Lime

  50  #f9fbe7  (249, 251, 231)
 100  #f0f4c3  (240, 244, 195)
 200  #e6ee9c  (230, 238, 156)
 300  #dce775  (220, 231, 117)
 400  #d4e157  (212, 225, 87)
 500  #cddc39  (205, 220, 57)
 600  #c0ca33  (192, 202, 51)
 700  #afb42b  (175, 180, 43)
 800  #9e9d24  (158, 157, 36)
 900  #827717  (130, 119, 23)
A100  #f4ff81  (244, 255, 129)
A200  #eeff41  (238, 255, 65)
A400  #c6ff00  (198, 255, 0)
A700  #aeea00  (174, 234, 0)

Yellow

  50  #fffde7  (255, 253, 231)
 100  #fff9c4  (255, 249, 196)
 200  #fff59d  (255, 245, 157)
 300  #fff176  (255, 241, 118)
 400  #ffee58  (255, 238, 88)
 500  #ffeb3b  (255, 235, 59)
 600  #fdd835  (253, 216, 53)
 700  #fbc02d  (251, 192, 45)
 800  #f9a825  (249, 168, 37)
 900  #f57f17  (245, 127, 23)
A100  #ffff8d  (255, 255, 141)
A200  #ffff00  (255, 255, 0)
A400  #ffea00  (255, 234, 0)
A700  #ffd600  (255, 214, 0)

Amber

  50  #fff8e1  (255, 248, 225)
 100  #ffecb3  (255, 236, 179)
 200  #ffe082  (255, 224, 130)
 300  #ffd54f  (255, 213, 79)
 400  #ffca28  (255, 202, 40)
 500  #ffc107  (255, 193, 7)
 600  #ffb300  (255, 179, 0)
 700  #ffa000  (255, 160, 0)
 800  #ff8f00  (255, 143, 0)
 900  #ff6f00  (255, 111, 0)
A100  #ffe57f  (255, 229, 127)
A200  #ffd740  (255, 215, 64)
A400  #ffc400  (255, 196, 0)
A700  #ffab00  (255, 171, 0)

Orange

  50  #fff3e0  (255, 243, 224)
 100  #ffe0b2  (255, 224, 178)
 200  #ffcc80  (255, 204, 128)
 300  #ffb74d  (255, 183, 77)
 400  #ffa726  (255, 167, 38)
 500  #ff9800  (255, 152, 0)
 600  #fb8c00  (251, 140, 0)
 700  #f57c00  (245, 124, 0)
 800  #ef6c00  (239, 108, 0)
 900  #e65100  (230, 81, 0)
A100  #ffd180  (255, 209, 128)
A200  #ffab40  (255, 171, 64)
A400  #ff9100  (255, 145, 0)
A700  #ff6d00  (255, 109, 0)

Deep Orange

  50  #fbe9e7  (251, 233, 231)
 100  #ffccbc  (255, 204, 188)
 200  #ffab91  (255, 171, 145)
 300  #ff8a65  (255, 138, 101)
 400  #ff7043  (255, 112, 67)
 500  #ff5722  (255, 87, 34)
 600  #f4511e  (244, 81, 30)
 700  #e64a19  (230, 74, 25)
 800  #d84315  (216, 67, 21)
 900  #bf360c  (191, 54, 12)
A100  #ff9e80  (255, 158, 128)
A200  #ff6e40  (255, 110, 64)
A400  #ff3d00  (255, 61, 0)
A700  #dd2c00  (221, 44, 0)

Brown

  50  #efebe9  (239, 235, 233)
 100  #d7ccc8  (215, 204, 200)
 200  #bcaaa4  (188, 170, 164)
 300  #a1887f  (161, 136, 127)
 400  #8d6e63  (141, 110, 99)
 500  #795548  (121, 85, 72)
 600  #6d4c41  (109, 76, 65)
 700  #5d4037  (93, 64, 55)
 800  #4e342e  (78, 52, 46)
 900  #3e2723  (62, 39, 35)

Grey

  50  #fafafa  (250, 250, 250)
 100  #f5f5f5  (245, 245, 245)
 200  #eeeeee  (238, 238, 238)
 300  #e0e0e0  (224, 224, 224)
 400  #bdbdbd  (189, 189, 189)
 500  #9e9e9e  (158, 158, 158)
 600  #757575  (117, 117, 117)
 700  #616161  (97, 97, 97)
 800  #424242  (66, 66, 66)
 900  #212121  (33, 33, 33)

Blue Grey

  50  #eceff1  (236, 239, 241)
 100  #cfd8dc  (207, 216, 220)
 200  #b0bec5  (176, 190, 197)
 300  #90a4ae  (144, 164, 174)
 400  #78909c  (120, 144, 156)
 500  #607d8b  (96, 125, 139)
 600  #546e7a  (84, 110, 122)
 700  #455a64  (69, 90, 100)
 800  #37474f  (55, 71, 79)
 900  #263238  (38, 50, 56)
@andy0130tw
Owner

Side note: the official palette is part of Material Design spec.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment