Material Design Colors
An organized selection of vivid colors from Google's Material Design guidelines, intended to create a sleek and contemporary look.
Red
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Red 50 | #FFEBEE | rgb(255, 235, 238) | |
| Red 100 | #FFCDD2 | rgb(255, 205, 210) | |
| Red 200 | #EF9A9A | rgb(239, 154, 154) | |
| Red 300 | #E57373 | rgb(229, 115, 115) | |
| Red 400 | #EF5350 | rgb(239, 83, 80) | |
| Red 500 | #F44336 | rgb(244, 67, 54) | |
| Red 600 | #E53935 | rgb(229, 57, 53) | |
| Red 700 | #D32F2F | rgb(211, 47, 47) | |
| Red 800 | #C62828 | rgb(198, 40, 40) | |
| Red 900 | #B71C1C | rgb(183, 28, 28) | |
| Red A100 | #FF8A80 | rgb(255, 138, 128) | |
| Red A200 | #FF5252 | rgb(255, 82, 82) | |
| Red A400 | #FF1744 | rgb(255, 23, 68) | |
| Red A700 | #D50000 | rgb(213, 0, 0) |
Pink
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Pink 50 | #FCE4EC | rgb(252, 228, 236) | |
| Pink 100 | #F8BBD0 | rgb(248, 187, 208) | |
| Pink 200 | #F48FB1 | rgb(244, 143, 177) | |
| Pink 300 | #F06292 | rgb(240, 98, 146) | |
| Pink 400 | #EC407A | rgb(236, 64, 122) | |
| Pink 500 | #E91E63 | rgb(233, 30, 99) | |
| Pink 600 | #D81B60 | rgb(216, 27, 96) | |
| Pink 700 | #C2185B | rgb(194, 24, 91) | |
| Pink 800 | #AD1457 | rgb(173, 20, 87) | |
| Pink 900 | #880E4F | rgb(136, 14, 79) | |
| Pink A100 | #FF80AB | rgb(255, 128, 171) | |
| Pink A200 | #FF4081 | rgb(255, 64, 129) | |
| Pink A400 | #F50057 | rgb(245, 0, 87) | |
| Pink A700 | #C51162 | rgb(197, 17, 98) |
Purple
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Purple 50 | #F3E5F5 | rgb(243, 229, 245) | |
| Purple 100 | #E1BEE7 | rgb(225, 190, 231) | |
| Purple 200 | #CE93D8 | rgb(206, 147, 216) | |
| Purple 300 | #BA68C8 | rgb(186, 104, 200) | |
| Purple 400 | #AB47BC | rgb(171, 71, 188) | |
| Purple 500 | #9C27B0 | rgb(156, 39, 176) | |
| Purple 600 | #8E24AA | rgb(142, 36, 170) | |
| Purple 700 | #7B1FA2 | rgb(123, 31, 162) | |
| Purple 800 | #6A1B9A | rgb(106, 27, 154) | |
| Purple 900 | #4A148C | rgb(74, 20, 140) | |
| Purple A100 | #EA80FC | rgb(234, 128, 252) | |
| Purple A200 | #E040FB | rgb(224, 64, 251) | |
| Purple A400 | #D500F9 | rgb(213, 0, 249) | |
| Purple A700 | #AA00FF | rgb(170, 0, 255) |
Deep Purple
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Deep Purple 50 | #EDE7F6 | rgb(237, 231, 246) | |
| Deep Purple 100 | #D1C4E9 | rgb(209, 196, 233) | |
| Deep Purple 200 | #B39DDB | rgb(179, 157, 219) | |
| Deep Purple 300 | #9575CD | rgb(149, 117, 205) | |
| Deep Purple 400 | #7E57C2 | rgb(126, 87, 194) | |
| Deep Purple 500 | #673AB7 | rgb(103, 58, 183) | |
| Deep Purple 600 | #5E35B1 | rgb(94, 53, 177) | |
| Deep Purple 700 | #512DA8 | rgb(81, 45, 168) | |
| Deep Purple 800 | #4527A0 | rgb(69, 39, 160) | |
| Deep Purple 900 | #311B92 | rgb(49, 27, 146) | |
| Deep Purple A100 | #B388FF | rgb(179, 136, 255) | |
| Deep Purple A200 | #7C4DFF | rgb(124, 77, 255) | |
| Deep Purple A400 | #651FFF | rgb(101, 31, 255) | |
| Deep Purple A700 | #6200EA | rgb(98, 0, 234) |
Indigo
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Indigo 50 | #E8EAF6 | rgb(232, 234, 246) | |
| Indigo 100 | #C5CAE9 | rgb(197, 202, 233) | |
| Indigo 200 | #9FA8DA | rgb(159, 168, 218) | |
| Indigo 300 | #7986CB | rgb(121, 134, 203) | |
| Indigo 400 | #5C6BC0 | rgb(92, 107, 192) | |
| Indigo 500 | #3F51B5 | rgb(63, 81, 181) | |
| Indigo 600 | #3949AB | rgb(57, 73, 171) | |
| Indigo 700 | #303F9F | rgb(48, 63, 159) | |
| Indigo 800 | #283593 | rgb(40, 53, 147) | |
| Indigo 900 | #1A237E | rgb(26, 35, 126) | |
| Indigo A100 | #8C9EFF | rgb(140, 158, 255) | |
| Indigo A200 | #536DFE | rgb(83, 109, 254) | |
| Indigo A400 | #3D5AFE | rgb(61, 90, 254) | |
| Indigo A700 | #304FFE | rgb(48, 79, 254) |
Blue
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Blue 50 | #E3F2FD | rgb(227, 242, 253) | |
| Blue 100 | #BBDEFB | rgb(187, 222, 251) | |
| Blue 200 | #90CAF9 | rgb(144, 202, 249) | |
| Blue 300 | #64B5F6 | rgb(100, 181, 246) | |
| Blue 400 | #42A5F5 | rgb(66, 165, 245) | |
| Blue 500 | #2196F3 | rgb(33, 150, 243) | |
| Blue 600 | #1E88E5 | rgb(30, 136, 229) | |
| Blue 700 | #1976D2 | rgb(25, 118, 210) | |
| Blue 800 | #1565C0 | rgb(21, 101, 192) | |
| Blue 900 | #0D47A1 | rgb(13, 71, 161) | |
| Blue A100 | #82B1FF | rgb(130, 177, 255) | |
| Blue A200 | #448AFF | rgb(68, 138, 255) | |
| Blue A400 | #2979FF | rgb(41, 121, 255) | |
| Blue A700 | #2962FF | rgb(41, 98, 255) |
Light Blue
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Light Blue 50 | #E1F5FE | rgb(225, 245, 254) | |
| Light Blue 100 | #B3E5FC | rgb(179, 229, 252) | |
| Light Blue 200 | #81D4FA | rgb(129, 212, 250) | |
| Light Blue 300 | #4FC3F7 | rgb(79, 195, 247) | |
| Light Blue 400 | #29B6F6 | rgb(41, 182, 246) | |
| Light Blue 500 | #03A9F4 | rgb(3, 169, 244) | |
| Light Blue 600 | #039BE5 | rgb(3, 155, 229) | |
| Light Blue 700 | #0288D1 | rgb(2, 136, 209) | |
| Light Blue 800 | #0277BD | rgb(2, 119, 189) | |
| Light Blue 900 | #01579B | rgb(1, 87, 155) | |
| Light Blue A100 | #80D8FF | rgb(128, 216, 255) | |
| Light Blue A200 | #40C4FF | rgb(64, 196, 255) | |
| Light Blue A400 | #00B0FF | rgb(0, 176, 255) | |
| Light Blue A700 | #0091EA | rgb(0, 145, 234) |
Cyan
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Cyan 50 | #E0F7FA | rgb(224, 247, 250) | |
| Cyan 100 | #B2EBF2 | rgb(178, 235, 242) | |
| Cyan 200 | #80DEEA | rgb(128, 222, 234) | |
| Cyan 300 | #4DD0E1 | rgb(77, 208, 225) | |
| Cyan 400 | #26C6DA | rgb(38, 198, 218) | |
| Cyan 500 | #00BCD4 | rgb(0, 188, 212) | |
| Cyan 600 | #00ACC1 | rgb(0, 172, 193) | |
| Cyan 700 | #0097A7 | rgb(0, 151, 167) | |
| Cyan 800 | #00838F | rgb(0, 131, 143) | |
| Cyan 900 | #006064 | rgb(0, 96, 100) | |
| Cyan A100 | #84FFFF | rgb(132, 255, 255) | |
| Cyan A200 | #18FFFF | rgb(24, 255, 255) | |
| Cyan A400 | #00E5FF | rgb(0, 229, 255) | |
| Cyan A700 | #00B8D4 | rgb(0, 184, 212) |
Teal
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Teal 50 | #E0F2F1 | rgb(224, 242, 241) | |
| Teal 100 | #B2DFDB | rgb(178, 223, 219) | |
| Teal 200 | #80CBC4 | rgb(128, 203, 196) | |
| Teal 300 | #4DB6AC | rgb(77, 182, 172) | |
| Teal 400 | #26A69A | rgb(38, 166, 154) | |
| Teal 500 | #009688 | rgb(0, 150, 136) | |
| Teal 600 | #00897B | rgb(0, 137, 123) | |
| Teal 700 | #00796B | rgb(0, 121, 107) | |
| Teal 800 | #00695C | rgb(0, 105, 92) | |
| Teal 900 | #004D40 | rgb(0, 77, 64) | |
| Teal A100 | #A7FFEB | rgb(167, 255, 235) | |
| Teal A200 | #64FFDA | rgb(100, 255, 218) | |
| Teal A400 | #1DE9B6 | rgb(29, 233, 182) | |
| Teal A700 | #00BFA5 | rgb(0, 191, 165) |
Green
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Green 50 | #E8F5E9 | rgb(232, 245, 233) | |
| Green 100 | #C8E6C9 | rgb(200, 230, 201) | |
| Green 200 | #A5D6A7 | rgb(165, 214, 167) | |
| Green 300 | #81C784 | rgb(129, 199, 132) | |
| Green 400 | #66BB6A | rgb(102, 187, 106) | |
| Green 500 | #4CAF50 | rgb(76, 175, 80) | |
| Green 600 | #43A047 | rgb(67, 160, 71) | |
| Green 700 | #388E3C | rgb(56, 142, 60) | |
| Green 800 | #2E7D32 | rgb(46, 125, 50) | |
| Green 900 | #1B5E20 | rgb(27, 94, 32) | |
| Green A100 | #B9F6CA | rgb(185, 246, 202) | |
| Green A200 | #69F0AE | rgb(105, 240, 174) | |
| Green A400 | #00E676 | rgb(0, 230, 118) | |
| Green A700 | #00C853 | rgb(0, 200, 83) |
Light Green
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Light Green 50 | #F1F8E9 | rgb(241, 248, 233) | |
| Light Green 100 | #DCEDC8 | rgb(220, 237, 200) | |
| Light Green 200 | #C5E1A5 | rgb(197, 225, 165) | |
| Light Green 300 | #AED581 | rgb(174, 213, 129) | |
| Light Green 400 | #9CCC65 | rgb(156, 204, 101) | |
| Light Green 500 | #8BC34A | rgb(139, 195, 74) | |
| Light Green 600 | #7CB342 | rgb(124, 179, 66) | |
| Light Green 700 | #689F38 | rgb(104, 159, 56) | |
| Light Green 800 | #558B2F | rgb(85, 139, 47) | |
| Light Green 900 | #33691E | rgb(51, 105, 30) | |
| Light Green A100 | #CCFF90 | rgb(204, 255, 144) | |
| Light Green A200 | #B2FF59 | rgb(178, 255, 89) | |
| Light Green A400 | #76FF03 | rgb(118, 255, 3) | |
| Light Green A700 | #64DD17 | rgb(100, 221, 23) |
Lime
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Lime 50 | #F9FBE7 | rgb(249, 251, 231) | |
| Lime 100 | #F0F4C3 | rgb(240, 244, 195) | |
| Lime 200 | #E6EE9C | rgb(230, 238, 156) | |
| Lime 300 | #DCE775 | rgb(220, 231, 117) | |
| Lime 400 | #D4E157 | rgb(212, 225, 87) | |
| Lime 500 | #CDDC39 | rgb(205, 220, 57) | |
| Lime 600 | #C0CA33 | rgb(192, 202, 51) | |
| Lime 700 | #AFB42B | rgb(175, 180, 43) | |
| Lime 800 | #9E9D24 | rgb(158, 157, 36) | |
| Lime 900 | #827717 | rgb(130, 119, 23) | |
| Lime A100 | #F4FF81 | rgb(244, 255, 129) | |
| Lime A200 | #EEFF41 | rgb(238, 255, 65) | |
| Lime A400 | #C6FF00 | rgb(198, 255, 0) | |
| Lime A700 | #AEEA00 | rgb(174, 234, 0) |
Yellow
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Yellow 50 | #FFFDE7 | rgb(255, 253, 231) | |
| Yellow 100 | #FFF9C4 | rgb(255, 249, 196) | |
| Yellow 200 | #FFF59D | rgb(255, 245, 157) | |
| Yellow 300 | #FFF176 | rgb(255, 241, 118) | |
| Yellow 400 | #FFEE58 | rgb(255, 238, 88) | |
| Yellow 500 | #FFEB3B | rgb(255, 235, 59) | |
| Yellow 600 | #FDD835 | rgb(253, 216, 53) | |
| Yellow 700 | #FBC02D | rgb(251, 192, 45) | |
| Yellow 800 | #F9A825 | rgb(249, 168, 37) | |
| Yellow 900 | #F57F17 | rgb(245, 127, 23) | |
| Yellow A100 | #FFFF8D | rgb(255, 255, 141) | |
| Yellow A200 | #FFFF00 | rgb(255, 255, 0) | |
| Yellow A400 | #FFEA00 | rgb(255, 234, 0) | |
| Yellow A700 | #FFD600 | rgb(255, 214, 0) |
Amber
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Amber 50 | #FFF8E1 | rgb(255, 248, 225) | |
| Amber 100 | #FFECB3 | rgb(255, 236, 179) | |
| Amber 200 | #FFE082 | rgb(255, 224, 130) | |
| Amber 300 | #FFD54F | rgb(255, 213, 79) | |
| Amber 400 | #FFCA28 | rgb(255, 202, 40) | |
| Amber 500 | #FFC107 | rgb(255, 193, 7) | |
| Amber 600 | #FFB300 | rgb(255, 179, 0) | |
| Amber 700 | #FFA000 | rgb(255, 160, 0) | |
| Amber 800 | #FF8F00 | rgb(255, 143, 0) | |
| Amber 900 | #FF6F00 | rgb(255, 111, 0) | |
| Amber A100 | #FFE57F | rgb(255, 229, 127) | |
| Amber A200 | #FFD740 | rgb(255, 215, 64) | |
| Amber A400 | #FFC400 | rgb(255, 196, 0) | |
| Amber A700 | #FFAB00 | rgb(255, 171, 0) |
Orange
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Orange 50 | #FFF3E0 | rgb(255, 243, 224) | |
| Orange 100 | #FFE0B2 | rgb(255, 224, 178) | |
| Orange 200 | #FFCC80 | rgb(255, 204, 128) | |
| Orange 300 | #FFB74D | rgb(255, 183, 77) | |
| Orange 400 | #FFA726 | rgb(255, 167, 38) | |
| Orange 500 | #FF9800 | rgb(255, 152, 0) | |
| Orange 600 | #FB8C00 | rgb(251, 140, 0) | |
| Orange 700 | #F57C00 | rgb(245, 124, 0) | |
| Orange 800 | #EF6C00 | rgb(239, 108, 0) | |
| Orange 900 | #E65100 | rgb(230, 81, 0) | |
| Orange A100 | #FFD180 | rgb(255, 209, 128) | |
| Orange A200 | #FFAB40 | rgb(255, 171, 64) | |
| Orange A400 | #FF9100 | rgb(255, 145, 0) | |
| Orange A700 | #FF6D00 | rgb(255, 109, 0) |
Deep Orange
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Deep Orange 50 | #FBE9E7 | rgb(251, 233, 231) | |
| Deep Orange 100 | #FFCCBC | rgb(255, 204, 188) | |
| Deep Orange 200 | #FFAB91 | rgb(255, 171, 145) | |
| Deep Orange 300 | #FF8A65 | rgb(255, 138, 101) | |
| Deep Orange 400 | #FF7043 | rgb(255, 112, 67) | |
| Deep Orange 500 | #FF5722 | rgb(255, 87, 34) | |
| Deep Orange 600 | #F4511E | rgb(244, 81, 30) | |
| Deep Orange 700 | #E64A19 | rgb(230, 74, 25) | |
| Deep Orange 800 | #D84315 | rgb(216, 67, 21) | |
| Deep Orange 900 | #BF360C | rgb(191, 54, 12) | |
| Deep Orange A100 | #FF9E80 | rgb(255, 158, 128) | |
| Deep Orange A200 | #FF6E40 | rgb(255, 110, 64) | |
| Deep Orange A400 | #FF3D00 | rgb(255, 61, 0) | |
| Deep Orange A700 | #DD2C00 | rgb(221, 44, 0) |
Brown
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Brown 50 | #EFEBE9 | rgb(239, 235, 233) | |
| Brown 100 | #D7CCC8 | rgb(215, 204, 200) | |
| Brown 200 | #BCAAA4 | rgb(188, 170, 164) | |
| Brown 300 | #A1887F | rgb(161, 136, 127) | |
| Brown 400 | #8D6E63 | rgb(141, 110, 99) | |
| Brown 500 | #795548 | rgb(121, 85, 72) | |
| Brown 600 | #6D4C41 | rgb(109, 76, 65) | |
| Brown 700 | #5D4037 | rgb(93, 64, 55) | |
| Brown 800 | #4E342E | rgb(78, 52, 46) | |
| Brown 900 | #3E2723 | rgb(62, 39, 35) |
Grey
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Grey 50 | #FAFAFA | rgb(250, 250, 250) | |
| Grey 100 | #F5F5F5 | rgb(245, 245, 245) | |
| Grey 200 | #EEEEEE | rgb(238, 238, 238) | |
| Grey 300 | #E0E0E0 | rgb(224, 224, 224) | |
| Grey 400 | #BDBDBD | rgb(189, 189, 189) | |
| Grey 500 | #9E9E9E | rgb(158, 158, 158) | |
| Grey 600 | #757575 | rgb(117, 117, 117) | |
| Grey 700 | #616161 | rgb(97, 97, 97) | |
| Grey 800 | #424242 | rgb(66, 66, 66) | |
| Grey 900 | #212121 | rgb(33, 33, 33) |
Blue Grey
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| Blue Grey 50 | #ECEFF1 | rgb(236, 239, 241) | |
| Blue Grey 100 | #CFD8DC | rgb(207, 216, 220) | |
| Blue Grey 200 | #B0BEC5 | rgb(176, 190, 197) | |
| Blue Grey 300 | #90A4AE | rgb(144, 164, 174) | |
| Blue Grey 400 | #78909C | rgb(120, 144, 156) | |
| Blue Grey 500 | #607D8B | rgb(96, 125, 139) | |
| Blue Grey 600 | #546E7A | rgb(84, 110, 122) | |
| Blue Grey 700 | #455A64 | rgb(69, 90, 100) | |
| Blue Grey 800 | #37474F | rgb(55, 71, 79) | |
| Blue Grey 900 | #263238 | rgb(38, 50, 56) |
Special
| Color | Name | Hex Code | RGB Code |
|---|---|---|---|
| White | #FFFFFF | rgb(255, 255, 255) | |
| Black | #000000 | rgb(0, 0, 0) |