// ========================================================================== // // Name: UI Color Palette // Description: The color palette of material design. // Version: 2.3.1 // // Author: Denis Malinochkin // Git: https://github.com/mrmlnc/material_color // // twitter: @mrmlnc // // ========================================================================== // // List of base colors // // @md_red // @md_pink // @md_purple // @md_deep_purple // @md_indigo // @md_blue // @md_light_blue // @md_cyan // @md_teal // @md_green // @md_light_green // @md_lime // @md_yellow // @md_amber // @md_orange // @md_deep_orange // @md_brown // @md_grey // @md_blue_grey // @md_black // @md_white // // Red // @md_red_list: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c, #ff8a80, #ff5252, #ff1744, #d50000; @md_red: extract(@md_red_list, 6); @md_red_50: extract(@md_red_list, 1); @md_red_100: extract(@md_red_list, 2); @md_red_200: extract(@md_red_list, 3); @md_red_300: extract(@md_red_list, 4); @md_red_400: extract(@md_red_list, 5); @md_red_500: extract(@md_red_list, 6); @md_red_600: extract(@md_red_list, 7); @md_red_700: extract(@md_red_list, 8); @md_red_800: extract(@md_red_list, 9); @md_red_900: extract(@md_red_list, 10); @md_red_A100: extract(@md_red_list, 11); @md_red_A200: extract(@md_red_list, 12); @md_red_A400: extract(@md_red_list, 13); @md_red_A700: extract(@md_red_list, 14); // // Pink // @md_pink_list: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, #ff80ab, #ff4081, #f50057, #c51162; @md_pink: extract(@md_pink_list, 6); @md_pink_50: extract(@md_pink_list, 1); @md_pink_100: extract(@md_pink_list, 2); @md_pink_200: extract(@md_pink_list, 3); @md_pink_300: extract(@md_pink_list, 4); @md_pink_400: extract(@md_pink_list, 5); @md_pink_500: extract(@md_pink_list, 6); @md_pink_600: extract(@md_pink_list, 7); @md_pink_700: extract(@md_pink_list, 8); @md_pink_800: extract(@md_pink_list, 9); @md_pink_900: extract(@md_pink_list, 10); @md_pink_A100: extract(@md_pink_list, 11); @md_pink_A200: extract(@md_pink_list, 12); @md_pink_A400: extract(@md_pink_list, 13); @md_pink_A700: extract(@md_pink_list, 14); // // Purple // @md_purple_list: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, #ea80fc, #e040fb, #d500f9, #aa00ff; @md_purple: extract(@md_purple_list, 6); @md_purple_50: extract(@md_purple_list, 1); @md_purple_100: extract(@md_purple_list, 2); @md_purple_200: extract(@md_purple_list, 3); @md_purple_300: extract(@md_purple_list, 4); @md_purple_400: extract(@md_purple_list, 5); @md_purple_500: extract(@md_purple_list, 6); @md_purple_600: extract(@md_purple_list, 7); @md_purple_700: extract(@md_purple_list, 8); @md_purple_800: extract(@md_purple_list, 9); @md_purple_900: extract(@md_purple_list, 10); @md_purple_A100: extract(@md_purple_list, 11); @md_purple_A200: extract(@md_purple_list, 12); @md_purple_A400: extract(@md_purple_list, 13); @md_purple_A700: extract(@md_purple_list, 14); // // Deep Purple // @md_deep_purple_list: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92, #b388ff, #7c4dff, #651fff, #6200ea; @md_deep_purple: extract(@md_deep_purple_list, 6); @md_deep_purple_50: extract(@md_deep_purple_list, 1); @md_deep_purple_100: extract(@md_deep_purple_list, 2); @md_deep_purple_200: extract(@md_deep_purple_list, 3); @md_deep_purple_300: extract(@md_deep_purple_list, 4); @md_deep_purple_400: extract(@md_deep_purple_list, 5); @md_deep_purple_500: extract(@md_deep_purple_list, 6); @md_deep_purple_600: extract(@md_deep_purple_list, 7); @md_deep_purple_700: extract(@md_deep_purple_list, 8); @md_deep_purple_800: extract(@md_deep_purple_list, 9); @md_deep_purple_900: extract(@md_deep_purple_list, 10); @md_deep_purple_A100: extract(@md_deep_purple_list, 11); @md_deep_purple_A200: extract(@md_deep_purple_list, 12); @md_deep_purple_A400: extract(@md_deep_purple_list, 13); @md_deep_purple_A700: extract(@md_deep_purple_list, 14); // // Indigo // @md_indigo_list: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, #3f51b5, #3949ab, #303f9f, #283593, #1a237e, #8c9eff, #536dfe, #3d5afe, #304ffe; @md_indigo: extract(@md_indigo_list, 6); @md_indigo_50: extract(@md_indigo_list, 1); @md_indigo_100: extract(@md_indigo_list, 2); @md_indigo_200: extract(@md_indigo_list, 3); @md_indigo_300: extract(@md_indigo_list, 4); @md_indigo_400: extract(@md_indigo_list, 5); @md_indigo_500: extract(@md_indigo_list, 6); @md_indigo_600: extract(@md_indigo_list, 7); @md_indigo_700: extract(@md_indigo_list, 8); @md_indigo_800: extract(@md_indigo_list, 9); @md_indigo_900: extract(@md_indigo_list, 10); @md_indigo_A100: extract(@md_indigo_list, 11); @md_indigo_A200: extract(@md_indigo_list, 12); @md_indigo_A400: extract(@md_indigo_list, 13); @md_indigo_A700: extract(@md_indigo_list, 14); // // Blue // @md_blue_list: #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, #82b1ff, #448aff, #2979ff, #2962ff; @md_blue: extract(@md_blue_list, 6); @md_blue_50: extract(@md_blue_list, 1); @md_blue_100: extract(@md_blue_list, 2); @md_blue_200: extract(@md_blue_list, 3); @md_blue_300: extract(@md_blue_list, 4); @md_blue_400: extract(@md_blue_list, 5); @md_blue_500: extract(@md_blue_list, 6); @md_blue_600: extract(@md_blue_list, 7); @md_blue_700: extract(@md_blue_list, 8); @md_blue_800: extract(@md_blue_list, 9); @md_blue_900: extract(@md_blue_list, 10); @md_blue_A100: extract(@md_blue_list, 11); @md_blue_A200: extract(@md_blue_list, 12); @md_blue_A400: extract(@md_blue_list, 13); @md_blue_A700: extract(@md_blue_list, 14); // // Light Blue // @md_light_blue_list: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b, #80d8ff, #40c4ff, #00b0ff, #0091ea; @md_light_blue: extract(@md_light_blue_list, 6); @md_light_blue_50: extract(@md_light_blue_list, 1); @md_light_blue_100: extract(@md_light_blue_list, 2); @md_light_blue_200: extract(@md_light_blue_list, 3); @md_light_blue_300: extract(@md_light_blue_list, 4); @md_light_blue_400: extract(@md_light_blue_list, 5); @md_light_blue_500: extract(@md_light_blue_list, 6); @md_light_blue_600: extract(@md_light_blue_list, 7); @md_light_blue_700: extract(@md_light_blue_list, 8); @md_light_blue_800: extract(@md_light_blue_list, 9); @md_light_blue_900: extract(@md_light_blue_list, 10); @md_light_blue_A100: extract(@md_light_blue_list, 11); @md_light_blue_A200: extract(@md_light_blue_list, 12); @md_light_blue_A400: extract(@md_light_blue_list, 13); @md_light_blue_A700: extract(@md_light_blue_list, 14); // // Cyan // @md_cyan_list: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064, #84ffff, #18ffff, #00e5ff, #00b8d4; @md_cyan: extract(@md_cyan_list, 6); @md_cyan_50: extract(@md_cyan_list, 1); @md_cyan_100: extract(@md_cyan_list, 2); @md_cyan_200: extract(@md_cyan_list, 3); @md_cyan_300: extract(@md_cyan_list, 4); @md_cyan_400: extract(@md_cyan_list, 5); @md_cyan_500: extract(@md_cyan_list, 6); @md_cyan_600: extract(@md_cyan_list, 7); @md_cyan_700: extract(@md_cyan_list, 8); @md_cyan_800: extract(@md_cyan_list, 9); @md_cyan_900: extract(@md_cyan_list, 10); @md_cyan_A100: extract(@md_cyan_list, 11); @md_cyan_A200: extract(@md_cyan_list, 12); @md_cyan_A400: extract(@md_cyan_list, 13); @md_cyan_A700: extract(@md_cyan_list, 14); // // Teal // @md_teal_list: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, #009688, #00897b, #00796b, #00695c, #004d40, #a7ffeb, #64ffda, #1de9b6, #00bfa5; @md_teal: extract(@md_teal_list, 6); @md_teal_50: extract(@md_teal_list, 1); @md_teal_100: extract(@md_teal_list, 2); @md_teal_200: extract(@md_teal_list, 3); @md_teal_300: extract(@md_teal_list, 4); @md_teal_400: extract(@md_teal_list, 5); @md_teal_500: extract(@md_teal_list, 6); @md_teal_600: extract(@md_teal_list, 7); @md_teal_700: extract(@md_teal_list, 8); @md_teal_800: extract(@md_teal_list, 9); @md_teal_900: extract(@md_teal_list, 10); @md_teal_A100: extract(@md_teal_list, 11); @md_teal_A200: extract(@md_teal_list, 12); @md_teal_A400: extract(@md_teal_list, 13); @md_teal_A700: extract(@md_teal_list, 14); // // Green // @md_green_list: #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20, #b9f6ca, #69f0ae, #00e676, #00c853; @md_green: extract(@md_green_list, 6); @md_green_50: extract(@md_green_list, 1); @md_green_100: extract(@md_green_list, 2); @md_green_200: extract(@md_green_list, 3); @md_green_300: extract(@md_green_list, 4); @md_green_400: extract(@md_green_list, 5); @md_green_500: extract(@md_green_list, 6); @md_green_600: extract(@md_green_list, 7); @md_green_700: extract(@md_green_list, 8); @md_green_800: extract(@md_green_list, 9); @md_green_900: extract(@md_green_list, 10); @md_green_A100: extract(@md_green_list, 11); @md_green_A200: extract(@md_green_list, 12); @md_green_A400: extract(@md_green_list, 13); @md_green_A700: extract(@md_green_list, 14); // // Light Green // @md_light_green_list: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #8bc34a, #7cb342, #689f38, #558b2f, #33691e, #ccff90, #b2ff59, #76ff03, #64dd17; @md_light_green: extract(@md_light_green_list, 6); @md_light_green_50: extract(@md_light_green_list, 1); @md_light_green_100: extract(@md_light_green_list, 2); @md_light_green_200: extract(@md_light_green_list, 3); @md_light_green_300: extract(@md_light_green_list, 4); @md_light_green_400: extract(@md_light_green_list, 5); @md_light_green_500: extract(@md_light_green_list, 6); @md_light_green_600: extract(@md_light_green_list, 7); @md_light_green_700: extract(@md_light_green_list, 8); @md_light_green_800: extract(@md_light_green_list, 9); @md_light_green_900: extract(@md_light_green_list, 10); @md_light_green_A100: extract(@md_light_green_list, 11); @md_light_green_A200: extract(@md_light_green_list, 12); @md_light_green_A400: extract(@md_light_green_list, 13); @md_light_green_A700: extract(@md_light_green_list, 14); // // Lime // @md_lime_list: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, #f4ff81, #eeff41, #c6ff00, #aeea00; @md_lime: extract(@md_lime_list, 6); @md_lime_50: extract(@md_lime_list, 1); @md_lime_100: extract(@md_lime_list, 2); @md_lime_200: extract(@md_lime_list, 3); @md_lime_300: extract(@md_lime_list, 4); @md_lime_400: extract(@md_lime_list, 5); @md_lime_500: extract(@md_lime_list, 6); @md_lime_600: extract(@md_lime_list, 7); @md_lime_700: extract(@md_lime_list, 8); @md_lime_800: extract(@md_lime_list, 9); @md_lime_900: extract(@md_lime_list, 10); @md_lime_A100: extract(@md_lime_list, 11); @md_lime_A200: extract(@md_lime_list, 12); @md_lime_A400: extract(@md_lime_list, 13); @md_lime_A700: extract(@md_lime_list, 14); // // Yellow // @md_yellow_list: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, #ffff8d, #ffff00, #ffea00, #ffd600; @md_yellow: extract(@md_yellow_list, 6); @md_yellow_50: extract(@md_yellow_list, 1); @md_yellow_100: extract(@md_yellow_list, 2); @md_yellow_200: extract(@md_yellow_list, 3); @md_yellow_300: extract(@md_yellow_list, 4); @md_yellow_400: extract(@md_yellow_list, 5); @md_yellow_500: extract(@md_yellow_list, 6); @md_yellow_600: extract(@md_yellow_list, 7); @md_yellow_700: extract(@md_yellow_list, 8); @md_yellow_800: extract(@md_yellow_list, 9); @md_yellow_900: extract(@md_yellow_list, 10); @md_yellow_A100: extract(@md_yellow_list, 11); @md_yellow_A200: extract(@md_yellow_list, 12); @md_yellow_A400: extract(@md_yellow_list, 13); @md_yellow_A700: extract(@md_yellow_list, 14); // // Amber // @md_amber_list: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, #ffe57f, #ffd740, #ffc400, #ffab00; @md_amber: extract(@md_amber_list, 6); @md_amber_50: extract(@md_amber_list, 1); @md_amber_100: extract(@md_amber_list, 2); @md_amber_200: extract(@md_amber_list, 3); @md_amber_300: extract(@md_amber_list, 4); @md_amber_400: extract(@md_amber_list, 5); @md_amber_500: extract(@md_amber_list, 6); @md_amber_600: extract(@md_amber_list, 7); @md_amber_700: extract(@md_amber_list, 8); @md_amber_800: extract(@md_amber_list, 9); @md_amber_900: extract(@md_amber_list, 10); @md_amber_A100: extract(@md_amber_list, 11); @md_amber_A200: extract(@md_amber_list, 12); @md_amber_A400: extract(@md_amber_list, 13); @md_amber_A700: extract(@md_amber_list, 14); // // Orange // @md_orange_list: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, #ffd180, #ffab40, #ff9100, #ff6d00; @md_orange: extract(@md_orange_list, 6); @md_orange_50: extract(@md_orange_list, 1); @md_orange_100: extract(@md_orange_list, 2); @md_orange_200: extract(@md_orange_list, 3); @md_orange_300: extract(@md_orange_list, 4); @md_orange_400: extract(@md_orange_list, 5); @md_orange_500: extract(@md_orange_list, 6); @md_orange_600: extract(@md_orange_list, 7); @md_orange_700: extract(@md_orange_list, 8); @md_orange_800: extract(@md_orange_list, 9); @md_orange_900: extract(@md_orange_list, 10); @md_orange_A100: extract(@md_orange_list, 11); @md_orange_A200: extract(@md_orange_list, 12); @md_orange_A400: extract(@md_orange_list, 13); @md_orange_A700: extract(@md_orange_list, 14); // // Deep Orange // @md_deep_orange_list: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff5722, #f4511e, #e64a19, #d84315, #bf360c, #ff9e80, #ff6e40, #ff3d00, #dd2c00; @md_deep_orange: extract(@md_deep_orange_list, 6); @md_deep_orange_50: extract(@md_deep_orange_list, 1); @md_deep_orange_100: extract(@md_deep_orange_list, 2); @md_deep_orange_200: extract(@md_deep_orange_list, 3); @md_deep_orange_300: extract(@md_deep_orange_list, 4); @md_deep_orange_400: extract(@md_deep_orange_list, 5); @md_deep_orange_500: extract(@md_deep_orange_list, 6); @md_deep_orange_600: extract(@md_deep_orange_list, 7); @md_deep_orange_700: extract(@md_deep_orange_list, 8); @md_deep_orange_800: extract(@md_deep_orange_list, 9); @md_deep_orange_900: extract(@md_deep_orange_list, 10); @md_deep_orange_A100: extract(@md_deep_orange_list, 11); @md_deep_orange_A200: extract(@md_deep_orange_list, 12); @md_deep_orange_A400: extract(@md_deep_orange_list, 13); @md_deep_orange_A700: extract(@md_deep_orange_list, 14); // // Brown // @md_brown_list: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, #795548, #6d4c41, #5d4037, #4e342e, #3e2723; @md_brown: extract(@md_brown_list, 6); @md_brown_50: extract(@md_brown_list, 1); @md_brown_100: extract(@md_brown_list, 2); @md_brown_200: extract(@md_brown_list, 3); @md_brown_300: extract(@md_brown_list, 4); @md_brown_400: extract(@md_brown_list, 5); @md_brown_500: extract(@md_brown_list, 6); @md_brown_600: extract(@md_brown_list, 7); @md_brown_700: extract(@md_brown_list, 8); @md_brown_800: extract(@md_brown_list, 9); @md_brown_900: extract(@md_brown_list, 10); // // Grey // @md_grey_list: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121; @md_grey: extract(@md_grey_list, 6); @md_grey_50: extract(@md_grey_list, 1); @md_grey_100: extract(@md_grey_list, 2); @md_grey_200: extract(@md_grey_list, 3); @md_grey_300: extract(@md_grey_list, 4); @md_grey_400: extract(@md_grey_list, 5); @md_grey_500: extract(@md_grey_list, 6); @md_grey_600: extract(@md_grey_list, 7); @md_grey_700: extract(@md_grey_list, 8); @md_grey_800: extract(@md_grey_list, 9); @md_grey_900: extract(@md_grey_list, 10); // // Blue Grey // @md_blue_grey_list: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, #607d8b, #546e7a, #455a64, #37474f, #263238; @md_blue_grey: extract(@md_blue_grey_list, 6); @md_blue_grey_50: extract(@md_blue_grey_list, 1); @md_blue_grey_100: extract(@md_blue_grey_list, 2); @md_blue_grey_200: extract(@md_blue_grey_list, 3); @md_blue_grey_300: extract(@md_blue_grey_list, 4); @md_blue_grey_400: extract(@md_blue_grey_list, 5); @md_blue_grey_500: extract(@md_blue_grey_list, 6); @md_blue_grey_600: extract(@md_blue_grey_list, 7); @md_blue_grey_700: extract(@md_blue_grey_list, 8); @md_blue_grey_800: extract(@md_blue_grey_list, 9); @md_blue_grey_900: extract(@md_blue_grey_list, 10); // // Black // @md_black_list: #000; @md_black: extract(@md_blue_grey_list, 1); // // White // @md_white_list: #fff; @md_white: extract(@md_white_list, 1); // // List of all color names // @md_list_All: red, pink, purple, deep_purple, indigo, blue, light_blue, cyan, teal, green, light_green, lime, yellow, amber, orange, deep_orange, brown, grey, blue_grey, black, white; // // Typography // @md_ui_display_4: @md_grey_600; @md_ui_display_3: @md_grey_600; @md_ui_display_2: @md_grey_600; @md_ui_display_1: @md_grey_600; @md_ui_headline: @md_grey_900; @md_ui_title: @md_grey_900; @md_ui_subhead_1: @md_grey_900; @md_ui_body_2: @md_grey_900; @md_ui_body_1: @md_grey_900; @md_ui_caption: @md_grey_600; @md_ui_menu: @md_grey_900; @md_ui_button: @md_grey_900;