Skip to content

Instantly share code, notes, and snippets.

@Nereare
Created August 16, 2019 18:43
Show Gist options
  • Save Nereare/3f181f42056bff36045c700b387f6465 to your computer and use it in GitHub Desktop.
Save Nereare/3f181f42056bff36045c700b387f6465 to your computer and use it in GitHub Desktop.
// Color List from https://material.io/design/color/
// =================================================
// If a color is followed by HC, it contrasts better
// with a light color.
// Reds
$Red50 : #FFEBEE;
$Red100 : #FFCDD2;
$Red200 : #EF9A9A;
$Red300 : #E57373;
$Red400 : #EF5350; // HC
$Red500 : #F44336; // HC
$Red600 : #E53935; // HC
$Red700 : #D32F2F; // HC
$Red800 : #C62828; // HC
$Red900 : #B71C1C; // HC
$RedA100 : #FF8A80;
$RedA200 : #FF5252; // HC
$RedA400 : #FF1744; // HC
$RedA700 : #D50000; // HC
// Pinks
$Pink50 : #FCE4EC;
$Pink100 : #F8BBD0;
$Pink200 : #F48FB1;
$Pink300 : #F06292;
$Pink400 : #EC407A; // HC
$Pink500 : #E91E63; // HC
$Pink600 : #D81B60; // HC
$Pink700 : #C2185B; // HC
$Pink800 : #AD1457; // HC
$Pink900 : #880E4F; // HC
$PinkA100 : #FF80AB;
$PinkA200 : #FF4081; // HC
$PinkA400 : #F50057; // HC
$PinkA700 : #C51162; // HC
// Purples
$Purple50 : #F3E5F5;
$Purple100 : #E1BEE7;
$Purple200 : #CE93D8;
$Purple300 : #BA68C8; // HC
$Purple400 : #AB47BC; // HC
$Purple500 : #9C27B0; // HC
$Purple600 : #8E24AA; // HC
$Purple700 : #7B1FA2; // HC
$Purple800 : #6A1B9A; // HC
$Purple900 : #4A148C; // HC
$PurpleA100 : #EA80FC;
$PurpleA200 : #E040FB; // HC
$PurpleA400 : #D500F9; // HC
$PurpleA700 : #AA00FF; // HC
// Deep Purples
$DPurple50 : #EDE7F6;
$DPurple100 : #D1C4E9;
$DPurple200 : #B39DDB;
$DPurple300 : #9575CD; // HC
$DPurple400 : #7E57C2; // HC
$DPurple500 : #673AB7; // HC
$DPurple600 : #5E35B1; // HC
$DPurple700 : #512DA8; // HC
$DPurple800 : #4527A0; // HC
$DPurple900 : #311B92; // HC
$DPurpleA100 : #B388FF;
$DPurpleA200 : #7C4DFF; // HC
$DPurpleA400 : #651FFF; // HC
$DPurpleA700 : #6200EA; // HC
// Indigos
$Indigo50 : #E8EAF6;
$Indigo100 : #C5CAE9;
$Indigo200 : #9FA8DA;
$Indigo300 : #7986CB; // HC
$Indigo400 : #5C6BC0; // HC
$Indigo500 : #3F51B5; // HC
$Indigo600 : #3949AB; // HC
$Indigo700 : #303F9F; // HC
$Indigo800 : #283593; // HC
$Indigo900 : #1A237E; // HC
$IndigoA100 : #8C9EFF;
$IndigoA200 : #536DFE; // HC
$IndigoA400 : #3D5AFE; // HC
$IndigoA700 : #304FFE; // HC
// Blues
$Blue50 : #E3F2FD;
$Blue100 : #BBDEFB;
$Blue200 : #90CAF9;
$Blue300 : #64B5F6;
$Blue400 : #42A5F5;
$Blue500 : #2196F3;
$Blue600 : #1E88E5; // HC
$Blue700 : #1976D2; // HC
$Blue800 : #1565C0; // HC
$Blue900 : #0D47A1; // HC
$BlueA100 : #82B1FF;
$BlueA200 : #448AFF; // HC
$BlueA400 : #2979FF; // HC
$BlueA700 : #2962FF; // HC
// Light Blues
$LBlue50 : #E1F5FE;
$LBlue100 : #B3E5FC;
$LBlue200 : #81D4FA;
$LBlue300 : #4FC3F7;
$LBlue400 : #29B6F6;
$LBlue500 : #03A9F4;
$LBlue600 : #039BE5;
$LBlue700 : #0288D1; // HC
$LBlue800 : #0277BD; // HC
$LBlue900 : #01579B; // HC
$LBlueA100 : #80D8FF;
$LBlueA200 : #40C4FF;
$LBlueA400 : #00B0FF;
$LBlueA700 : #0091EA; // HC
// Cyans
$Cyan50 : #E0F7FA;
$Cyan100 : #B2EBF2;
$Cyan200 : #80DEEA;
$Cyan300 : #4DD0E1;
$Cyan400 : #26C6DA;
$Cyan500 : #00BCD4;
$Cyan600 : #00ACC1;
$Cyan700 : #0097A7; // HC
$Cyan800 : #00838F; // HC
$Cyan900 : #006064; // HC
$CyanA100 : #84FFFF;
$CyanA200 : #18FFFF;
$CyanA400 : #00E5FF;
$CyanA700 : #00B8D4;
// Teals
$Teal50 : #E0F2F1;
$Teal100 : #B2DFDB;
$Teal200 : #80CBC4;
$Teal300 : #4DB6AC;
$Teal400 : #26A69A;
$Teal500 : #009688; // HC
$Teal600 : #00897B; // HC
$Teal700 : #00796B; // HC
$Teal800 : #00695C; // HC
$Teal900 : #004D40; // HC
$TealA100 : #A7FFEB;
$TealA200 : #64FFDA;
$TealA400 : #1DE9B6;
$TealA700 : #00BFA5;
// Greens
$Green50 : #E8F5E9;
$Green100 : #C8E6C9;
$Green200 : #A5D6A7;
$Green300 : #81C784;
$Green400 : #66BB6A;
$Green500 : #4CAF50;
$Green600 : #43A047; // HC
$Green700 : #388E3C; // HC
$Green800 : #2E7D32; // HC
$Green900 : #1B5E20; // HC
$GreenA100 : #B9F6CA;
$GreenA200 : #69F0AE;
$GreenA400 : #00E676;
$GreenA700 : #00C853;
// Light Greens
$LGreen50 : #F1F8E9;
$LGreen100 : #DCEDC8;
$LGreen200 : #C5E1A5;
$LGreen300 : #AED581;
$LGreen400 : #9CCC65;
$LGreen500 : #8BC34A;
$LGreen600 : #7CB342;
$LGreen700 : #689F38;
$LGreen800 : #558B2F; // HC
$LGreen900 : #33691E; // HC
$LGreenA100 : #CCFF90;
$LGreenA200 : #B2FF59;
$LGreenA400 : #76FF03;
$LGreenA700 : #64DD17;
// Limes
$Lime50 : #F9FBE7;
$Lime100 : #F0F4C3;
$Lime200 : #E6EE9C;
$Lime300 : #DCE775;
$Lime400 : #D4E157;
$Lime500 : #CDDC39;
$Lime600 : #C0CA33;
$Lime700 : #AFB42B;
$Lime800 : #9E9D24;
$Lime900 : #827717; // HC
$LimeA100 : #F4FF81;
$LimeA200 : #EEFF41;
$LimeA400 : #C6FF00;
$LimeA700 : #AEEA00;
// Yellows
$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;
// Ambers
$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;
// Oranges
$Orange50 : #FFF3E0;
$Orange100 : #FFE0B2;
$Orange200 : #FFCC80;
$Orange300 : #FFB74D;
$Orange400 : #FFA726;
$Orange500 : #FF9800;
$Orange600 : #FB8C00;
$Orange700 : #F57C00;
$Orange800 : #EF6C00;
$Orange900 : #E65100; // HC
$OrangeA100 : #FFD180;
$OrangeA200 : #FFAB40;
$OrangeA400 : #FF9100;
$OrangeA700 : #FF6D00;
// Deep Oranges
$DOrange50 : #FBE9E7;
$DOrange100 : #FFCCBC;
$DOrange200 : #FFAB91;
$DOrange300 : #FF8A65;
$DOrange400 : #FF7043;
$DOrange500 : #FF5722;
$DOrange600 : #F4511E; // HC
$DOrange700 : #E64A19; // HC
$DOrange800 : #D84315; // HC
$DOrange900 : #BF360C; // HC
$DOrangeA100 : #FF9E80;
$DOrangeA200 : #FF6E40;
$DOrangeA400 : #FF3D00; // HC
$DOrangeA700 : #DD2C00; // HC
// Browns
$Brown50 : #EFEBE9;
$Brown100 : #D7CCC8;
$Brown200 : #BCAAA4;
$Brown300 : #A1887F; // HC
$Brown400 : #8D6E63; // HC
$Brown500 : #795548; // HC
$Brown600 : #6D4C41; // HC
$Brown700 : #5D4037; // HC
$Brown800 : #4E342E; // HC
$Brown900 : #3E2723; // HC
// Grays
$Gray50 : #FAFAFA;
$Gray100 : #F5F5F5;
$Gray200 : #EEEEEE;
$Gray300 : #E0E0E0;
$Gray400 : #BDBDBD;
$Gray500 : #9E9E9E;
$Gray600 : #757575; // HC
$Gray700 : #616161; // HC
$Gray800 : #424242; // HC
$Gray900 : #212121; // HC
// Blue Grays
$BGray50 : #ECEFF1;
$BGray100 : #CFD8DC;
$BGray200 : #B0BEC5;
$BGray300 : #90A4AE;
$BGray400 : #78909C; // HC
$BGray500 : #607D8B; // HC
$BGray600 : #546E7A; // HC
$BGray700 : #455A64; // HC
$BGray800 : #37474F; // HC
$BGray900 : #263238; // HC
// B&W
$Black : #000000; // HC
$White : #FFFFFF;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment