Last active
July 17, 2019 15:04
-
-
Save ytxmobile98/6f07aeb825d5e56034aa308a9e6cf3b8 to your computer and use it in GitHub Desktop.
Extract Google Material colors, and format them to be used in GIMP / Inkscape
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Google Material Design Colors | |
| Source: https://material.io/tools/color/ | |
| */ | |
| :root { | |
| --material-color-Black: #000000; | |
| --material-color-White: #FFFFFF; | |
| --material-color-Red-50: #FFEBEE; | |
| --material-color-Red-100: #FFCDD2; | |
| --material-color-Red-200: #EF9A9A; | |
| --material-color-Red-300: #E57373; | |
| --material-color-Red-400: #EF5350; | |
| --material-color-Red-500: #F44336; | |
| --material-color-Red-600: #E53935; | |
| --material-color-Red-700: #D32F2F; | |
| --material-color-Red-800: #C62828; | |
| --material-color-Red-900: #B71C1C; | |
| --material-color-Red-A100: #FF8A80; | |
| --material-color-Red-A200: #FF5252; | |
| --material-color-Red-A400: #FF1744; | |
| --material-color-Red-A700: #D50000; | |
| --material-color-Pink-50: #FCE4EC; | |
| --material-color-Pink-100: #F8BBD0; | |
| --material-color-Pink-200: #F48FB1; | |
| --material-color-Pink-300: #F06292; | |
| --material-color-Pink-400: #EC407A; | |
| --material-color-Pink-500: #E91E63; | |
| --material-color-Pink-600: #D81B60; | |
| --material-color-Pink-700: #C2185B; | |
| --material-color-Pink-800: #AD1457; | |
| --material-color-Pink-900: #880E4F; | |
| --material-color-Pink-A100: #FF80AB; | |
| --material-color-Pink-A200: #FF4081; | |
| --material-color-Pink-A400: #F50057; | |
| --material-color-Pink-A700: #C51162; | |
| --material-color-Purple-50: #F3E5F5; | |
| --material-color-Purple-100: #E1BEE7; | |
| --material-color-Purple-200: #CE93D8; | |
| --material-color-Purple-300: #BA68C8; | |
| --material-color-Purple-400: #AB47BC; | |
| --material-color-Purple-500: #9C27B0; | |
| --material-color-Purple-600: #8E24AA; | |
| --material-color-Purple-700: #7B1FA2; | |
| --material-color-Purple-800: #6A1B9A; | |
| --material-color-Purple-900: #4A148C; | |
| --material-color-Purple-A100: #EA80FC; | |
| --material-color-Purple-A200: #E040FB; | |
| --material-color-Purple-A400: #D500F9; | |
| --material-color-Purple-A700: #AA00FF; | |
| --material-color-Deep-Purple-50: #EDE7F6; | |
| --material-color-Deep-Purple-100: #D1C4E9; | |
| --material-color-Deep-Purple-200: #B39DDB; | |
| --material-color-Deep-Purple-300: #9575CD; | |
| --material-color-Deep-Purple-400: #7E57C2; | |
| --material-color-Deep-Purple-500: #673AB7; | |
| --material-color-Deep-Purple-600: #5E35B1; | |
| --material-color-Deep-Purple-700: #512DA8; | |
| --material-color-Deep-Purple-800: #4527A0; | |
| --material-color-Deep-Purple-900: #311B92; | |
| --material-color-Deep-Purple-A100: #B388FF; | |
| --material-color-Deep-Purple-A200: #7C4DFF; | |
| --material-color-Deep-Purple-A400: #651FFF; | |
| --material-color-Deep-Purple-A700: #6200EA; | |
| --material-color-Indigo-50: #E8EAF6; | |
| --material-color-Indigo-100: #C5CAE9; | |
| --material-color-Indigo-200: #9FA8DA; | |
| --material-color-Indigo-300: #7986CB; | |
| --material-color-Indigo-400: #5C6BC0; | |
| --material-color-Indigo-500: #3F51B5; | |
| --material-color-Indigo-600: #3949AB; | |
| --material-color-Indigo-700: #303F9F; | |
| --material-color-Indigo-800: #283593; | |
| --material-color-Indigo-900: #1A237E; | |
| --material-color-Indigo-A100: #8C9EFF; | |
| --material-color-Indigo-A200: #536DFE; | |
| --material-color-Indigo-A400: #3D5AFE; | |
| --material-color-Indigo-A700: #304FFE; | |
| --material-color-Blue-50: #E3F2FD; | |
| --material-color-Blue-100: #BBDEFB; | |
| --material-color-Blue-200: #90CAF9; | |
| --material-color-Blue-300: #64B5F6; | |
| --material-color-Blue-400: #42A5F5; | |
| --material-color-Blue-500: #2196F3; | |
| --material-color-Blue-600: #1E88E5; | |
| --material-color-Blue-700: #1976D2; | |
| --material-color-Blue-800: #1565C0; | |
| --material-color-Blue-900: #0D47A1; | |
| --material-color-Blue-A100: #82B1FF; | |
| --material-color-Blue-A200: #448AFF; | |
| --material-color-Blue-A400: #2979FF; | |
| --material-color-Blue-A700: #2962FF; | |
| --material-color-Light-Blue-50: #E1F5FE; | |
| --material-color-Light-Blue-100: #B3E5FC; | |
| --material-color-Light-Blue-200: #81D4FA; | |
| --material-color-Light-Blue-300: #4FC3F7; | |
| --material-color-Light-Blue-400: #29B6F6; | |
| --material-color-Light-Blue-500: #03A9F4; | |
| --material-color-Light-Blue-600: #039BE5; | |
| --material-color-Light-Blue-700: #0288D1; | |
| --material-color-Light-Blue-800: #0277BD; | |
| --material-color-Light-Blue-900: #01579B; | |
| --material-color-Light-Blue-A100: #80D8FF; | |
| --material-color-Light-Blue-A200: #40C4FF; | |
| --material-color-Light-Blue-A400: #00B0FF; | |
| --material-color-Light-Blue-A700: #0091EA; | |
| --material-color-Cyan-50: #E0F7FA; | |
| --material-color-Cyan-100: #B2EBF2; | |
| --material-color-Cyan-200: #80DEEA; | |
| --material-color-Cyan-300: #4DD0E1; | |
| --material-color-Cyan-400: #26C6DA; | |
| --material-color-Cyan-500: #00BCD4; | |
| --material-color-Cyan-600: #00ACC1; | |
| --material-color-Cyan-700: #0097A7; | |
| --material-color-Cyan-800: #00838F; | |
| --material-color-Cyan-900: #006064; | |
| --material-color-Cyan-A100: #84FFFF; | |
| --material-color-Cyan-A200: #18FFFF; | |
| --material-color-Cyan-A400: #00E5FF; | |
| --material-color-Cyan-A700: #00B8D4; | |
| --material-color-Teal-50: #E0F2F1; | |
| --material-color-Teal-100: #B2DFDB; | |
| --material-color-Teal-200: #80CBC4; | |
| --material-color-Teal-300: #4DB6AC; | |
| --material-color-Teal-400: #26A69A; | |
| --material-color-Teal-500: #009688; | |
| --material-color-Teal-600: #00897B; | |
| --material-color-Teal-700: #00796B; | |
| --material-color-Teal-800: #00695C; | |
| --material-color-Teal-900: #004D40; | |
| --material-color-Teal-A100: #A7FFEB; | |
| --material-color-Teal-A200: #64FFDA; | |
| --material-color-Teal-A400: #1DE9B6; | |
| --material-color-Teal-A700: #00BFA5; | |
| --material-color-Green-50: #E8F5E9; | |
| --material-color-Green-100: #C8E6C9; | |
| --material-color-Green-200: #A5D6A7; | |
| --material-color-Green-300: #81C784; | |
| --material-color-Green-400: #66BB6A; | |
| --material-color-Green-500: #4CAF50; | |
| --material-color-Green-600: #43A047; | |
| --material-color-Green-700: #388E3C; | |
| --material-color-Green-800: #2E7D32; | |
| --material-color-Green-900: #1B5E20; | |
| --material-color-Green-A100: #B9F6CA; | |
| --material-color-Green-A200: #69F0AE; | |
| --material-color-Green-A400: #00E676; | |
| --material-color-Green-A700: #00C853; | |
| --material-color-Light-Green-50: #F1F8E9; | |
| --material-color-Light-Green-100: #DCEDC8; | |
| --material-color-Light-Green-200: #C5E1A5; | |
| --material-color-Light-Green-300: #AED581; | |
| --material-color-Light-Green-400: #9CCC65; | |
| --material-color-Light-Green-500: #8BC34A; | |
| --material-color-Light-Green-600: #7CB342; | |
| --material-color-Light-Green-700: #689F38; | |
| --material-color-Light-Green-800: #558B2F; | |
| --material-color-Light-Green-900: #33691E; | |
| --material-color-Light-Green-A100: #CCFF90; | |
| --material-color-Light-Green-A200: #B2FF59; | |
| --material-color-Light-Green-A400: #76FF03; | |
| --material-color-Light-Green-A700: #64DD17; | |
| --material-color-Lime-50: #F9FBE7; | |
| --material-color-Lime-100: #F0F4C3; | |
| --material-color-Lime-200: #E6EE9C; | |
| --material-color-Lime-300: #DCE775; | |
| --material-color-Lime-400: #D4E157; | |
| --material-color-Lime-500: #CDDC39; | |
| --material-color-Lime-600: #C0CA33; | |
| --material-color-Lime-700: #AFB42B; | |
| --material-color-Lime-800: #9E9D24; | |
| --material-color-Lime-900: #827717; | |
| --material-color-Lime-A100: #F4FF81; | |
| --material-color-Lime-A200: #EEFF41; | |
| --material-color-Lime-A400: #C6FF00; | |
| --material-color-Lime-A700: #AEEA00; | |
| --material-color-Yellow-50: #FFFDE7; | |
| --material-color-Yellow-100: #FFF9C4; | |
| --material-color-Yellow-200: #FFF59D; | |
| --material-color-Yellow-300: #FFF176; | |
| --material-color-Yellow-400: #FFEE58; | |
| --material-color-Yellow-500: #FFEB3B; | |
| --material-color-Yellow-600: #FDD835; | |
| --material-color-Yellow-700: #FBC02D; | |
| --material-color-Yellow-800: #F9A825; | |
| --material-color-Yellow-900: #F57F17; | |
| --material-color-Yellow-A100: #FFFF8D; | |
| --material-color-Yellow-A200: #FFFF00; | |
| --material-color-Yellow-A400: #FFEA00; | |
| --material-color-Yellow-A700: #FFD600; | |
| --material-color-Amber-50: #FFF8E1; | |
| --material-color-Amber-100: #FFECB3; | |
| --material-color-Amber-200: #FFE082; | |
| --material-color-Amber-300: #FFD54F; | |
| --material-color-Amber-400: #FFCA28; | |
| --material-color-Amber-500: #FFC107; | |
| --material-color-Amber-600: #FFB300; | |
| --material-color-Amber-700: #FFA000; | |
| --material-color-Amber-800: #FF8F00; | |
| --material-color-Amber-900: #FF6F00; | |
| --material-color-Amber-A100: #FFE57F; | |
| --material-color-Amber-A200: #FFD740; | |
| --material-color-Amber-A400: #FFC400; | |
| --material-color-Amber-A700: #FFAB00; | |
| --material-color-Orange-50: #FFF3E0; | |
| --material-color-Orange-100: #FFE0B2; | |
| --material-color-Orange-200: #FFCC80; | |
| --material-color-Orange-300: #FFB74D; | |
| --material-color-Orange-400: #FFA726; | |
| --material-color-Orange-500: #FF9800; | |
| --material-color-Orange-600: #FB8C00; | |
| --material-color-Orange-700: #F57C00; | |
| --material-color-Orange-800: #EF6C00; | |
| --material-color-Orange-900: #E65100; | |
| --material-color-Orange-A100: #FFD180; | |
| --material-color-Orange-A200: #FFAB40; | |
| --material-color-Orange-A400: #FF9100; | |
| --material-color-Orange-A700: #FF6D00; | |
| --material-color-Deep-Orange-50: #FBE9E7; | |
| --material-color-Deep-Orange-100: #FFCCBC; | |
| --material-color-Deep-Orange-200: #FFAB91; | |
| --material-color-Deep-Orange-300: #FF8A65; | |
| --material-color-Deep-Orange-400: #FF7043; | |
| --material-color-Deep-Orange-500: #FF5722; | |
| --material-color-Deep-Orange-600: #F4511E; | |
| --material-color-Deep-Orange-700: #E64A19; | |
| --material-color-Deep-Orange-800: #D84315; | |
| --material-color-Deep-Orange-900: #BF360C; | |
| --material-color-Deep-Orange-A100: #FF9E80; | |
| --material-color-Deep-Orange-A200: #FF6E40; | |
| --material-color-Deep-Orange-A400: #FF3D00; | |
| --material-color-Deep-Orange-A700: #DD2C00; | |
| --material-color-Brown-50: #EFEBE9; | |
| --material-color-Brown-100: #D7CCC8; | |
| --material-color-Brown-200: #BCAAA4; | |
| --material-color-Brown-300: #A1887F; | |
| --material-color-Brown-400: #8D6E63; | |
| --material-color-Brown-500: #795548; | |
| --material-color-Brown-600: #6D4C41; | |
| --material-color-Brown-700: #5D4037; | |
| --material-color-Brown-800: #4E342E; | |
| --material-color-Brown-900: #3E2723; | |
| --material-color-Grey-50: #FAFAFA; | |
| --material-color-Grey-100: #F5F5F5; | |
| --material-color-Grey-200: #EEEEEE; | |
| --material-color-Grey-300: #E0E0E0; | |
| --material-color-Grey-400: #BDBDBD; | |
| --material-color-Grey-500: #9E9E9E; | |
| --material-color-Grey-600: #757575; | |
| --material-color-Grey-700: #616161; | |
| --material-color-Grey-800: #424242; | |
| --material-color-Grey-900: #212121; | |
| --material-color-Blue-Grey-50: #ECEFF1; | |
| --material-color-Blue-Grey-100: #CFD8DC; | |
| --material-color-Blue-Grey-200: #B0BEC5; | |
| --material-color-Blue-Grey-300: #90A4AE; | |
| --material-color-Blue-Grey-400: #78909C; | |
| --material-color-Blue-Grey-500: #607D8B; | |
| --material-color-Blue-Grey-600: #546E7A; | |
| --material-color-Blue-Grey-700: #455A64; | |
| --material-color-Blue-Grey-800: #37474F; | |
| --material-color-Blue-Grey-900: #263238; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| GIMP Palette | |
| Name: Google Material Design Colors | |
| # Source: https://material.io/tools/color/ | |
| 0 0 0 Black (#000000) | |
| 255 255 255 White (#FFFFFF) | |
| 255 235 238 Red 50 (#FFEBEE) | |
| 255 205 210 Red 100 (#FFCDD2) | |
| 239 154 154 Red 200 (#EF9A9A) | |
| 229 115 115 Red 300 (#E57373) | |
| 239 83 80 Red 400 (#EF5350) | |
| 244 67 54 Red 500 (#F44336) | |
| 229 57 53 Red 600 (#E53935) | |
| 211 47 47 Red 700 (#D32F2F) | |
| 198 40 40 Red 800 (#C62828) | |
| 183 28 28 Red 900 (#B71C1C) | |
| 255 138 128 Red A100 (#FF8A80) | |
| 255 82 82 Red A200 (#FF5252) | |
| 255 23 68 Red A400 (#FF1744) | |
| 213 0 0 Red A700 (#D50000) | |
| 252 228 236 Pink 50 (#FCE4EC) | |
| 248 187 208 Pink 100 (#F8BBD0) | |
| 244 143 177 Pink 200 (#F48FB1) | |
| 240 98 146 Pink 300 (#F06292) | |
| 236 64 122 Pink 400 (#EC407A) | |
| 233 30 99 Pink 500 (#E91E63) | |
| 216 27 96 Pink 600 (#D81B60) | |
| 194 24 91 Pink 700 (#C2185B) | |
| 173 20 87 Pink 800 (#AD1457) | |
| 136 14 79 Pink 900 (#880E4F) | |
| 255 128 171 Pink A100 (#FF80AB) | |
| 255 64 129 Pink A200 (#FF4081) | |
| 245 0 87 Pink A400 (#F50057) | |
| 197 17 98 Pink A700 (#C51162) | |
| 243 229 245 Purple 50 (#F3E5F5) | |
| 225 190 231 Purple 100 (#E1BEE7) | |
| 206 147 216 Purple 200 (#CE93D8) | |
| 186 104 200 Purple 300 (#BA68C8) | |
| 171 71 188 Purple 400 (#AB47BC) | |
| 156 39 176 Purple 500 (#9C27B0) | |
| 142 36 170 Purple 600 (#8E24AA) | |
| 123 31 162 Purple 700 (#7B1FA2) | |
| 106 27 154 Purple 800 (#6A1B9A) | |
| 74 20 140 Purple 900 (#4A148C) | |
| 234 128 252 Purple A100 (#EA80FC) | |
| 224 64 251 Purple A200 (#E040FB) | |
| 213 0 249 Purple A400 (#D500F9) | |
| 170 0 255 Purple A700 (#AA00FF) | |
| 237 231 246 Deep Purple 50 (#EDE7F6) | |
| 209 196 233 Deep Purple 100 (#D1C4E9) | |
| 179 157 219 Deep Purple 200 (#B39DDB) | |
| 149 117 205 Deep Purple 300 (#9575CD) | |
| 126 87 194 Deep Purple 400 (#7E57C2) | |
| 103 58 183 Deep Purple 500 (#673AB7) | |
| 94 53 177 Deep Purple 600 (#5E35B1) | |
| 81 45 168 Deep Purple 700 (#512DA8) | |
| 69 39 160 Deep Purple 800 (#4527A0) | |
| 49 27 146 Deep Purple 900 (#311B92) | |
| 179 136 255 Deep Purple A100 (#B388FF) | |
| 124 77 255 Deep Purple A200 (#7C4DFF) | |
| 101 31 255 Deep Purple A400 (#651FFF) | |
| 98 0 234 Deep Purple A700 (#6200EA) | |
| 232 234 246 Indigo 50 (#E8EAF6) | |
| 197 202 233 Indigo 100 (#C5CAE9) | |
| 159 168 218 Indigo 200 (#9FA8DA) | |
| 121 134 203 Indigo 300 (#7986CB) | |
| 92 107 192 Indigo 400 (#5C6BC0) | |
| 63 81 181 Indigo 500 (#3F51B5) | |
| 57 73 171 Indigo 600 (#3949AB) | |
| 48 63 159 Indigo 700 (#303F9F) | |
| 40 53 147 Indigo 800 (#283593) | |
| 26 35 126 Indigo 900 (#1A237E) | |
| 140 158 255 Indigo A100 (#8C9EFF) | |
| 83 109 254 Indigo A200 (#536DFE) | |
| 61 90 254 Indigo A400 (#3D5AFE) | |
| 48 79 254 Indigo A700 (#304FFE) | |
| 227 242 253 Blue 50 (#E3F2FD) | |
| 187 222 251 Blue 100 (#BBDEFB) | |
| 144 202 249 Blue 200 (#90CAF9) | |
| 100 181 246 Blue 300 (#64B5F6) | |
| 66 165 245 Blue 400 (#42A5F5) | |
| 33 150 243 Blue 500 (#2196F3) | |
| 30 136 229 Blue 600 (#1E88E5) | |
| 25 118 210 Blue 700 (#1976D2) | |
| 21 101 192 Blue 800 (#1565C0) | |
| 13 71 161 Blue 900 (#0D47A1) | |
| 130 177 255 Blue A100 (#82B1FF) | |
| 68 138 255 Blue A200 (#448AFF) | |
| 41 121 255 Blue A400 (#2979FF) | |
| 41 98 255 Blue A700 (#2962FF) | |
| 225 245 254 Light Blue 50 (#E1F5FE) | |
| 179 229 252 Light Blue 100 (#B3E5FC) | |
| 129 212 250 Light Blue 200 (#81D4FA) | |
| 79 195 247 Light Blue 300 (#4FC3F7) | |
| 41 182 246 Light Blue 400 (#29B6F6) | |
| 3 169 244 Light Blue 500 (#03A9F4) | |
| 3 155 229 Light Blue 600 (#039BE5) | |
| 2 136 209 Light Blue 700 (#0288D1) | |
| 2 119 189 Light Blue 800 (#0277BD) | |
| 1 87 155 Light Blue 900 (#01579B) | |
| 128 216 255 Light Blue A100 (#80D8FF) | |
| 64 196 255 Light Blue A200 (#40C4FF) | |
| 0 176 255 Light Blue A400 (#00B0FF) | |
| 0 145 234 Light Blue A700 (#0091EA) | |
| 224 247 250 Cyan 50 (#E0F7FA) | |
| 178 235 242 Cyan 100 (#B2EBF2) | |
| 128 222 234 Cyan 200 (#80DEEA) | |
| 77 208 225 Cyan 300 (#4DD0E1) | |
| 38 198 218 Cyan 400 (#26C6DA) | |
| 0 188 212 Cyan 500 (#00BCD4) | |
| 0 172 193 Cyan 600 (#00ACC1) | |
| 0 151 167 Cyan 700 (#0097A7) | |
| 0 131 143 Cyan 800 (#00838F) | |
| 0 96 100 Cyan 900 (#006064) | |
| 132 255 255 Cyan A100 (#84FFFF) | |
| 24 255 255 Cyan A200 (#18FFFF) | |
| 0 229 255 Cyan A400 (#00E5FF) | |
| 0 184 212 Cyan A700 (#00B8D4) | |
| 224 242 241 Teal 50 (#E0F2F1) | |
| 178 223 219 Teal 100 (#B2DFDB) | |
| 128 203 196 Teal 200 (#80CBC4) | |
| 77 182 172 Teal 300 (#4DB6AC) | |
| 38 166 154 Teal 400 (#26A69A) | |
| 0 150 136 Teal 500 (#009688) | |
| 0 137 123 Teal 600 (#00897B) | |
| 0 121 107 Teal 700 (#00796B) | |
| 0 105 92 Teal 800 (#00695C) | |
| 0 77 64 Teal 900 (#004D40) | |
| 167 255 235 Teal A100 (#A7FFEB) | |
| 100 255 218 Teal A200 (#64FFDA) | |
| 29 233 182 Teal A400 (#1DE9B6) | |
| 0 191 165 Teal A700 (#00BFA5) | |
| 232 245 233 Green 50 (#E8F5E9) | |
| 200 230 201 Green 100 (#C8E6C9) | |
| 165 214 167 Green 200 (#A5D6A7) | |
| 129 199 132 Green 300 (#81C784) | |
| 102 187 106 Green 400 (#66BB6A) | |
| 76 175 80 Green 500 (#4CAF50) | |
| 67 160 71 Green 600 (#43A047) | |
| 56 142 60 Green 700 (#388E3C) | |
| 46 125 50 Green 800 (#2E7D32) | |
| 27 94 32 Green 900 (#1B5E20) | |
| 185 246 202 Green A100 (#B9F6CA) | |
| 105 240 174 Green A200 (#69F0AE) | |
| 0 230 118 Green A400 (#00E676) | |
| 0 200 83 Green A700 (#00C853) | |
| 241 248 233 Light Green 50 (#F1F8E9) | |
| 220 237 200 Light Green 100 (#DCEDC8) | |
| 197 225 165 Light Green 200 (#C5E1A5) | |
| 174 213 129 Light Green 300 (#AED581) | |
| 156 204 101 Light Green 400 (#9CCC65) | |
| 139 195 74 Light Green 500 (#8BC34A) | |
| 124 179 66 Light Green 600 (#7CB342) | |
| 104 159 56 Light Green 700 (#689F38) | |
| 85 139 47 Light Green 800 (#558B2F) | |
| 51 105 30 Light Green 900 (#33691E) | |
| 204 255 144 Light Green A100 (#CCFF90) | |
| 178 255 89 Light Green A200 (#B2FF59) | |
| 118 255 3 Light Green A400 (#76FF03) | |
| 100 221 23 Light Green A700 (#64DD17) | |
| 249 251 231 Lime 50 (#F9FBE7) | |
| 240 244 195 Lime 100 (#F0F4C3) | |
| 230 238 156 Lime 200 (#E6EE9C) | |
| 220 231 117 Lime 300 (#DCE775) | |
| 212 225 87 Lime 400 (#D4E157) | |
| 205 220 57 Lime 500 (#CDDC39) | |
| 192 202 51 Lime 600 (#C0CA33) | |
| 175 180 43 Lime 700 (#AFB42B) | |
| 158 157 36 Lime 800 (#9E9D24) | |
| 130 119 23 Lime 900 (#827717) | |
| 244 255 129 Lime A100 (#F4FF81) | |
| 238 255 65 Lime A200 (#EEFF41) | |
| 198 255 0 Lime A400 (#C6FF00) | |
| 174 234 0 Lime A700 (#AEEA00) | |
| 255 253 231 Yellow 50 (#FFFDE7) | |
| 255 249 196 Yellow 100 (#FFF9C4) | |
| 255 245 157 Yellow 200 (#FFF59D) | |
| 255 241 118 Yellow 300 (#FFF176) | |
| 255 238 88 Yellow 400 (#FFEE58) | |
| 255 235 59 Yellow 500 (#FFEB3B) | |
| 253 216 53 Yellow 600 (#FDD835) | |
| 251 192 45 Yellow 700 (#FBC02D) | |
| 249 168 37 Yellow 800 (#F9A825) | |
| 245 127 23 Yellow 900 (#F57F17) | |
| 255 255 141 Yellow A100 (#FFFF8D) | |
| 255 255 0 Yellow A200 (#FFFF00) | |
| 255 234 0 Yellow A400 (#FFEA00) | |
| 255 214 0 Yellow A700 (#FFD600) | |
| 255 248 225 Amber 50 (#FFF8E1) | |
| 255 236 179 Amber 100 (#FFECB3) | |
| 255 224 130 Amber 200 (#FFE082) | |
| 255 213 79 Amber 300 (#FFD54F) | |
| 255 202 40 Amber 400 (#FFCA28) | |
| 255 193 7 Amber 500 (#FFC107) | |
| 255 179 0 Amber 600 (#FFB300) | |
| 255 160 0 Amber 700 (#FFA000) | |
| 255 143 0 Amber 800 (#FF8F00) | |
| 255 111 0 Amber 900 (#FF6F00) | |
| 255 229 127 Amber A100 (#FFE57F) | |
| 255 215 64 Amber A200 (#FFD740) | |
| 255 196 0 Amber A400 (#FFC400) | |
| 255 171 0 Amber A700 (#FFAB00) | |
| 255 243 224 Orange 50 (#FFF3E0) | |
| 255 224 178 Orange 100 (#FFE0B2) | |
| 255 204 128 Orange 200 (#FFCC80) | |
| 255 183 77 Orange 300 (#FFB74D) | |
| 255 167 38 Orange 400 (#FFA726) | |
| 255 152 0 Orange 500 (#FF9800) | |
| 251 140 0 Orange 600 (#FB8C00) | |
| 245 124 0 Orange 700 (#F57C00) | |
| 239 108 0 Orange 800 (#EF6C00) | |
| 230 81 0 Orange 900 (#E65100) | |
| 255 209 128 Orange A100 (#FFD180) | |
| 255 171 64 Orange A200 (#FFAB40) | |
| 255 145 0 Orange A400 (#FF9100) | |
| 255 109 0 Orange A700 (#FF6D00) | |
| 251 233 231 Deep Orange 50 (#FBE9E7) | |
| 255 204 188 Deep Orange 100 (#FFCCBC) | |
| 255 171 145 Deep Orange 200 (#FFAB91) | |
| 255 138 101 Deep Orange 300 (#FF8A65) | |
| 255 112 67 Deep Orange 400 (#FF7043) | |
| 255 87 34 Deep Orange 500 (#FF5722) | |
| 244 81 30 Deep Orange 600 (#F4511E) | |
| 230 74 25 Deep Orange 700 (#E64A19) | |
| 216 67 21 Deep Orange 800 (#D84315) | |
| 191 54 12 Deep Orange 900 (#BF360C) | |
| 255 158 128 Deep Orange A100 (#FF9E80) | |
| 255 110 64 Deep Orange A200 (#FF6E40) | |
| 255 61 0 Deep Orange A400 (#FF3D00) | |
| 221 44 0 Deep Orange A700 (#DD2C00) | |
| 239 235 233 Brown 50 (#EFEBE9) | |
| 215 204 200 Brown 100 (#D7CCC8) | |
| 188 170 164 Brown 200 (#BCAAA4) | |
| 161 136 127 Brown 300 (#A1887F) | |
| 141 110 99 Brown 400 (#8D6E63) | |
| 121 85 72 Brown 500 (#795548) | |
| 109 76 65 Brown 600 (#6D4C41) | |
| 93 64 55 Brown 700 (#5D4037) | |
| 78 52 46 Brown 800 (#4E342E) | |
| 62 39 35 Brown 900 (#3E2723) | |
| 250 250 250 Grey 50 (#FAFAFA) | |
| 245 245 245 Grey 100 (#F5F5F5) | |
| 238 238 238 Grey 200 (#EEEEEE) | |
| 224 224 224 Grey 300 (#E0E0E0) | |
| 189 189 189 Grey 400 (#BDBDBD) | |
| 158 158 158 Grey 500 (#9E9E9E) | |
| 117 117 117 Grey 600 (#757575) | |
| 97 97 97 Grey 700 (#616161) | |
| 66 66 66 Grey 800 (#424242) | |
| 33 33 33 Grey 900 (#212121) | |
| 236 239 241 Blue Grey 50 (#ECEFF1) | |
| 207 216 220 Blue Grey 100 (#CFD8DC) | |
| 176 190 197 Blue Grey 200 (#B0BEC5) | |
| 144 164 174 Blue Grey 300 (#90A4AE) | |
| 120 144 156 Blue Grey 400 (#78909C) | |
| 96 125 139 Blue Grey 500 (#607D8B) | |
| 84 110 122 Blue Grey 600 (#546E7A) | |
| 69 90 100 Blue Grey 700 (#455A64) | |
| 55 71 79 Blue Grey 800 (#37474F) | |
| 38 50 56 Blue Grey 900 (#263238) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| /* This is a utility to extract material design colors for the use in Inkscape/GIMP and CSS. | |
| URL: https://material.io/tools/color/ | |
| How to run: | |
| 1. Using FireFox, open the URL above | |
| 2. Press F12 to open the console | |
| 3. Open scratch pad from the console | |
| 4. Load this file | |
| 5. Press "Run" | |
| */ | |
| // Obtained from FireFox console, using "right click -> Copy -> CSS Path" | |
| const nodeList = document.querySelectorAll("html.ng-scope body div.ng-scope div.main-view.ng-scope div.tabs__container.tabs__container__right md-tabs.ng-isolate-scope md-tabs-content-wrapper._md md-tab-content#tab-content-3._md.ng-scope.md-active div.ng-scope.ng-isolate-scope md-content.ui-content-view.md-padding.ng-scope div.material-palette div.labels-and-palettes div.palettes ul.palette-container.ng-scope li.color.ng-scope"); | |
| const nodes = Array.from(nodeList.values()); | |
| const printRGB = (rgbArray) => { | |
| const RGBStr = rgbArray.map((item) => { | |
| item = Number(item); | |
| if (item < 10) { | |
| item = String(` ${item}`); | |
| } | |
| else if (item < 100) { | |
| item = String(` ${item}`); | |
| } | |
| else { | |
| item = String(item); | |
| } | |
| return item; | |
| }).join(" "); | |
| return RGBStr; | |
| } | |
| const GIMPColorArray = []; | |
| const CSSVarArray = []; | |
| for (let node of nodes) { | |
| const bgColor = node.style.backgroundColor; | |
| const bgColorRGB = bgColor.split(/rgb\(|, |\)/g).slice(1, 4); | |
| const bgColorRGBStr = printRGB(bgColorRGB); | |
| const colorName = node.attributes[2].value; | |
| const colorHex = node.attributes[10].value; | |
| GIMPColorArray.push(`${bgColorRGBStr} ${colorName} (${colorHex})`); | |
| CSSVarArray.push(`--material-color-${colorName.replace(/ /g, "-")}: ${colorHex};`); | |
| } | |
| const GIMPColorText = GIMPColorArray.join("\n"); | |
| const GIMPOutput = `GIMP Palette | |
| Name: Google Material Design Colors | |
| # Source: https://material.io/tools/color/ | |
| 0 0 0 Black (#000000) | |
| 255 255 255 White (#FFFFFF) | |
| ${GIMPColorText} | |
| `; | |
| console.log(GIMPOutput); | |
| const CSSVarText = CSSVarArray.join("\n\t"); | |
| const CSSOutput = `/* Google Material Design Colors | |
| Source: https://material.io/tools/color/ | |
| */ | |
| :root { | |
| --material-color-Black: #000000; | |
| --material-color-White: #FFFFFF; | |
| ${CSSVarText} | |
| } | |
| `; | |
| console.log(CSSOutput); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment