Created
April 8, 2016 14:16
-
-
Save brucebentley/3184692b1c48770e41d7e46e3b538a4a to your computer and use it in GitHub Desktop.
Google Material Design Color Palette in Sass.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| /// MATERIAL DESIGN COLOR PALETTE | |
| /// @AUTHOR: GOOGLE | |
| /// @SOURCE: http://www.google.com/design/spec/style/color.html#color-ui-color-palette | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| /// | |
| /// | |
| /// RED | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $red-50: rgba(253, 224, 220, 1.0); // #fde0dc | |
| $red-100: rgba(249, 189, 187, 1.0); // #f9bdbb | |
| $red-200: rgba(246, 153, 136, 1.0); // #f69988 | |
| $red-300: rgba(243, 108, 96, 1.0); // #f36c60 | |
| $red-400: rgba(232, 78, 64, 1.0); // #e84e40 | |
| $red-500: rgba(229, 28, 35, 1.0); // #e51c23 | |
| $red-600: rgba(221, 25, 29, 1.0); // #dd191d | |
| $red-700: rgba(208, 23, 22, 1.0); // #d01716 | |
| $red-800: rgba(196, 20, 17, 1.0); // #c41411 | |
| $red-900: rgba(176, 18, 10, 1.0); // #b0120a | |
| $red-a100: rgba(255, 121, 151, 1.0); // #ff7997 | |
| $red-a200: rgba(255, 81, 119, 1.0); // #ff5177 | |
| $red-a400: rgba(255, 45, 111, 1.0); // #ff2d6f | |
| $red-a700: rgba(224, 0, 50, 1.0); // #e00032 | |
| /// | |
| /// PINK | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $pink-50: rgba(252, 228, 236, 1.0); // #fce4ec | |
| $pink-100: rgba(248, 187, 208, 1.0); // #f8bbd0 | |
| $pink-200: rgba(244, 143, 177, 1.0); // #f48fb1 | |
| $pink-300: rgba(240, 98, 146, 1.0); // #f06292 | |
| $pink-400: rgba(236, 64, 122, 1.0); // #ec407a | |
| $pink-500: rgba(233, 30, 99, 1.0); // #e91e63 | |
| $pink-600: rgba(216, 27, 96, 1.0); // #d81b60 | |
| $pink-700: rgba(194, 24, 91, 1.0); // #c2185b | |
| $pink-800: rgba(173, 20, 87, 1.0); // #ad1457 | |
| $pink-900: rgba(136, 14, 79, 1.0); // #880e4f | |
| $pink-a100: rgba(255, 128, 171, 1.0); // #ff80ab | |
| $pink-a200: rgba(255, 64, 129, 1.0); // #ff4081 | |
| $pink-a400: rgba(245, 0, 87, 1.0); // #f50057 | |
| $pink-a700: rgba(197, 17, 98, 1.0); // #c51162 | |
| /// | |
| /// PURPLE | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $purple-50: rgba(243, 229, 245, 1.0); // #f3e5f5 | |
| $purple-100: rgba(225, 190, 231, 1.0); // #e1bee7 | |
| $purple-200: rgba(206, 147, 216, 1.0); // #ce93d8 | |
| $purple-300: rgba(186, 104, 200, 1.0); // #ba68c8 | |
| $purple-400: rgba(171, 71, 188, 1.0); // #ab47bc | |
| $purple-500: rgba(156, 39, 176, 1.0); // #9c27b0 | |
| $purple-600: rgba(142, 36, 170, 1.0); // #8e24aa | |
| $purple-700: rgba(123, 31, 162, 1.0); // #7b1fa2 | |
| $purple-800: rgba(106, 27, 154, 1.0); // #6a1b9a | |
| $purple-900: rgba(74, 20, 140, 1.0); // #4a148c | |
| $purple-a100: rgba(234, 128, 252, 1.0); // #ea80fc | |
| $purple-a200: rgba(224, 64, 251, 1.0); // #e040fb | |
| $purple-a400: rgba(213, 0, 249, 1.0); // #d500f9 | |
| $purple-a700: rgba(170, 0, 255, 1.0); // #aa00ff | |
| /// | |
| /// DEEP PURPLE | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $deep-purple-50: rgba(237, 231, 246, 1.0); // #ede7f6 | |
| $deep-purple-100: rgba(209, 196, 233, 1.0); // #d1c4e9 | |
| $deep-purple-200: rgba(179, 157, 219, 1.0); // #b39ddb | |
| $deep-purple-300: rgba(149, 117, 205, 1.0); // #9575cd | |
| $deep-purple-400: rgba(126, 87, 194, 1.0); // #7e57c2 | |
| $deep-purple-500: rgba(103, 58, 183, 1.0); // #673ab7 | |
| $deep-purple-600: rgba(94, 53, 177, 1.0); // #5e35b1 | |
| $deep-purple-700: rgba(81, 45, 168, 1.0); // #512da8 | |
| $deep-purple-800: rgba(69, 39, 160, 1.0); // #4527a0 | |
| $deep-purple-900: rgba(49, 27, 146, 1.0); // #311b92 | |
| $deep-purple-a100: rgba(179, 136, 255, 1.0); // #b388ff | |
| $deep-purple-a200: rgba(124, 77, 255, 1.0); // #7c4dff | |
| $deep-purple-a400: rgba(101, 31, 255, 1.0); // #651fff | |
| $deep-purple-a700: rgba(98, 0, 234, 1.0); // #6200ea | |
| /// | |
| /// INDIGO | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $indigo-50: rgba(232, 234, 246, 1.0); // #e8eaf6 | |
| $indigo-100: rgba(197, 202, 233, 1.0); // #c5cae9 | |
| $indigo-200: rgba(159, 168, 218, 1.0); // #9fa8da | |
| $indigo-300: rgba(121, 134, 203, 1.0); // #7986cb | |
| $indigo-400: rgba(92, 107, 192, 1.0); // #5c6bc0 | |
| $indigo-500: rgba(63, 81, 181, 1.0); // #3f51b5 | |
| $indigo-600: rgba(57, 73, 171, 1.0); // #3949ab | |
| $indigo-700: rgba(48, 63, 159, 1.0); // #303f9f | |
| $indigo-800: rgba(40, 53, 147, 1.0); // #283593 | |
| $indigo-900: rgba(26, 35, 126, 1.0); // #1a237e | |
| $indigo-a100: rgba(140, 158, 255, 1.0); // #8c9eff | |
| $indigo-a200: rgba(83, 109, 254, 1.0); // #536dfe | |
| $indigo-a400: rgba(61, 90, 254, 1.0); // #3d5afe | |
| $indigo-a700: rgba(48, 79, 254, 1.0); // #304ffe | |
| /// | |
| /// BLUE | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $blue-50: rgba(231, 233, 253, 1.0); // #e7e9fd | |
| $blue-100: rgba(208, 217, 255, 1.0); // #d0d9ff | |
| $blue-200: rgba(175, 191, 255, 1.0); // #afbfff | |
| $blue-300: rgba(145, 167, 255, 1.0); // #91a7ff | |
| $blue-400: rgba(115, 143, 254, 1.0); // #738ffe | |
| $blue-500: rgba(86, 119, 252, 1.0); // #5677fc | |
| $blue-600: rgba(78, 108, 239, 1.0); // #4e6cef | |
| $blue-700: rgba(69, 94, 222, 1.0); // #455ede | |
| $blue-800: rgba(59, 80, 206, 1.0); // #3b50ce | |
| $blue-900: rgba(42, 54, 177, 1.0); // #2a36b1 | |
| $blue-a100: rgba(166, 186, 255, 1.0); // #a6baff | |
| $blue-a200: rgba(104, 137, 255, 1.0); // #6889ff | |
| $blue-a400: rgba(77, 115, 255, 1.0); // #4d73ff | |
| $blue-a700: rgba(77, 105, 255, 1.0); // #4d69ff | |
| /// | |
| /// LIGHT-BLUE | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $light-blue-50: rgba(225, 245, 254, 1.0); // #e1f5fe | |
| $light-blue-100: rgba(179, 229, 252, 1.0); // #b3e5fc | |
| $light-blue-200: rgba(129, 212, 250, 1.0); // #81d4fa | |
| $light-blue-300: rgba(79, 195, 247, 1.0); // #4fc3f7 | |
| $light-blue-400: rgba(41, 182, 246, 1.0); // #29b6f6 | |
| $light-blue-500: rgba(3, 169, 244, 1.0); // #03a9f4 | |
| $light-blue-600: rgba(3, 155, 229, 1.0); // #039be5 | |
| $light-blue-700: rgba(2, 136, 209, 1.0); // #0288d1 | |
| $light-blue-800: rgba(2, 119, 189, 1.0); // #0277bd | |
| $light-blue-900: rgba(1, 87, 155, 1.0); // #01579b | |
| $light-blue-a100: rgba(128, 216, 255, 1.0); // #80d8ff | |
| $light-blue-a200: rgba(64, 196, 255, 1.0); // #40c4ff | |
| $light-blue-a400: rgba(0, 176, 255, 1.0); // #00b0ff | |
| $light-blue-a700: rgba(0, 145, 234, 1.0); // #0091ea | |
| /// | |
| /// CYAN | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $cyan-50: rgba(224, 247, 250, 1.0); // #e0f7fa | |
| $cyan-100: rgba(178, 235, 242, 1.0); // #b2ebf2 | |
| $cyan-200: rgba(128, 222, 234, 1.0); // #80deea | |
| $cyan-300: rgba(77, 208, 225, 1.0); // #4dd0e1 | |
| $cyan-400: rgba(38, 198, 218, 1.0); // #26c6da | |
| $cyan-500: rgba(0, 188, 212, 1.0); // #00bcd4 | |
| $cyan-600: rgba(0, 172, 193, 1.0); // #00acc1 | |
| $cyan-700: rgba(0, 151, 167, 1.0); // #0097a7 | |
| $cyan-800: rgba(0, 131, 143, 1.0); // #00838f | |
| $cyan-900: rgba(0, 96, 100, 1.0); // #006064 | |
| $cyan-a100: rgba(132, 255, 255, 1.0); // #84ffff | |
| $cyan-a200: rgba(24, 255, 255, 1.0); // #18ffff | |
| $cyan-a400: rgba(0, 229, 255, 1.0); // #00e5ff | |
| $cyan-a700: rgba(0, 184, 212, 1.0); // #00b8d4 | |
| /// | |
| /// TYAN | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $teal-50: rgba(224, 242, 241, 1.0); // #e0f2f1 | |
| $teal-100: rgba(178, 223, 219, 1.0); // #b2dfdb | |
| $teal-200: rgba(128, 203, 196, 1.0); // #80cbc4 | |
| $teal-300: rgba(77, 182, 172, 1.0); // #4db6ac | |
| $teal-400: rgba(38, 166, 154, 1.0); // #26a69a | |
| $teal-500: rgba(0, 150, 136, 1.0); // #009688 | |
| $teal-600: rgba(0, 137, 123, 1.0); // #00897b | |
| $teal-700: rgba(0, 121, 107, 1.0); // #00796b | |
| $teal-800: rgba(0, 105, 92, 1.0); // #00695c | |
| $teal-900: rgba(0, 77, 64, 1.0); // #004d40 | |
| $teal-a100: rgba(167, 255, 235, 1.0); // #a7ffeb | |
| $teal-a200: rgba(100, 255, 218, 1.0); // #64ffda | |
| $teal-a400: rgba(29, 233, 182, 1.0); // #1de9b6 | |
| $teal-a700: rgba(0, 191, 165, 1.0); // #00bfa5 | |
| /// | |
| /// GREEN | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $green-50: rgba(208, 248, 206, 1.0); // #d0f8ce | |
| $green-100: rgba(163, 233, 164, 1.0); // #a3e9a4 | |
| $green-200: rgba(114, 213, 114, 1.0); // #72d572 | |
| $green-300: rgba(66, 189, 65, 1.0); // #42bd41 | |
| $green-400: rgba(43, 175, 43, 1.0); // #2baf2b | |
| $green-500: rgba(37, 155, 36, 1.0); // #259b24 | |
| $green-600: rgba(10, 143, 8, 1.0); // #0a8f08 | |
| $green-700: rgba(10, 126, 7, 1.0); // #0a7e07 | |
| $green-800: rgba(5, 111, 0, 1.0); // #056f00 | |
| $green-900: rgba(13, 83, 2, 1.0); // #0d5302 | |
| $green-a100: rgba(162, 247, 141, 1.0); // #a2f78d | |
| $green-a200: rgba(90, 241, 88, 1.0); // #5af158 | |
| $green-a400: rgba(20, 231, 21, 1.0); // #14e715 | |
| $green-a700: rgba(18, 199, 0, 1.0); // #12c700 | |
| /// | |
| /// LIHGT-GREEN | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $light-green-50: rgba(241, 248, 233, 1.0); // #f1f8e9 | |
| $light-green-100: rgba(220, 237, 200, 1.0); // #dcedc8 | |
| $light-green-200: rgba(197, 225, 165, 1.0); // #c5e1a5 | |
| $light-green-300: rgba(174, 213, 129, 1.0); // #aed581 | |
| $light-green-400: rgba(156, 204, 101, 1.0); // #9ccc65 | |
| $light-green-500: rgba(139, 195, 74, 1.0); // #8bc34a | |
| $light-green-600: rgba(124, 179, 66, 1.0); // #7cb342 | |
| $light-green-700: rgba(104, 159, 56, 1.0); // #689f38 | |
| $light-green-800: rgba(85, 139, 47, 1.0); // #558b2f | |
| $light-green-900: rgba(51, 105, 30, 1.0); // #33691e | |
| $light-green-a100: rgba(204, 255, 144, 1.0); // #ccff90 | |
| $light-green-a200: rgba(178, 255, 89, 1.0); // #b2ff59 | |
| $light-green-a400: rgba(118, 255, 3, 1.0); // #76ff03 | |
| $light-green-a700: rgba(100, 221, 23, 1.0); // #64dd17 | |
| /// | |
| /// LIME | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $lime-50: rgba(249, 251, 231, 1.0); // #f9fbe7 | |
| $lime-100: rgba(240, 244, 195, 1.0); // #f0f4c3 | |
| $lime-200: rgba(230, 238, 156, 1.0); // #e6ee9c | |
| $lime-300: rgba(220, 231, 117, 1.0); // #dce775 | |
| $lime-400: rgba(212, 225, 87, 1.0); // #d4e157 | |
| $lime-500: rgba(205, 220, 57, 1.0); // #cddc39 | |
| $lime-600: rgba(192, 202, 51, 1.0); // #c0ca33 | |
| $lime-700: rgba(175, 180, 43, 1.0); // #afb42b | |
| $lime-800: rgba(158, 157, 36, 1.0); // #9e9d24 | |
| $lime-900: rgba(130, 119, 23, 1.0); // #827717 | |
| $lime-a100: rgba(244, 255, 129, 1.0); // #f4ff81 | |
| $lime-a200: rgba(238, 255, 65, 1.0); // #eeff41 | |
| $lime-a400: rgba(198, 255, 0, 1.0); // #c6ff00 | |
| $lime-a700: rgba(174, 234, 0, 1.0); // #aeea00 | |
| /// | |
| /// YELLOW | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $yellow-50: rgba(255, 253, 231, 1.0); // #fffde7 | |
| $yellow-100: rgba(255, 249, 196, 1.0); // #fff9c4 | |
| $yellow-200: rgba(255, 245, 157, 1.0); // #fff59d | |
| $yellow-300: rgba(255, 241, 118, 1.0); // #fff176 | |
| $yellow-400: rgba(255, 238, 88, 1.0); // #ffee58 | |
| $yellow-500: rgba(255, 235, 59, 1.0); // #ffeb3b | |
| $yellow-600: rgba(253, 216, 53, 1.0); // #fdd835 | |
| $yellow-700: rgba(251, 192, 45, 1.0); // #fbc02d | |
| $yellow-800: rgba(249, 168, 37, 1.0); // #f9a825 | |
| $yellow-900: rgba(245, 127, 23, 1.0); // #f57f17 | |
| $yellow-a100: rgba(255, 255, 141, 1.0); // #ffff8d | |
| $yellow-a200: rgba(255, 255, 0, 1.0); // #ffff00 | |
| $yellow-a400: rgba(255, 234, 0, 1.0); // #ffea00 | |
| $yellow-a700: rgba(255, 214, 0, 1.0); // #ffd600 | |
| /// | |
| /// AMBER | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $amber-50: rgba(255, 248, 225, 1.0); // #fff8e1 | |
| $amber-100: rgba(255, 236, 179, 1.0); // #ffecb3 | |
| $amber-200: rgba(255, 224, 130, 1.0); // #ffe082 | |
| $amber-300: rgba(255, 213, 79, 1.0); // #ffd54f | |
| $amber-400: rgba(255, 202, 40, 1.0); // #ffca28 | |
| $amber-500: rgba(255, 193, 7, 1.0); // #ffc107 | |
| $amber-600: rgba(255, 179, 0, 1.0); // #ffb300 | |
| $amber-700: rgba(255, 160, 0, 1.0); // #ffa000 | |
| $amber-800: rgba(255, 143, 0, 1.0); // #ff8f00 | |
| $amber-900: rgba(255, 111, 0, 1.0); // #ff6f00 | |
| $amber-a100: rgba(255, 229, 127, 1.0); // #ffe57f | |
| $amber-a200: rgba(255, 215, 64, 1.0); // #ffd740 | |
| $amber-a400: rgba(255, 196, 0, 1.0); // #ffc400 | |
| $amber-a700: rgba(255, 171, 0, 1.0); // #ffab00 | |
| /// | |
| /// ORANGE | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $orange-50: rgba(255, 243, 224, 1.0); // #fff3e0 | |
| $orange-100: rgba(255, 224, 178, 1.0); // #ffe0b2 | |
| $orange-200: rgba(255, 204, 128, 1.0); // #ffcc80 | |
| $orange-300: rgba(255, 183, 77, 1.0); // #ffb74d | |
| $orange-400: rgba(255, 167, 38, 1.0); // #ffa726 | |
| $orange-500: rgba(255, 152, 0, 1.0); // #ff9800 | |
| $orange-600: rgba(251, 140, 0, 1.0); // #fb8c00 | |
| $orange-700: rgba(245, 124, 0, 1.0); // #f57c00 | |
| $orange-800: rgba(239, 108, 0, 1.0); // #ef6c00 | |
| $orange-900: rgba(230, 81 , 0, 1.0); // #e65100 | |
| $orange-a100: rgba(255, 209, 128, 1.0); // #ffd180 | |
| $orange-a200: rgba(255, 171, 64, 1.0); // #ffab40 | |
| $orange-a400: rgba(255, 145, 0, 1.0); // #ff9100 | |
| $orange-a700: rgba(255, 109, 0, 1.0); // #ff6d00 | |
| /// | |
| /// DEEP ORANGE | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $deep-orange-50: rgba(251, 233, 231, 1.0); // #fbe9e7 | |
| $deep-orange-100: rgba(255, 204, 188, 1.0); // #ffccbc | |
| $deep-orange-200: rgba(255, 171, 145, 1.0); // #ffab91 | |
| $deep-orange-300: rgba(255, 138, 101, 1.0); // #ff8a65 | |
| $deep-orange-400: rgba(255, 112, 67, 1.0); // #ff7043 | |
| $deep-orange-500: rgba(255, 87, 34, 1.0); // #ff5722 | |
| $deep-orange-600: rgba(244, 81, 30, 1.0); // #f4511e | |
| $deep-orange-700: rgba(230, 74, 25, 1.0); // #e64a19 | |
| $deep-orange-800: rgba(216, 67, 21, 1.0); // #d84315 | |
| $deep-orange-900: rgba(191, 54, 12, 1.0); // #bf360c | |
| $deep-orange-a100: rgba(255, 158, 128, 1.0); // #ff9e80 | |
| $deep-orange-a200: rgba(255, 110, 64, 1.0); // #ff6e40 | |
| $deep-orange-a400: rgba(255, 61, 0, 1.0); // #ff3d00 | |
| $deep-orange-a700: rgba(221, 44, 0, 1.0); // #dd2c00 | |
| /// | |
| /// BROWN | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $brown-50: rgba(239, 235, 233, 1.0); // #efebe9 | |
| $brown-100: rgba(215, 204, 200, 1.0); // #d7ccc8 | |
| $brown-200: rgba(188, 170, 164, 1.0); // #bcaaa4 | |
| $brown-300: rgba(161, 136, 127, 1.0); // #a1887f | |
| $brown-400: rgba(141, 110, 99, 1.0); // #8d6e63 | |
| $brown-500: rgba(121, 85, 72, 1.0); // #795548 | |
| $brown-600: rgba(109, 76, 65, 1.0); // #6d4c41 | |
| $brown-700: rgba(93, 64, 55, 1.0); // #5d4037 | |
| $brown-800: rgba(78, 52, 46, 1.0); // #4e342e | |
| $brown-900: rgba(62, 39, 35, 1.0); // #3e2723 | |
| /// | |
| /// GREY | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $grey-50: rgba(250, 250, 250, 1.0); // #fafafa | |
| $grey-100: rgba(245, 245, 245, 1.0); // #f5f5f5 | |
| $grey-200: rgba(238, 238, 238, 1.0); // #eeeeee | |
| $grey-300: rgba(224, 224, 224, 1.0); // #e0e0e0 | |
| $grey-400: rgba(189, 189, 189, 1.0); // #bdbdbd | |
| $grey-500: rgba(158, 158, 158, 1.0); // #9e9e9e | |
| $grey-600: rgba(117, 117, 117, 1.0); // #757575 | |
| $grey-700: rgba(97, 97, 97, 1.0); // #616161 | |
| $grey-800: rgba(66, 66, 66, 1.0); // #424242 | |
| $grey-900: rgba(33, 33, 33, 1.0); // #212121 | |
| $grey-1000: rgba(255, 255, 255, 1.0); // #ffffff | |
| /// | |
| /// BLUE-GREY | |
| /// - - - - - - - - - - - - - - - - - - - - - - - - - | |
| $blue-grey-50: rgba(236, 239, 241, 1.0); // #eceff1 | |
| $blue-grey-100: rgba(207, 216, 220, 1.0); // #cfd8dc | |
| $blue-grey-200: rgba(176, 190, 197, 1.0); // #b0bec5 | |
| $blue-grey-300: rgba(144, 164, 174, 1.0); // #90a4ae | |
| $blue-grey-400: rgba(120, 144, 156, 1.0); // #78909c | |
| $blue-grey-500: rgba(96, 125, 139, 1.0); // #607d8b | |
| $blue-grey-600: rgba(84, 110, 122, 1.0); // #546e7a | |
| $blue-grey-700: rgba(69, 90, 100, 1.0); // #455a64 | |
| $blue-grey-800: rgba(55, 71, 79, 1.0); // #37474f | |
| $blue-grey-900: rgba(38, 50, 56, 1.0); // #263238 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment