Skip to content

Instantly share code, notes, and snippets.

@kossoff
Last active November 30, 2015 05:46
Show Gist options
  • Save kossoff/ee4ab08a2c0b4582fbc9 to your computer and use it in GitHub Desktop.
Save kossoff/ee4ab08a2c0b4582fbc9 to your computer and use it in GitHub Desktop.
Material Design color variables for SCSS
// Material Design Colors for SCSS
// https://www.google.com/design/spec/style/color.html#color-color-palette
// Main colors
$red: #F44336;
$pink: #E91E63;
$purple: #9C27B0;
$deep-purple: #673AB7;
$indigo: #3F51B5;
$blue: #2196F3;
$light-blue: #03A9F4;
$cyan: #00BCD4;
$teal: #009688;
$green: #4CAF50;
$light-green: #8BC34A;
$lime: #CDDC39;
$yellow: #FFEB3B;
$amber: #FFC107;
$orange: #FF9800;
$deep-orange: #FF5722;
$brown: #795548;
$grey: #9E9E9E;
$blue-grey: #607D8B;
$black: #000000;
$white: #ffffff;
// Color tones
// Red
$red-50: #FFEBEE;
$red-100: #FFCDD2;
$red-200: #EF9A9A;
$red-300: #E57373;
$red-400: #EF5350;
$red-500: $red;
$red-600: #F44336;
$red-700: #E53935;
$red-800: #D32F2F;
$red-900: #C62828;
$red-a100: #FF8A80;
$red-a200: #FF5252;
$red-a400: #FF1744;
$red-a700: #D50000;
// Pink
$pink-50: #FCE4EC;
$pink-100: #F8BBD0;
$pink-200: #F48FB1;
$pink-300: #F06292;
$pink-400: #EC407A;
$pink-500: $pink;
$pink-600: #D81B60;
$pink-700: #C2185B;
$pink-800: #AD1457;
$pink-900: #880E4F;
$pink-a100: #FF80AB;
$pink-a200: #FF4081;
$pink-a400: #F50057;
$pink-a700: #C51162;
// Purple
$purple-50: #F3E5F5;
$purple-100: #E1BEE7;
$purple-200: #CE93D8;
$purple-300: #BA68C8;
$purple-400: #AB47BC;
$purple-500: $purple;
$purple-600: #8E24AA;
$purple-700: #7B1FA2;
$purple-800: #6A1B9A;
$purple-900: #4A148C;
$purple-a100: #EA80FC;
$purple-a200: #E040FB;
$purple-a400: #D500F9;
$purple-a700: #AA00FF;
// Deep Purple (smoke on the water, fire in the sky)
$deep-purple-50: #EDE7F6;
$deep-purple-100: #D1C4E9;
$deep-purple-200: #B39DDB;
$deep-purple-300: #9575CD;
$deep-purple-400: #7E57C2;
$deep-purple-500: $deep-purple;
$deep-purple-600: #5E35B1;
$deep-purple-700: #512DA8;
$deep-purple-800: #4527A0;
$deep-purple-900: #311B92;
$deep-purple-a100: #B388FF;
$deep-purple-a200: #7C4DFF;
$deep-purple-a400: #651FFF;
$deep-purple-a700: #6200EA;
// Indigo
$indigo-50: #E8EAF6;
$indigo-100: #C5CAE9;
$indigo-200: #9FA8DA;
$indigo-300: #7986CB;
$indigo-400: #5C6BC0;
$indigo-500: $indigo;
$indigo-600: #3949AB;
$indigo-700: #303F9F;
$indigo-800: #283593;
$indigo-900: #1A237E;
$indigo-a100: #8C9EFF;
$indigo-a200: #536DFE;
$indigo-a400: #3D5AFE;
$indigo-a700: #304FFE;
// Blue
$blue-50: #E3F2FD;
$blue-100: #BBDEFB;
$blue-200: #90CAF9;
$blue-300: #64B5F6;
$blue-400: #42A5F5;
$blue-500: $blue;
$blue-600: #1E88E5;
$blue-700: #1976D2;
$blue-800: #1565C0;
$blue-900: #0D47A1;
$blue-a100: #82B1FF;
$blue-a200: #448AFF;
$blue-a400: #2979FF;
$blue-a700: #2962FF;
// Light Blue
$light-blue-50: #E1F5FE;
$light-blue-100: #B3E5FC;
$light-blue-200: #81D4FA;
$light-blue-300: #4FC3F7;
$light-blue-400: #29B6F6;
$light-blue-500: $light-blue;
$light-blue-600: #039BE5;
$light-blue-700: #0288D1;
$light-blue-800: #0277BD;
$light-blue-900: #01579B;
$light-blue-a100: #80D8FF;
$light-blue-a200: #40C4FF;
$light-blue-a400: #00B0FF;
$light-blue-a700: #0091EA;
// Cyan
$cyan-50: #E0F7FA;
$cyan-100: #B2EBF2;
$cyan-200: #80DEEA;
$cyan-300: #4DD0E1;
$cyan-400: #26C6DA;
$cyan-500: $cyan;
$cyan-600: #00ACC1;
$cyan-700: #0097A7;
$cyan-800: #00838F;
$cyan-900: #006064;
$cyan-a100: #84FFFF;
$cyan-a200: #18FFFF;
$cyan-a400: #00E5FF;
$cyan-a700: #00B8D4;
// Teal
$teal-50: #E0F2F1;
$teal-100: #B2DFDB;
$teal-200: #80CBC4;
$teal-300: #4DB6AC;
$teal-400: #26A69A;
$teal-500: $teal;
$teal-600: #00897B;
$teal-700: #00796B;
$teal-800: #00695C;
$teal-900: #004D40;
$teal-a100: #A7FFEB;
$teal-a200: #64FFDA;
$teal-a400: #1DE9B6;
$teal-a700: #00BFA5;
// Green
$green-50: #E8F5E9;
$green-100: #C8E6C9;
$green-200: #A5D6A7;
$green-300: #81C784;
$green-400: #66BB6A;
$green-500: $green;
$green-600: #43A047;
$green-700: #388E3C;
$green-800: #2E7D32;
$green-900: #1B5E20;
$green-a100: #B9F6CA;
$green-a200: #69F0AE;
$green-a400: #00E676;
$green-a700: #00C853;
// Light Green
$light-green-50: #F1F8E9;
$light-green-100: #DCEDC8;
$light-green-200: #C5E1A5;
$light-green-300: #AED581;
$light-green-400: #9CCC65;
$light-green-500: $light-green;
$light-green-600: #7CB342;
$light-green-700: #689F38;
$light-green-800: #558B2F;
$light-green-900: #33691E;
$light-green-a100: #CCFF90;
$light-green-a200: #B2FF59;
$light-green-a400: #76FF03;
$light-green-a700: #64DD17;
// Lime
$lime-50: #F9FBE7;
$lime-100: #F0F4C3;
$lime-200: #E6EE9C;
$lime-300: #DCE775;
$lime-400: #D4E157;
$lime-500: $lime;
$lime-600: #C0CA33;
$lime-700: #AFB42B;
$lime-800: #9E9D24;
$lime-900: #827717;
$lime-a100: #F4FF81;
$lime-a200: #EEFF41;
$lime-a400: #C6FF00;
$lime-a700: #AEEA00;
// Yellow
$yellow-50: #FFFDE7;
$yellow-100: #FFF9C4;
$yellow-200: #FFF59D;
$yellow-300: #FFF176;
$yellow-400: #FFEE58;
$yellow-500: $yellow;
$yellow-600: #FDD835;
$yellow-700: #FBC02D;
$yellow-800: #F9A825;
$yellow-900: #F57F17;
$yellow-a100: #FFFF8D;
$yellow-a200: #FFFF00;
$yellow-a400: #FFEA00;
$yellow-a700: #FFD600;
// Amber
$amber-50: #FFF8E1;
$amber-100: #FFECB3;
$amber-200: #FFE082;
$amber-300: #FFD54F;
$amber-400: #FFCA28;
$amber-500: $amber;
$amber-600: #FFB300;
$amber-700: #FFA000;
$amber-800: #FF8F00;
$amber-900: #FF6F00;
$amber-a100: #FFE57F;
$amber-a200: #FFD740;
$amber-a400: #FFC400;
$amber-a700: #FFAB00;
// Orange
$orange-50: #FFF3E0;
$orange-100: #FFE0B2;
$orange-200: #FFCC80;
$orange-300: #FFB74D;
$orange-400: #FFA726;
$orange-500: $orange;
$orange-600: #FB8C00;
$orange-700: #F57C00;
$orange-800: #EF6C00;
$orange-900: #E65100;
$orange-a100: #FFD180;
$orange-a200: #FFAB40;
$orange-a400: #FF9100;
$orange-a700: #FF6D00;
// Deep Orange
$deep-orange-50: #FBE9E7;
$deep-orange-100: #FFCCBC;
$deep-orange-200: #FFAB91;
$deep-orange-300: #FF8A65;
$deep-orange-400: #FF7043;
$deep-orange-500: $deep-orange;
$deep-orange-600: #F4511E;
$deep-orange-700: #E64A19;
$deep-orange-800: #D84315;
$deep-orange-900: #BF360C;
$deep-orange-a100: #FF9E80;
$deep-orange-a200: #FF6E40;
$deep-orange-a300: #FF3D00;
$deep-orange-a700: #DD2C00;
// Brown
$brown-50: #EFEBE9;
$brown-100: #D7CCC8;
$brown-200: #BCAAA4;
$brown-300: #A1887F;
$brown-400: #8D6E63;
$brown-500: $brown;
$brown-600: #6D4C41;
$brown-700: #5D4037;
$brown-800: #4E342E;
$brown-900: #3E2723;
// Grey
$grey-50: #FAFAFA;
$grey-100: #F5F5F5;
$grey-200: #EEEEEE;
$grey-300: #E0E0E0;
$grey-400: #BDBDBD;
$grey-500: $grey;
$grey-600: #757575;
$grey-700: #616161;
$grey-800: #424242;
$grey-900: #212121;
// Blue Grey
$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-200: #B0BEC5;
$blue-grey-300: #90A4AE;
$blue-grey-400: #78909C;
$blue-grey-500: $blue-grey;
$blue-grey-600: #546E7A;
$blue-grey-700: #455A64;
$blue-grey-800: #37474F;
$blue-grey-900: #263238;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment