material-design-colors/colors.less

The Google Material Design color palette for Sass and Less

// ================================================================================
//
// Material Design Colors
//
// @description Provides quick color palettes for Sass and Less projects
// @author Valentin GOT
// @github https://github.com/ValentinGot/material-design-colors
//
// ================================================================================

// Red
//-----------------------------------------

@red-list: #FFEBEE, #FFCDD2, #EF9A9A, #E57373, #EF5350, #F44336, #E53935, #D32F2F, #C62828, #B71C1C, #FF8A80, #FF5252, #FF1744, #D50000;

@red-50-color  : extract(@red-list, 1);
@red-100-color : extract(@red-list, 2);
@red-200-color : extract(@red-list, 3);
@red-300-color : extract(@red-list, 4);
@red-400-color : extract(@red-list, 5);
@red-500-color : extract(@red-list, 6);
@red-600-color : extract(@red-list, 7);
@red-700-color : extract(@red-list, 8);
@red-800-color : extract(@red-list, 9);
@red-900-color : extract(@red-list, 10);
@red-a100-color: extract(@red-list, 11);
@red-a200-color: extract(@red-list, 12);
@red-a400-color: extract(@red-list, 13);
@red-a700-color: extract(@red-list, 14);

// Pink
//-----------------------------------------

@pink-list: #FCE4EC, #F8BBD0, #F48FB1, #F06292, #EC407A, #E91E63, #D81B60, #C2185B, #AD1457, #880E4F, #FF80AB, #FF4081, #F50057, #C51162;

@pink-50-color  : extract(@pink-list, 1);
@pink-100-color : extract(@pink-list, 2);
@pink-200-color : extract(@pink-list, 3);
@pink-300-color : extract(@pink-list, 4);
@pink-400-color : extract(@pink-list, 5);
@pink-500-color : extract(@pink-list, 6);
@pink-600-color : extract(@pink-list, 7);
@pink-700-color : extract(@pink-list, 8);
@pink-800-color : extract(@pink-list, 9);
@pink-900-color : extract(@pink-list, 10);
@pink-a100-color: extract(@pink-list, 11);
@pink-a200-color: extract(@pink-list, 12);
@pink-a400-color: extract(@pink-list, 13);
@pink-a700-color: extract(@pink-list, 14);

// Purple
//-----------------------------------------

@purple-list: #F3E5F5, #E1BEE7, #CE93D8, #BA68C8, #AB47BC, #9C27B0, #8E24AA, #7B1FA2, #6A1B9A, #4A148C, #EA80FC, #E040FB, #D500F9, #AA00FF;

@purple-50-color  : extract(@purple-list, 1);
@purple-100-color : extract(@purple-list, 2);
@purple-200-color : extract(@purple-list, 3);
@purple-300-color : extract(@purple-list, 4);
@purple-400-color : extract(@purple-list, 5);
@purple-500-color : extract(@purple-list, 6);
@purple-600-color : extract(@purple-list, 7);
@purple-700-color : extract(@purple-list, 8);
@purple-800-color : extract(@purple-list, 9);
@purple-900-color : extract(@purple-list, 10);
@purple-a100-color: extract(@purple-list, 11);
@purple-a200-color: extract(@purple-list, 12);
@purple-a400-color: extract(@purple-list, 13);
@purple-a700-color: extract(@purple-list, 14);

// Deep Purple
//-----------------------------------------

@deep-purple-list: #EDE7F6, #D1C4E9, #B39DDB, #9575CD, #7E57C2, #673AB7, #5E35B1, #512DA8, #4527A0, #311B92, #B388FF, #7C4DFF, #651FFF, #6200EA;

@deep-purple-50-color  : extract(@deep-purple-list, 1);
@deep-purple-100-color : extract(@deep-purple-list, 2);
@deep-purple-200-color : extract(@deep-purple-list, 3);
@deep-purple-300-color : extract(@deep-purple-list, 4);
@deep-purple-400-color : extract(@deep-purple-list, 5);
@deep-purple-500-color : extract(@deep-purple-list, 6);
@deep-purple-600-color : extract(@deep-purple-list, 7);
@deep-purple-700-color : extract(@deep-purple-list, 8);
@deep-purple-800-color : extract(@deep-purple-list, 9);
@deep-purple-900-color : extract(@deep-purple-list, 10);
@deep-purple-a100-color: extract(@deep-purple-list, 11);
@deep-purple-a200-color: extract(@deep-purple-list, 12);
@deep-purple-a400-color: extract(@deep-purple-list, 13);
@deep-purple-a700-color: extract(@deep-purple-list, 14);

// Indigo
//-----------------------------------------

@indigo-list: #E8EAF6, #C5CAE9, #9FA8DA, #7986CB, #5C6BC0, #3F51B5, #3949AB, #303F9F, #283593, #1A237E, #8C9EFF, #536DFE, #3D5AFE, #304FFE;

@indigo-50-color  : extract(@indigo-list, 1);
@indigo-100-color : extract(@indigo-list, 2);
@indigo-200-color : extract(@indigo-list, 3);
@indigo-300-color : extract(@indigo-list, 4);
@indigo-400-color : extract(@indigo-list, 5);
@indigo-500-color : extract(@indigo-list, 6);
@indigo-600-color : extract(@indigo-list, 7);
@indigo-700-color : extract(@indigo-list, 8);
@indigo-800-color : extract(@indigo-list, 9);
@indigo-900-color : extract(@indigo-list, 10);
@indigo-a100-color: extract(@indigo-list, 11);
@indigo-a200-color: extract(@indigo-list, 12);
@indigo-a400-color: extract(@indigo-list, 13);
@indigo-a700-color: extract(@indigo-list, 14);

// Blue
//-----------------------------------------

@blue-list: #E3F2FD, #BBDEFB, #90CAF9, #64B5F6, #42A5F5, #2196F3, #1E88E5, #1976D2, #1565C0, #0D47A1, #82B1FF, #448AFF, #2979FF, #2962FF;

@blue-50-color  : extract(@blue-list, 1);
@blue-100-color : extract(@blue-list, 2);
@blue-200-color : extract(@blue-list, 3);
@blue-300-color : extract(@blue-list, 4);
@blue-400-color : extract(@blue-list, 5);
@blue-500-color : extract(@blue-list, 6);
@blue-600-color : extract(@blue-list, 7);
@blue-700-color : extract(@blue-list, 8);
@blue-800-color : extract(@blue-list, 9);
@blue-900-color : extract(@blue-list, 10);
@blue-a100-color: extract(@blue-list, 11);
@blue-a200-color: extract(@blue-list, 12);
@blue-a400-color: extract(@blue-list, 13);
@blue-a700-color: extract(@blue-list, 14);

// Light Blue
//-----------------------------------------

@light-blue-list: #E1F5FE, #B3E5FC, #81D4FA, #4FC3F7, #29B6F6, #03A9F4, #039BE5, #0288D1, #0277BD, #01579B, #80D8FF, #40C4FF, #00B0FF, #0091EA;

@light-blue-50-color  : extract(@light-blue-list, 1);
@light-blue-100-color : extract(@light-blue-list, 2);
@light-blue-200-color : extract(@light-blue-list, 3);
@light-blue-300-color : extract(@light-blue-list, 4);
@light-blue-400-color : extract(@light-blue-list, 5);
@light-blue-500-color : extract(@light-blue-list, 6);
@light-blue-600-color : extract(@light-blue-list, 7);
@light-blue-700-color : extract(@light-blue-list, 8);
@light-blue-800-color : extract(@light-blue-list, 9);
@light-blue-900-color : extract(@light-blue-list, 10);
@light-blue-a100-color: extract(@light-blue-list, 11);
@light-blue-a200-color: extract(@light-blue-list, 12);
@light-blue-a400-color: extract(@light-blue-list, 13);
@light-blue-a700-color: extract(@light-blue-list, 14);

// Cyan
//-----------------------------------------

@cyan-list: #E0F7FA, #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1, #0097A7, #00838F, #006064, #84FFFF, #18FFFF, #00E5FF, #00B8D4;

@cyan-50-color  : extract(@cyan-list, 1);
@cyan-100-color : extract(@cyan-list, 2);
@cyan-200-color : extract(@cyan-list, 3);
@cyan-300-color : extract(@cyan-list, 4);
@cyan-400-color : extract(@cyan-list, 5);
@cyan-500-color : extract(@cyan-list, 6);
@cyan-600-color : extract(@cyan-list, 7);
@cyan-700-color : extract(@cyan-list, 8);
@cyan-800-color : extract(@cyan-list, 9);
@cyan-900-color : extract(@cyan-list, 10);
@cyan-a100-color: extract(@cyan-list, 11);
@cyan-a200-color: extract(@cyan-list, 12);
@cyan-a400-color: extract(@cyan-list, 13);
@cyan-a700-color: extract(@cyan-list, 14);

// Teal
//-----------------------------------------

@teal-list: #E0F2F1, #B2DFDB, #80CBC4, #4DB6AC, #26A69A, #009688, #00897B, #00796B, #00695C, #004D40, #A7FFEB, #64FFDA, #1DE9B6, #00BFA5;

@teal-50-color  : extract(@teal-list, 1);
@teal-100-color : extract(@teal-list, 2);
@teal-200-color : extract(@teal-list, 3);
@teal-300-color : extract(@teal-list, 4);
@teal-400-color : extract(@teal-list, 5);
@teal-500-color : extract(@teal-list, 6);
@teal-600-color : extract(@teal-list, 7);
@teal-700-color : extract(@teal-list, 8);
@teal-800-color : extract(@teal-list, 9);
@teal-900-color : extract(@teal-list, 10);
@teal-a100-color: extract(@teal-list, 11);
@teal-a200-color: extract(@teal-list, 12);
@teal-a400-color: extract(@teal-list, 13);
@teal-a700-color: extract(@teal-list, 14);

// Green
//-----------------------------------------

@green-list: #E8F5E9, #C8E6C9, #A5D6A7, #81C784, #66BB6A, #4CAF50, #43A047, #388E3C, #2E7D32, #1B5E20, #B9F6CA, #69F0AE, #00E676, #00C853;

@green-50-color  : extract(@green-list, 1);
@green-100-color : extract(@green-list, 2);
@green-200-color : extract(@green-list, 3);
@green-300-color : extract(@green-list, 4);
@green-400-color : extract(@green-list, 5);
@green-500-color : extract(@green-list, 6);
@green-600-color : extract(@green-list, 7);
@green-700-color : extract(@green-list, 8);
@green-800-color : extract(@green-list, 9);
@green-900-color : extract(@green-list, 10);
@green-a100-color: extract(@green-list, 11);
@green-a200-color: extract(@green-list, 12);
@green-a400-color: extract(@green-list, 13);
@green-a700-color: extract(@green-list, 14);

// Light Green
//-----------------------------------------

@light-green-list: #F1F8E9, #DCEDC8, #C5E1A5, #AED581, #9CCC65, #8BC34A, #7CB342, #689F38, #558B2F, #33691E, #CCFF90, #B2FF59, #76FF03, #64DD17;

@light-green-50-color  : extract(@light-green-list, 1);
@light-green-100-color : extract(@light-green-list, 2);
@light-green-200-color : extract(@light-green-list, 3);
@light-green-300-color : extract(@light-green-list, 4);
@light-green-400-color : extract(@light-green-list, 5);
@light-green-500-color : extract(@light-green-list, 6);
@light-green-600-color : extract(@light-green-list, 7);
@light-green-700-color : extract(@light-green-list, 8);
@light-green-800-color : extract(@light-green-list, 9);
@light-green-900-color : extract(@light-green-list, 10);
@light-green-a100-color: extract(@light-green-list, 11);
@light-green-a200-color: extract(@light-green-list, 12);
@light-green-a400-color: extract(@light-green-list, 13);
@light-green-a700-color: extract(@light-green-list, 14);

// Lime
//-----------------------------------------

@lime-list: #F9FBE7, #F0F4C3, #E6EE9C, #DCE775, #D4E157, #CDDC39, #C0CA33, #AFB42B, #9E9D24, #827717, #F4FF81, #EEFF41, #C6FF00, #AEEA00;

@lime-50-color  : extract(@lime-list, 1);
@lime-100-color : extract(@lime-list, 2);
@lime-200-color : extract(@lime-list, 3);
@lime-300-color : extract(@lime-list, 4);
@lime-400-color : extract(@lime-list, 5);
@lime-500-color : extract(@lime-list, 6);
@lime-600-color : extract(@lime-list, 7);
@lime-700-color : extract(@lime-list, 8);
@lime-800-color : extract(@lime-list, 9);
@lime-900-color : extract(@lime-list, 10);
@lime-a100-color: extract(@lime-list, 11);
@lime-a200-color: extract(@lime-list, 12);
@lime-a400-color: extract(@lime-list, 13);
@lime-a700-color: extract(@lime-list, 14);

// Yellow
//-----------------------------------------

@yellow-list: #FFFDE7, #FFF9C4, #FFF59D, #FFF176, #FFEE58, #FFEB3B, #FDD835, #FBC02D, #F9A825, #F57F17, #FFFF8D, #FFFF00, #FFEA00, #FFD600;

@yellow-50-color  : extract(@yellow-list, 1);
@yellow-100-color : extract(@yellow-list, 2);
@yellow-200-color : extract(@yellow-list, 3);
@yellow-300-color : extract(@yellow-list, 4);
@yellow-400-color : extract(@yellow-list, 5);
@yellow-500-color : extract(@yellow-list, 6);
@yellow-600-color : extract(@yellow-list, 7);
@yellow-700-color : extract(@yellow-list, 8);
@yellow-800-color : extract(@yellow-list, 9);
@yellow-900-color : extract(@yellow-list, 10);
@yellow-a100-color: extract(@yellow-list, 11);
@yellow-a200-color: extract(@yellow-list, 12);
@yellow-a400-color: extract(@yellow-list, 13);
@yellow-a700-color: extract(@yellow-list, 14);

// Amber
//-----------------------------------------

@amber-list: #FFF8E1, #FFECB3, #FFE082, #FFD54F, #FFCA28, #FFC107, #FFB300, #FFA000, #FF8F00, #FF6F00, #FFE57F, #FFD740, #FFC400, #FFAB00;

@amber-50-color  : extract(@amber-list, 1);
@amber-100-color : extract(@amber-list, 2);
@amber-200-color : extract(@amber-list, 3);
@amber-300-color : extract(@amber-list, 4);
@amber-400-color : extract(@amber-list, 5);
@amber-500-color : extract(@amber-list, 6);
@amber-600-color : extract(@amber-list, 7);
@amber-700-color : extract(@amber-list, 8);
@amber-800-color : extract(@amber-list, 9);
@amber-900-color : extract(@amber-list, 10);
@amber-a100-color: extract(@amber-list, 11);
@amber-a200-color: extract(@amber-list, 12);
@amber-a400-color: extract(@amber-list, 13);
@amber-a700-color: extract(@amber-list, 14);

// Orange
//-----------------------------------------

@orange-list: #FFF3E0, #FFE0B2, #FFCC80, #FFB74D, #FFA726, #FF9800, #FB8C00, #F57C00, #EF6C00, #E65100, #FFD180, #FFAB40, #FF9100, #FF6D00;

@orange-50-color  : extract(@orange-list, 1);
@orange-100-color : extract(@orange-list, 2);
@orange-200-color : extract(@orange-list, 3);
@orange-300-color : extract(@orange-list, 4);
@orange-400-color : extract(@orange-list, 5);
@orange-500-color : extract(@orange-list, 6);
@orange-600-color : extract(@orange-list, 7);
@orange-700-color : extract(@orange-list, 8);
@orange-800-color : extract(@orange-list, 9);
@orange-900-color : extract(@orange-list, 10);
@orange-a100-color: extract(@orange-list, 11);
@orange-a200-color: extract(@orange-list, 12);
@orange-a400-color: extract(@orange-list, 13);
@orange-a700-color: extract(@orange-list, 14);

// Deep Orange
//-----------------------------------------

@deep-orange-list: #FBE9E7, #FFCCBC, #FFAB91, #FF8A65, #FF7043, #FF5722, #F4511E, #E64A19, #D84315, #BF360C, #FF9E80, #FF6E40, #FF3D00, #DD2C00;

@deep-orange-50-color  : extract(@deep-orange-list, 1);
@deep-orange-100-color : extract(@deep-orange-list, 2);
@deep-orange-200-color : extract(@deep-orange-list, 3);
@deep-orange-300-color : extract(@deep-orange-list, 4);
@deep-orange-400-color : extract(@deep-orange-list, 5);
@deep-orange-500-color : extract(@deep-orange-list, 6);
@deep-orange-600-color : extract(@deep-orange-list, 7);
@deep-orange-700-color : extract(@deep-orange-list, 8);
@deep-orange-800-color : extract(@deep-orange-list, 9);
@deep-orange-900-color : extract(@deep-orange-list, 10);
@deep-orange-a100-color: extract(@deep-orange-list, 11);
@deep-orange-a200-color: extract(@deep-orange-list, 12);
@deep-orange-a400-color: extract(@deep-orange-list, 13);
@deep-orange-a700-color: extract(@deep-orange-list, 14);

// Brown
//-----------------------------------------

@brown-list: #EFEBE9, #D7CCC8, #BCAAA4, #A1887F, #8D6E63, #795548, #6D4C41, #5D4037, #4E342E, #3E2723;

@brown-50-color  : extract(@brown-list, 1);
@brown-100-color : extract(@brown-list, 2);
@brown-200-color : extract(@brown-list, 3);
@brown-300-color : extract(@brown-list, 4);
@brown-400-color : extract(@brown-list, 5);
@brown-500-color : extract(@brown-list, 6);
@brown-600-color : extract(@brown-list, 7);
@brown-700-color : extract(@brown-list, 8);
@brown-800-color : extract(@brown-list, 9);
@brown-900-color : extract(@brown-list, 10);

// Grey
//-----------------------------------------

@grey-list: #FAFAFA, #F5F5F5, #EEEEEE, #E0E0E0, #BDBDBD, #9E9E9E, #757575, #616161, #424242, #212121;

@grey-50-color  : extract(@grey-list, 1);
@grey-100-color : extract(@grey-list, 2);
@grey-200-color : extract(@grey-list, 3);
@grey-300-color : extract(@grey-list, 4);
@grey-400-color : extract(@grey-list, 5);
@grey-500-color : extract(@grey-list, 6);
@grey-600-color : extract(@grey-list, 7);
@grey-700-color : extract(@grey-list, 8);
@grey-800-color : extract(@grey-list, 9);
@grey-900-color : extract(@grey-list, 10);

// Blue Grey
//-----------------------------------------

@blue-grey-list: #ECEFF1, #CFD8DC, #B0BEC5, #90A4AE, #78909C, #607D8B, #546E7A, #455A64, #37474F, #263238;

@blue-grey-50-color  : extract(@blue-grey-list, 1);
@blue-grey-100-color : extract(@blue-grey-list, 2);
@blue-grey-200-color : extract(@blue-grey-list, 3);
@blue-grey-300-color : extract(@blue-grey-list, 4);
@blue-grey-400-color : extract(@blue-grey-list, 5);
@blue-grey-500-color : extract(@blue-grey-list, 6);
@blue-grey-600-color : extract(@blue-grey-list, 7);
@blue-grey-700-color : extract(@blue-grey-list, 8);
@blue-grey-800-color : extract(@blue-grey-list, 9);
@blue-grey-900-color : extract(@blue-grey-list, 10);

// Black & White
//-----------------------------------------

@black-white-list: #000000, #FFFFFF;

@black-color: extract(@black-white-list, "black");
@white-color: extract(@black-white-list, "white")