Skip to content

Instantly share code, notes, and snippets.

@brucebentley

brucebentley/_material-colors.scss

Created April 8, 2016 14:16
Show Gist options
  • Save brucebentley/3184692b1c48770e41d7e46e3b538a4a to your computer and use it in GitHub Desktop.
Save brucebentley/3184692b1c48770e41d7e46e3b538a4a to your computer and use it in GitHub Desktop.
Download ZIP
Google Material Design Color Palette in Sass.
Raw
_material-colors.scss
///
/// - - - - - - - - - - - - - - - - - - - - - - - - -
/// 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