Skip to content

Instantly share code, notes, and snippets.

@z-------------
Last active August 10, 2019 15:53
Show Gist options
  • Save z-------------/295f47dbd9b50eff4fd1 to your computer and use it in GitHub Desktop.
Save z-------------/295f47dbd9b50eff4fd1 to your computer and use it in GitHub Desktop.
A big ol' list of Sass/SCSS variables containing every color in the Material Design color spec (https://www.google.com/design/spec/style/color.html). No, I did not hand copy these.
$black: #000000;
$white: #FFFFFF;
$red50: #FFEBEE;
$red100: #FFCDD2;
$red200: #EF9A9A;
$red300: #E57373;
$red400: #EF5350;
$red500: #F44336;
$red600: #E53935;
$red700: #D32F2F;
$red800: #C62828;
$red900: #B71C1C;
$redA100: #FF8A80;
$redA200: #FF5252;
$redA400: #FF1744;
$redA700: #D50000;
$pink50: #FCE4EC;
$pink100: #F8BBD0;
$pink200: #F48FB1;
$pink300: #F06292;
$pink400: #EC407A;
$pink500: #E91E63;
$pink600: #D81B60;
$pink700: #C2185B;
$pink800: #AD1457;
$pink900: #880E4F;
$pinkA100: #FF80AB;
$pinkA200: #FF4081;
$pinkA400: #F50057;
$pinkA700: #C51162;
$purple50: #F3E5F5;
$purple100: #E1BEE7;
$purple200: #CE93D8;
$purple300: #BA68C8;
$purple400: #AB47BC;
$purple500: #9C27B0;
$purple600: #8E24AA;
$purple700: #7B1FA2;
$purple800: #6A1B9A;
$purple900: #4A148C;
$purpleA100: #EA80FC;
$purpleA200: #E040FB;
$purpleA400: #D500F9;
$purpleA700: #AA00FF;
$deeppurple50: #EDE7F6;
$deeppurple100: #D1C4E9;
$deeppurple200: #B39DDB;
$deeppurple300: #9575CD;
$deeppurple400: #7E57C2;
$deeppurple500: #673AB7;
$deeppurple600: #5E35B1;
$deeppurple700: #512DA8;
$deeppurple800: #4527A0;
$deeppurple900: #311B92;
$deeppurpleA100: #B388FF;
$deeppurpleA200: #7C4DFF;
$deeppurpleA400: #651FFF;
$deeppurpleA700: #6200EA;
$indigo50: #E8EAF6;
$indigo100: #C5CAE9;
$indigo200: #9FA8DA;
$indigo300: #7986CB;
$indigo400: #5C6BC0;
$indigo500: #3F51B5;
$indigo600: #3949AB;
$indigo700: #303F9F;
$indigo800: #283593;
$indigo900: #1A237E;
$indigoA100: #8C9EFF;
$indigoA200: #536DFE;
$indigoA400: #3D5AFE;
$indigoA700: #304FFE;
$blue50: #E3F2FD;
$blue100: #BBDEFB;
$blue200: #90CAF9;
$blue300: #64B5F6;
$blue400: #42A5F5;
$blue500: #2196F3;
$blue600: #1E88E5;
$blue700: #1976D2;
$blue800: #1565C0;
$blue900: #0D47A1;
$blueA100: #82B1FF;
$blueA200: #448AFF;
$blueA400: #2979FF;
$blueA700: #2962FF;
$lightblue50: #E1F5FE;
$lightblue100: #B3E5FC;
$lightblue200: #81D4FA;
$lightblue300: #4FC3F7;
$lightblue400: #29B6F6;
$lightblue500: #03A9F4;
$lightblue600: #039BE5;
$lightblue700: #0288D1;
$lightblue800: #0277BD;
$lightblue900: #01579B;
$lightblueA100: #80D8FF;
$lightblueA200: #40C4FF;
$lightblueA400: #00B0FF;
$lightblueA700: #0091EA;
$cyan50: #E0F7FA;
$cyan100: #B2EBF2;
$cyan200: #80DEEA;
$cyan300: #4DD0E1;
$cyan400: #26C6DA;
$cyan500: #00BCD4;
$cyan600: #00ACC1;
$cyan700: #0097A7;
$cyan800: #00838F;
$cyan900: #006064;
$cyanA100: #84FFFF;
$cyanA200: #18FFFF;
$cyanA400: #00E5FF;
$cyanA700: #00B8D4;
$teal50: #E0F2F1;
$teal100: #B2DFDB;
$teal200: #80CBC4;
$teal300: #4DB6AC;
$teal400: #26A69A;
$teal500: #009688;
$teal600: #00897B;
$teal700: #00796B;
$teal800: #00695C;
$teal900: #004D40;
$tealA100: #A7FFEB;
$tealA200: #64FFDA;
$tealA400: #1DE9B6;
$tealA700: #00BFA5;
$green50: #E8F5E9;
$green100: #C8E6C9;
$green200: #A5D6A7;
$green300: #81C784;
$green400: #66BB6A;
$green500: #4CAF50;
$green600: #43A047;
$green700: #388E3C;
$green800: #2E7D32;
$green900: #1B5E20;
$greenA100: #B9F6CA;
$greenA200: #69F0AE;
$greenA400: #00E676;
$greenA700: #00C853;
$lightgreen50: #F1F8E9;
$lightgreen100: #DCEDC8;
$lightgreen200: #C5E1A5;
$lightgreen300: #AED581;
$lightgreen400: #9CCC65;
$lightgreen500: #8BC34A;
$lightgreen600: #7CB342;
$lightgreen700: #689F38;
$lightgreen800: #558B2F;
$lightgreen900: #33691E;
$lightgreenA100: #CCFF90;
$lightgreenA200: #B2FF59;
$lightgreenA400: #76FF03;
$lightgreenA700: #64DD17;
$lime50: #F9FBE7;
$lime100: #F0F4C3;
$lime200: #E6EE9C;
$lime300: #DCE775;
$lime400: #D4E157;
$lime500: #CDDC39;
$lime600: #C0CA33;
$lime700: #AFB42B;
$lime800: #9E9D24;
$lime900: #827717;
$limeA100: #F4FF81;
$limeA200: #EEFF41;
$limeA400: #C6FF00;
$limeA700: #AEEA00;
$yellow50: #FFFDE7;
$yellow100: #FFF9C4;
$yellow200: #FFF59D;
$yellow300: #FFF176;
$yellow400: #FFEE58;
$yellow500: #FFEB3B;
$yellow600: #FDD835;
$yellow700: #FBC02D;
$yellow800: #F9A825;
$yellow900: #F57F17;
$yellowA100: #FFFF8D;
$yellowA200: #FFFF00;
$yellowA400: #FFEA00;
$yellowA700: #FFD600;
$amber50: #FFF8E1;
$amber100: #FFECB3;
$amber200: #FFE082;
$amber300: #FFD54F;
$amber400: #FFCA28;
$amber500: #FFC107;
$amber600: #FFB300;
$amber700: #FFA000;
$amber800: #FF8F00;
$amber900: #FF6F00;
$amberA100: #FFE57F;
$amberA200: #FFD740;
$amberA400: #FFC400;
$amberA700: #FFAB00;
$orange50: #FFF3E0;
$orange100: #FFE0B2;
$orange200: #FFCC80;
$orange300: #FFB74D;
$orange400: #FFA726;
$orange500: #FF9800;
$orange600: #FB8C00;
$orange700: #F57C00;
$orange800: #EF6C00;
$orange900: #E65100;
$orangeA100: #FFD180;
$orangeA200: #FFAB40;
$orangeA400: #FF9100;
$orangeA700: #FF6D00;
$deeporange50: #FBE9E7;
$deeporange100: #FFCCBC;
$deeporange200: #FFAB91;
$deeporange300: #FF8A65;
$deeporange400: #FF7043;
$deeporange500: #FF5722;
$deeporange600: #F4511E;
$deeporange700: #E64A19;
$deeporange800: #D84315;
$deeporange900: #BF360C;
$deeporangeA100: #FF9E80;
$deeporangeA200: #FF6E40;
$deeporangeA400: #FF3D00;
$deeporangeA700: #DD2C00;
$brown50: #EFEBE9;
$brown100: #D7CCC8;
$brown200: #BCAAA4;
$brown300: #A1887F;
$brown400: #8D6E63;
$brown500: #795548;
$brown600: #6D4C41;
$brown700: #5D4037;
$brown800: #4E342E;
$brown900: #3E2723;
$grey50: #FAFAFA;
$grey100: #F5F5F5;
$grey200: #EEEEEE;
$grey300: #E0E0E0;
$grey400: #BDBDBD;
$grey500: #9E9E9E;
$grey600: #757575;
$grey700: #616161;
$grey800: #424242;
$grey900: #212121;
$bluegrey50: #ECEFF1;
$bluegrey100: #CFD8DC;
$bluegrey200: #B0BEC5;
$bluegrey300: #90A4AE;
$bluegrey400: #78909C;
$bluegrey500: #607D8B;
$bluegrey600: #546E7A;
$bluegrey700: #455A64;
$bluegrey800: #37474F;
$bluegrey900: #263238;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment