-
-
Save kiley0/756bf555c5a7ae17b8d03596ae364712 to your computer and use it in GitHub Desktop.
const mdColors = [ | |
'#F44336', | |
'#FFEBEE', | |
'#FFCDD2', | |
'#EF9A9A', | |
'#E57373', | |
'#EF5350', | |
'#F44336', | |
'#E53935', | |
'#D32F2F', | |
'#C62828', | |
'#B71C1C', | |
'#FF8A80', | |
'#FF5252', | |
'#FF1744', | |
'#D50000', | |
'#E91E63', | |
'#FCE4EC', | |
'#F8BBD0', | |
'#F48FB1', | |
'#F06292', | |
'#EC407A', | |
'#E91E63', | |
'#D81B60', | |
'#C2185B', | |
'#AD1457', | |
'#880E4F', | |
'#FF80AB', | |
'#FF4081', | |
'#F50057', | |
'#C51162', | |
'#9C27B0', | |
'#F3E5F5', | |
'#E1BEE7', | |
'#CE93D8', | |
'#BA68C8', | |
'#AB47BC', | |
'#9C27B0', | |
'#8E24AA', | |
'#7B1FA2', | |
'#6A1B9A', | |
'#4A148C', | |
'#EA80FC', | |
'#E040FB', | |
'#D500F9', | |
'#AA00FF', | |
'#673AB7', | |
'#EDE7F6', | |
'#D1C4E9', | |
'#B39DDB', | |
'#9575CD', | |
'#7E57C2', | |
'#673AB7', | |
'#5E35B1', | |
'#512DA8', | |
'#4527A0', | |
'#311B92', | |
'#B388FF', | |
'#7C4DFF', | |
'#651FFF', | |
'#6200EA', | |
'#3F51B5', | |
'#E8EAF6', | |
'#C5CAE9', | |
'#9FA8DA', | |
'#7986CB', | |
'#5C6BC0', | |
'#3F51B5', | |
'#3949AB', | |
'#303F9F', | |
'#283593', | |
'#1A237E', | |
'#8C9EFF', | |
'#536DFE', | |
'#3D5AFE', | |
'#304FFE', | |
'#2196F3', | |
'#E3F2FD', | |
'#BBDEFB', | |
'#90CAF9', | |
'#64B5F6', | |
'#42A5F5', | |
'#2196F3', | |
'#1E88E5', | |
'#1976D2', | |
'#1565C0', | |
'#0D47A1', | |
'#82B1FF', | |
'#448AFF', | |
'#2979FF', | |
'#2962FF', | |
'#03A9F4', | |
'#E1F5FE', | |
'#B3E5FC', | |
'#81D4FA', | |
'#4FC3F7', | |
'#29B6F6', | |
'#03A9F4', | |
'#039BE5', | |
'#0288D1', | |
'#0277BD', | |
'#01579B', | |
'#80D8FF', | |
'#40C4FF', | |
'#00B0FF', | |
'#0091EA', | |
'#00BCD4', | |
'#E0F7FA', | |
'#B2EBF2', | |
'#80DEEA', | |
'#4DD0E1', | |
'#26C6DA', | |
'#00BCD4', | |
'#00ACC1', | |
'#0097A7', | |
'#00838F', | |
'#006064', | |
'#84FFFF', | |
'#18FFFF', | |
'#00E5FF', | |
'#00B8D4', | |
'#009688', | |
'#E0F2F1', | |
'#B2DFDB', | |
'#80CBC4', | |
'#4DB6AC', | |
'#26A69A', | |
'#009688', | |
'#00897B', | |
'#00796B', | |
'#00695C', | |
'#004D40', | |
'#A7FFEB', | |
'#64FFDA', | |
'#1DE9B6', | |
'#00BFA5', | |
'#4CAF50', | |
'#E8F5E9', | |
'#C8E6C9', | |
'#A5D6A7', | |
'#81C784', | |
'#66BB6A', | |
'#4CAF50', | |
'#43A047', | |
'#388E3C', | |
'#2E7D32', | |
'#1B5E20', | |
'#B9F6CA', | |
'#69F0AE', | |
'#00E676', | |
'#00C853', | |
'#8BC34A', | |
'#F1F8E9', | |
'#DCEDC8', | |
'#C5E1A5', | |
'#AED581', | |
'#9CCC65', | |
'#8BC34A', | |
'#7CB342', | |
'#689F38', | |
'#558B2F', | |
'#33691E', | |
'#CCFF90', | |
'#B2FF59', | |
'#76FF03', | |
'#64DD17', | |
'#CDDC39', | |
'#F9FBE7', | |
'#F0F4C3', | |
'#E6EE9C', | |
'#DCE775', | |
'#D4E157', | |
'#CDDC39', | |
'#C0CA33', | |
'#AFB42B', | |
'#9E9D24', | |
'#827717', | |
'#F4FF81', | |
'#EEFF41', | |
'#C6FF00', | |
'#AEEA00', | |
'#FFEB3B', | |
'#FFFDE7', | |
'#FFF9C4', | |
'#FFF59D', | |
'#FFF176', | |
'#FFEE58', | |
'#FFEB3B', | |
'#FDD835', | |
'#FBC02D', | |
'#F9A825', | |
'#F57F17', | |
'#FFFF8D', | |
'#FFFF00', | |
'#FFEA00', | |
'#FFD600', | |
'#FFC107', | |
'#FFF8E1', | |
'#FFECB3', | |
'#FFE082', | |
'#FFD54F', | |
'#FFCA28', | |
'#FFC107', | |
'#FFB300', | |
'#FFA000', | |
'#FF8F00', | |
'#FF6F00', | |
'#FFE57F', | |
'#FFD740', | |
'#FFC400', | |
'#FFAB00', | |
'#FF9800', | |
'#FFF3E0', | |
'#FFE0B2', | |
'#FFCC80', | |
'#FFB74D', | |
'#FFA726', | |
'#FF9800', | |
'#FB8C00', | |
'#F57C00', | |
'#EF6C00', | |
'#E65100', | |
'#FFD180', | |
'#FFAB40', | |
'#FF9100', | |
'#FF6D00', | |
'#FF5722', | |
'#FBE9E7', | |
'#FFCCBC', | |
'#FFAB91', | |
'#FF8A65', | |
'#FF7043', | |
'#FF5722', | |
'#F4511E', | |
'#E64A19', | |
'#D84315', | |
'#BF360C', | |
'#FF9E80', | |
'#FF6E40', | |
'#FF3D00', | |
'#DD2C00', | |
'#795548', | |
'#EFEBE9', | |
'#D7CCC8', | |
'#BCAAA4', | |
'#A1887F', | |
'#8D6E63', | |
'#795548', | |
'#6D4C41', | |
'#5D4037', | |
'#4E342E', | |
'#3E2723', | |
'#9E9E9E', | |
'#FAFAFA', | |
'#F5F5F5', | |
'#EEEEEE', | |
'#E0E0E0', | |
'#BDBDBD', | |
'#9E9E9E', | |
'#757575', | |
'#616161', | |
'#424242', | |
'#212121', | |
'#607D8B', | |
'#ECEFF1', | |
'#CFD8DC', | |
'#B0BEC5', | |
'#90A4AE', | |
'#78909C', | |
'#607D8B', | |
'#546E7A', | |
'#455A64', | |
'#37474F', | |
'#263238', | |
'#000000', | |
'#FFFFFF', | |
]; |
darken = {
'#546E7A' : "darken-1",
Cool. Why did you choose to invert the object key-value pairs? @zekageri
darken = {
"darken-1":"#546E7A",
I don't know. It would have been better in reverse. :'D
I don't know. It would have been better in reverse. :'D
Alright
Used some code to convert the OOP variant above into one organized with the naming and numbering standards used in the material.io color tool.
Hope this helps someone!
var matColors = {
"Amber" = {
50 : '#fff8e1',
100 : '#ffecb3',
200 : '#ffe082',
300 : '#ffd54f',
400 : '#ffca28',
500 : '#ffc107',
600 : '#ffb300',
700 : '#ffa000',
800 : '#ff8f00',
900 : '#ff6f00',
},
"Blue Grey" = {
50 : '#ECEFF1',
100 : '#CFD8DC',
200 : '#B0BEC5',
300 : '#90A4AE',
400 : '#78909C',
500 : '#607D8B',
600 : '#546E7A',
700 : '#455A64',
800 : '#37474F',
900 : '#263238',
},
"Blue" = {
50 : '#E3F2FD',
100 : '#BBDEFB',
200 : '#90CAF9',
300 : '#64B5F6',
400 : '#42A5F5',
500 : '#2196F3',
600 : '#1E88E5',
700 : '#1976D2',
800 : '#1565C0',
900 : '#0D47A1',
},
"Brown" = {
50 : '#EFEBE9',
100 : '#D7CCC8',
200 : '#BCAAA4',
300 : '#A1887F',
400 : '#8D6E63',
500 : '#795548',
600 : '#6D4C41',
700 : '#5D4037',
800 : '#4E342E',
900 : '#3E2723',
},
"Cyan" = {
50 : '#E0F7FA',
100 : '#B2EBF2',
200 : '#80DEEA',
300 : '#4DD0E1',
400 : '#26C6DA',
500 : '#00BCD4',
600 : '#00ACC1',
700 : '#0097A7',
800 : '#00838F',
900 : '#006064',
},
"Deep Orange" = {
50 : '#FBE9E7',
100 : '#FFCCBC',
200 : '#FFAB91',
300 : '#FF8A65',
400 : '#FF7043',
500 : '#FF5722',
600 : '#F4511E',
700 : '#E64A19',
800 : '#D84315',
900 : '#BF360C',
},
"Deep Purple" = {
50 : '#EDE7F6',
100 : '#D1C4E9',
200 : '#B39DDB',
300 : '#9575CD',
400 : '#7E57C2',
500 : '#673AB7',
600 : '#5E35B1',
700 : '#512DA8',
800 : '#4527A0',
900 : '#311B92',
},
"Green" = {
50 : '#E8F5E9',
100 : '#C8E6C9',
200 : '#A5D6A7',
300 : '#81C784',
400 : '#66BB6A',
500 : '#4CAF50',
600 : '#43A047',
700 : '#388E3C',
800 : '#2E7D32',
900 : '#1B5E20',
},
"Grey" = {
50 : '#FAFAFA',
100 : '#F5F5F5',
200 : '#EEEEEE',
300 : '#E0E0E0',
400 : '#BDBDBD',
500 : '#9E9E9E',
600 : '#757575',
700 : '#616161',
800 : '#424242',
900 : '#212121',
},
"Indigo" = {
50 : '#E8EAF6',
100 : '#C5CAE9',
200 : '#9FA8DA',
300 : '#7986CB',
400 : '#5C6BC0',
500 : '#3F51B5',
600 : '#3949AB',
700 : '#303F9F',
800 : '#283593',
900 : '#1A237E',
},
"Light Blue" = {
50 : '#E1F5FE',
100 : '#B3E5FC',
200 : '#81D4FA',
300 : '#4FC3F7',
400 : '#29B6F6',
500 : '#03A9F4',
600 : '#039BE5',
700 : '#0288D1',
800 : '#0277BD',
900 : '#01579B',
},
"Light Green" = {
50 : '#F1F8E9',
100 : '#DCEDC8',
200 : '#C5E1A5',
300 : '#AED581',
400 : '#9CCC65',
500 : '#8BC34A',
600 : '#7CB342',
700 : '#689F38',
800 : '#558B2F',
900 : '#33691E',
},
"Lime" = {
50 : '#F9FBE7',
100 : '#F0F4C3',
200 : '#E6EE9C',
300 : '#DCE775',
400 : '#D4E157',
500 : '#CDDC39',
600 : '#C0CA33',
700 : '#AFB42B',
800 : '#9E9D24',
900 : '#827717',
},
"Orange" = {
50 : '#FFF3E0',
100 : '#FFE0B2',
200 : '#FFCC80',
300 : '#FFB74D',
400 : '#FFA726',
500 : '#FF9800',
600 : '#FB8C00',
700 : '#F57C00',
800 : '#EF6C00',
900 : '#E65100',
},
"Pink" = {
50 : '#FCE4EC',
100 : '#F8BBD0',
200 : '#F48FB1',
300 : '#F06292',
400 : '#EC407A',
500 : '#E91E63',
600 : '#D81B60',
700 : '#C2185B',
800 : '#AD1457',
900 : '#880E4F',
},
"Purple" = {
50 : '#F3E5F5',
100 : '#E1BEE7',
200 : '#CE93D8',
300 : '#BA68C8',
400 : '#AB47BC',
500 : '#9C27B0',
600 : '#8E24AA',
700 : '#7B1FA2',
800 : '#6A1B9A',
900 : '#4A148C',
},
"Red" = {
50 : '#FFEBEE',
100 : '#FFCDD2',
200 : '#EF9A9A',
300 : '#E57373',
500 : '#F44336',
600 : '#E53935',
700 : '#D32F2F',
800 : '#C62828',
900 : '#B71C1C',
},
"Teal" = {
50 : '#E0F2F1',
100 : '#B2DFDB',
200 : '#80CBC4',
300 : '#4DB6AC',
400 : '#26A69A',
500 : '#009688',
600 : '#00897B',
700 : '#00796B',
800 : '#00695C',
900 : '#004D40',
},
"Yellow" = {
50 : '#FFFDE7',
100 : '#FFF9C4',
200 : '#FFF59D',
300 : '#FFF176',
400 : '#FFEE58',
500 : '#FFEB3B',
600 : '#FDD835',
700 : '#FBC02D',
800 : '#F9A825',
900 : '#F57F17',
}
}
Hope this helps someone!
Yeah, it sure will.
Here a TypeScript version
export type Color =
| 'Amber'
| 'Blue Grey'
| 'Blue'
| 'Brown'
| 'Cyan'
| 'Deep Orange'
| 'Deep Purple'
| 'Green'
| 'Grey'
| 'Indigo'
| 'Light Blue'
| 'Light Green'
| 'Lime'
| 'Orange'
| 'Pink'
| 'Purple'
| 'Red'
| 'Teal'
| 'Yellow';
export type Shades =
| '50'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| '900';
export type Colors = { [key in Color]: { [shade in Shades]: string } };
export const colors: Colors = {
Amber: {
50: '#fff8e1',
100: '#ffecb3',
200: '#ffe082',
300: '#ffd54f',
400: '#ffca28',
500: '#ffc107',
600: '#ffb300',
700: '#ffa000',
800: '#ff8f00',
900: '#ff6f00',
},
'Blue Grey': {
50: '#ECEFF1',
100: '#CFD8DC',
200: '#B0BEC5',
300: '#90A4AE',
400: '#78909C',
500: '#607D8B',
600: '#546E7A',
700: '#455A64',
800: '#37474F',
900: '#263238',
},
Blue: {
50: '#E3F2FD',
100: '#BBDEFB',
200: '#90CAF9',
300: '#64B5F6',
400: '#42A5F5',
500: '#2196F3',
600: '#1E88E5',
700: '#1976D2',
800: '#1565C0',
900: '#0D47A1',
},
Brown: {
50: '#EFEBE9',
100: '#D7CCC8',
200: '#BCAAA4',
300: '#A1887F',
400: '#8D6E63',
500: '#795548',
600: '#6D4C41',
700: '#5D4037',
800: '#4E342E',
900: '#3E2723',
},
Cyan: {
50: '#E0F7FA',
100: '#B2EBF2',
200: '#80DEEA',
300: '#4DD0E1',
400: '#26C6DA',
500: '#00BCD4',
600: '#00ACC1',
700: '#0097A7',
800: '#00838F',
900: '#006064',
},
'Deep Orange': {
50: '#FBE9E7',
100: '#FFCCBC',
200: '#FFAB91',
300: '#FF8A65',
400: '#FF7043',
500: '#FF5722',
600: '#F4511E',
700: '#E64A19',
800: '#D84315',
900: '#BF360C',
},
'Deep Purple': {
50: '#EDE7F6',
100: '#D1C4E9',
200: '#B39DDB',
300: '#9575CD',
400: '#7E57C2',
500: '#673AB7',
600: '#5E35B1',
700: '#512DA8',
800: '#4527A0',
900: '#311B92',
},
Green: {
50: '#E8F5E9',
100: '#C8E6C9',
200: '#A5D6A7',
300: '#81C784',
400: '#66BB6A',
500: '#4CAF50',
600: '#43A047',
700: '#388E3C',
800: '#2E7D32',
900: '#1B5E20',
},
Grey: {
50: '#FAFAFA',
100: '#F5F5F5',
200: '#EEEEEE',
300: '#E0E0E0',
400: '#BDBDBD',
500: '#9E9E9E',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
},
Indigo: {
50: '#E8EAF6',
100: '#C5CAE9',
200: '#9FA8DA',
300: '#7986CB',
400: '#5C6BC0',
500: '#3F51B5',
600: '#3949AB',
700: '#303F9F',
800: '#283593',
900: '#1A237E',
},
'Light Blue': {
50: '#E1F5FE',
100: '#B3E5FC',
200: '#81D4FA',
300: '#4FC3F7',
400: '#29B6F6',
500: '#03A9F4',
600: '#039BE5',
700: '#0288D1',
800: '#0277BD',
900: '#01579B',
},
'Light Green': {
50: '#F1F8E9',
100: '#DCEDC8',
200: '#C5E1A5',
300: '#AED581',
400: '#9CCC65',
500: '#8BC34A',
600: '#7CB342',
700: '#689F38',
800: '#558B2F',
900: '#33691E',
},
Lime: {
50: '#F9FBE7',
100: '#F0F4C3',
200: '#E6EE9C',
300: '#DCE775',
400: '#D4E157',
500: '#CDDC39',
600: '#C0CA33',
700: '#AFB42B',
800: '#9E9D24',
900: '#827717',
},
Orange: {
50: '#FFF3E0',
100: '#FFE0B2',
200: '#FFCC80',
300: '#FFB74D',
400: '#FFA726',
500: '#FF9800',
600: '#FB8C00',
700: '#F57C00',
800: '#EF6C00',
900: '#E65100',
},
Pink: {
50: '#FCE4EC',
100: '#F8BBD0',
200: '#F48FB1',
300: '#F06292',
400: '#EC407A',
500: '#E91E63',
600: '#D81B60',
700: '#C2185B',
800: '#AD1457',
900: '#880E4F',
},
Purple: {
50: '#F3E5F5',
100: '#E1BEE7',
200: '#CE93D8',
300: '#BA68C8',
400: '#AB47BC',
500: '#9C27B0',
600: '#8E24AA',
700: '#7B1FA2',
800: '#6A1B9A',
900: '#4A148C',
},
Red: {
50: '#FFEBEE',
100: '#FFCDD2',
200: '#EF9A9A',
300: '#E57373',
400: '#EF5350',
500: '#F44336',
600: '#E53935',
700: '#D32F2F',
800: '#C62828',
900: '#B71C1C',
},
Teal: {
50: '#E0F2F1',
100: '#B2DFDB',
200: '#80CBC4',
300: '#4DB6AC',
400: '#26A69A',
500: '#009688',
600: '#00897B',
700: '#00796B',
800: '#00695C',
900: '#004D40',
},
Yellow: {
50: '#FFFDE7',
100: '#FFF9C4',
200: '#FFF59D',
300: '#FFF176',
400: '#FFEE58',
500: '#FFEB3B',
600: '#FDD835',
700: '#FBC02D',
800: '#F9A825',
900: '#F57F17',
},
};
hsl colors array https://gist.github.com/V3rB0se/cb54cb1be19225fd929cec22fce220cf
Used some code to convert the OOP variant above into one organized with the naming and numbering standards used in the material.io color tool.
Hope this helps someone!
var matColors = { "Amber" = { 50 : '#fff8e1', 100 : '#ffecb3', 200 : '#ffe082', 300 : '#ffd54f', 400 : '#ffca28', 500 : '#ffc107', 600 : '#ffb300', 700 : '#ffa000', 800 : '#ff8f00', 900 : '#ff6f00', }, "Blue Grey" = { 50 : '#ECEFF1', 100 : '#CFD8DC', 200 : '#B0BEC5', 300 : '#90A4AE', 400 : '#78909C', 500 : '#607D8B', 600 : '#546E7A', 700 : '#455A64', 800 : '#37474F', 900 : '#263238', }, "Blue" = { 50 : '#E3F2FD', 100 : '#BBDEFB', 200 : '#90CAF9', 300 : '#64B5F6', 400 : '#42A5F5', 500 : '#2196F3', 600 : '#1E88E5', 700 : '#1976D2', 800 : '#1565C0', 900 : '#0D47A1', }, "Brown" = { 50 : '#EFEBE9', 100 : '#D7CCC8', 200 : '#BCAAA4', 300 : '#A1887F', 400 : '#8D6E63', 500 : '#795548', 600 : '#6D4C41', 700 : '#5D4037', 800 : '#4E342E', 900 : '#3E2723', }, "Cyan" = { 50 : '#E0F7FA', 100 : '#B2EBF2', 200 : '#80DEEA', 300 : '#4DD0E1', 400 : '#26C6DA', 500 : '#00BCD4', 600 : '#00ACC1', 700 : '#0097A7', 800 : '#00838F', 900 : '#006064', }, "Deep Orange" = { 50 : '#FBE9E7', 100 : '#FFCCBC', 200 : '#FFAB91', 300 : '#FF8A65', 400 : '#FF7043', 500 : '#FF5722', 600 : '#F4511E', 700 : '#E64A19', 800 : '#D84315', 900 : '#BF360C', }, "Deep Purple" = { 50 : '#EDE7F6', 100 : '#D1C4E9', 200 : '#B39DDB', 300 : '#9575CD', 400 : '#7E57C2', 500 : '#673AB7', 600 : '#5E35B1', 700 : '#512DA8', 800 : '#4527A0', 900 : '#311B92', }, "Green" = { 50 : '#E8F5E9', 100 : '#C8E6C9', 200 : '#A5D6A7', 300 : '#81C784', 400 : '#66BB6A', 500 : '#4CAF50', 600 : '#43A047', 700 : '#388E3C', 800 : '#2E7D32', 900 : '#1B5E20', }, "Grey" = { 50 : '#FAFAFA', 100 : '#F5F5F5', 200 : '#EEEEEE', 300 : '#E0E0E0', 400 : '#BDBDBD', 500 : '#9E9E9E', 600 : '#757575', 700 : '#616161', 800 : '#424242', 900 : '#212121', }, "Indigo" = { 50 : '#E8EAF6', 100 : '#C5CAE9', 200 : '#9FA8DA', 300 : '#7986CB', 400 : '#5C6BC0', 500 : '#3F51B5', 600 : '#3949AB', 700 : '#303F9F', 800 : '#283593', 900 : '#1A237E', }, "Light Blue" = { 50 : '#E1F5FE', 100 : '#B3E5FC', 200 : '#81D4FA', 300 : '#4FC3F7', 400 : '#29B6F6', 500 : '#03A9F4', 600 : '#039BE5', 700 : '#0288D1', 800 : '#0277BD', 900 : '#01579B', }, "Light Green" = { 50 : '#F1F8E9', 100 : '#DCEDC8', 200 : '#C5E1A5', 300 : '#AED581', 400 : '#9CCC65', 500 : '#8BC34A', 600 : '#7CB342', 700 : '#689F38', 800 : '#558B2F', 900 : '#33691E', }, "Lime" = { 50 : '#F9FBE7', 100 : '#F0F4C3', 200 : '#E6EE9C', 300 : '#DCE775', 400 : '#D4E157', 500 : '#CDDC39', 600 : '#C0CA33', 700 : '#AFB42B', 800 : '#9E9D24', 900 : '#827717', }, "Orange" = { 50 : '#FFF3E0', 100 : '#FFE0B2', 200 : '#FFCC80', 300 : '#FFB74D', 400 : '#FFA726', 500 : '#FF9800', 600 : '#FB8C00', 700 : '#F57C00', 800 : '#EF6C00', 900 : '#E65100', }, "Pink" = { 50 : '#FCE4EC', 100 : '#F8BBD0', 200 : '#F48FB1', 300 : '#F06292', 400 : '#EC407A', 500 : '#E91E63', 600 : '#D81B60', 700 : '#C2185B', 800 : '#AD1457', 900 : '#880E4F', }, "Purple" = { 50 : '#F3E5F5', 100 : '#E1BEE7', 200 : '#CE93D8', 300 : '#BA68C8', 400 : '#AB47BC', 500 : '#9C27B0', 600 : '#8E24AA', 700 : '#7B1FA2', 800 : '#6A1B9A', 900 : '#4A148C', }, "Red" = { 50 : '#FFEBEE', 100 : '#FFCDD2', 200 : '#EF9A9A', 300 : '#E57373', 500 : '#F44336', 600 : '#E53935', 700 : '#D32F2F', 800 : '#C62828', 900 : '#B71C1C', }, "Teal" = { 50 : '#E0F2F1', 100 : '#B2DFDB', 200 : '#80CBC4', 300 : '#4DB6AC', 400 : '#26A69A', 500 : '#009688', 600 : '#00897B', 700 : '#00796B', 800 : '#00695C', 900 : '#004D40', }, "Yellow" = { 50 : '#FFFDE7', 100 : '#FFF9C4', 200 : '#FFF59D', 300 : '#FFF176', 400 : '#FFEE58', 500 : '#FFEB3B', 600 : '#FDD835', 700 : '#FBC02D', 800 : '#F9A825', 900 : '#F57F17', } }
And where is the accent colors?
Rust version
use rgb::RGB8;
pub const MAT_COLOR: MaterialColorPalette = MaterialColorPalette {
red: MaterialColorSeries {
c50: c(0xFFEBEE),
c100: c(0xFFCDD2),
c200: c(0xEF9A9A),
c300: c(0xE57373),
c400: c(0xEF5350),
c500: c(0xF44336),
c600: c(0xE53935),
c700: c(0xD32F2F),
c800: c(0xC62828),
c900: c(0xB71C1C),
a50: c(0xFF8A80),
a200: c(0xFF5252),
a400: c(0xFF1744),
a700: c(0xD50000),
},
pink: MaterialColorSeries {
c50: c(0xFCE4EC),
c100: c(0xF8BBD0),
c200: c(0xF48FB1),
c300: c(0xF06292),
c400: c(0xEC407A),
c500: c(0xE91E63),
c600: c(0xD81B60),
c700: c(0xC2185B),
c800: c(0xAD1457),
c900: c(0x880E4F),
a50: c(0xFF80AB),
a200: c(0xFF4081),
a400: c(0xF50057),
a700: c(0xC51162),
},
purple: MaterialColorSeries {
c50: c(0xF3E5F5),
c100: c(0xE1BEE7),
c200: c(0xCE93D8),
c300: c(0xBA68C8),
c400: c(0xAB47BC),
c500: c(0x9C27B0),
c600: c(0x8E24AA),
c700: c(0x7B1FA2),
c800: c(0x6A1B9A),
c900: c(0x4A148C),
a50: c(0xEA80FC),
a200: c(0xE040FB),
a400: c(0xD500F9),
a700: c(0xAA00FF),
},
deep_purple: MaterialColorSeries {
c50: c(0xEDE7F6),
c100: c(0xD1C4E9),
c200: c(0xB39DDB),
c300: c(0x9575CD),
c400: c(0x7E57C2),
c500: c(0x673AB7),
c600: c(0x5E35B1),
c700: c(0x512DA8),
c800: c(0x4527A0),
c900: c(0x311B92),
a50: c(0xB388FF),
a200: c(0x7C4DFF),
a400: c(0x651FFF),
a700: c(0x6200EA),
},
indigo: MaterialColorSeries {
c50: c(0xE8EAF6),
c100: c(0xC5CAE9),
c200: c(0x9FA8DA),
c300: c(0x7986CB),
c400: c(0x5C6BC0),
c500: c(0x3F51B5),
c600: c(0x3949AB),
c700: c(0x303F9F),
c800: c(0x283593),
c900: c(0x1A237E),
a50: c(0x8C9EFF),
a200: c(0x536DFE),
a400: c(0x3D5AFE),
a700: c(0x304FFE),
},
blue: MaterialColorSeries {
c50: c(0xE3F2FD),
c100: c(0xBBDEFB),
c200: c(0x90CAF9),
c300: c(0x64B5F6),
c400: c(0x42A5F5),
c500: c(0x2196F3),
c600: c(0x1E88E5),
c700: c(0x1976D2),
c800: c(0x1565C0),
c900: c(0x0D47A1),
a50: c(0x82B1FF),
a200: c(0x448AFF),
a400: c(0x2979FF),
a700: c(0x2962FF),
},
light_blue: MaterialColorSeries {
c50: c(0xE1F5FE),
c100: c(0xB3E5FC),
c200: c(0x81D4FA),
c300: c(0x4FC3F7),
c400: c(0x29B6F6),
c500: c(0x03A9F4),
c600: c(0x039BE5),
c700: c(0x0288D1),
c800: c(0x0277BD),
c900: c(0x01579B),
a50: c(0x80D8FF),
a200: c(0x40C4FF),
a400: c(0x00B0FF),
a700: c(0x0091EA),
},
cyan: MaterialColorSeries {
c50: c(0xE0F7FA),
c100: c(0xB2EBF2),
c200: c(0x80DEEA),
c300: c(0x4DD0E1),
c400: c(0x26C6DA),
c500: c(0x00BCD4),
c600: c(0x00ACC1),
c700: c(0x0097A7),
c800: c(0x00838F),
c900: c(0x006064),
a50: c(0x84FFFF),
a200: c(0x18FFFF),
a400: c(0x00E5FF),
a700: c(0x00B8D4),
},
teal: MaterialColorSeries {
c50: c(0xE0F2F1),
c100: c(0xB2DFDB),
c200: c(0x80CBC4),
c300: c(0x4DB6AC),
c400: c(0x26A69A),
c500: c(0x009688),
c600: c(0x00897B),
c700: c(0x00796B),
c800: c(0x00695C),
c900: c(0x004D40),
a50: c(0xA7FFEB),
a200: c(0x64FFDA),
a400: c(0x1DE9B6),
a700: c(0x00BFA5),
},
green: MaterialColorSeries {
c50: c(0xE8F5E9),
c100: c(0xC8E6C9),
c200: c(0xA5D6A7),
c300: c(0x81C784),
c400: c(0x66BB6A),
c500: c(0x4CAF50),
c600: c(0x43A047),
c700: c(0x388E3C),
c800: c(0x2E7D32),
c900: c(0x1B5E20),
a50: c(0xB9F6CA),
a200: c(0x69F0AE),
a400: c(0x00E676),
a700: c(0x00C853),
},
light_green: MaterialColorSeries {
c50: c(0xF1F8E9),
c100: c(0xDCEDC8),
c200: c(0xC5E1A5),
c300: c(0xAED581),
c400: c(0x9CCC65),
c500: c(0x8BC34A),
c600: c(0x7CB342),
c700: c(0x689F38),
c800: c(0x558B2F),
c900: c(0x33691E),
a50: c(0xCCFF90),
a200: c(0xB2FF59),
a400: c(0x76FF03),
a700: c(0x64DD17),
},
lime: MaterialColorSeries {
c50: c(0xF9FBE7),
c100: c(0xF0F4C3),
c200: c(0xE6EE9C),
c300: c(0xDCE775),
c400: c(0xD4E157),
c500: c(0xCDDC39),
c600: c(0xC0CA33),
c700: c(0xAFB42B),
c800: c(0x9E9D24),
c900: c(0x827717),
a50: c(0xF4FF81),
a200: c(0xEEFF41),
a400: c(0xC6FF00),
a700: c(0xAEEA00),
},
yellow: MaterialColorSeries {
c50: c(0xFFFDE7),
c100: c(0xFFF9C4),
c200: c(0xFFF59D),
c300: c(0xFFF176),
c400: c(0xFFEE58),
c500: c(0xFFEB3B),
c600: c(0xFDD835),
c700: c(0xFBC02D),
c800: c(0xF9A825),
c900: c(0xF57F17),
a50: c(0xFFFF8D),
a200: c(0xFFFF00),
a400: c(0xFFEA00),
a700: c(0xFFD600),
},
amber: MaterialColorSeries {
c50: c(0xfff8e1),
c100: c(0xffecb3),
c200: c(0xffe082),
c300: c(0xffd54f),
c400: c(0xffca28),
c500: c(0xffc107),
c600: c(0xffb300),
c700: c(0xffa000),
c800: c(0xff8f00),
c900: c(0xff6f00),
a50: c(0xffe57f),
a200: c(0xffd740),
a400: c(0xffc400),
a700: c(0xffab00),
},
orange: MaterialColorSeries {
c50: c(0xFFF3E0),
c100: c(0xFFE0B2),
c200: c(0xFFCC80),
c300: c(0xFFB74D),
c400: c(0xFFA726),
c500: c(0xFF9800),
c600: c(0xFB8C00),
c700: c(0xF57C00),
c800: c(0xEF6C00),
c900: c(0xE65100),
a50: c(0xFFD180),
a200: c(0xFFAB40),
a400: c(0xFF9100),
a700: c(0xFF6D00),
},
deep_orange: MaterialColorSeries {
c50: c(0xFBE9E7),
c100: c(0xFFCCBC),
c200: c(0xFFAB91),
c300: c(0xFF8A65),
c400: c(0xFF7043),
c500: c(0xFF5722),
c600: c(0xF4511E),
c700: c(0xE64A19),
c800: c(0xD84315),
c900: c(0xBF360C),
a50: c(0xFF9E80),
a200: c(0xFF6E40),
a400: c(0xFF3D00),
a700: c(0xDD2C00),
},
brown: MaterialColorNonAccentSeries {
c50: c(0xEFEBE9),
c100: c(0xD7CCC8),
c200: c(0xBCAAA4),
c300: c(0xA1887F),
c400: c(0x8D6E63),
c500: c(0x795548),
c600: c(0x6D4C41),
c700: c(0x5D4037),
c800: c(0x4E342E),
c900: c(0x3E2723),
},
grey: MaterialColorNonAccentSeries {
c50: c(0xFAFAFA),
c100: c(0xF5F5F5),
c200: c(0xEEEEEE),
c300: c(0xE0E0E0),
c400: c(0xBDBDBD),
c500: c(0x9E9E9E),
c600: c(0x757575),
c700: c(0x616161),
c800: c(0x424242),
c900: c(0x212121),
},
blue_grey: MaterialColorNonAccentSeries {
c50: c(0xECEFF1),
c100: c(0xCFD8DC),
c200: c(0xB0BEC5),
c300: c(0x90A4AE),
c400: c(0x78909C),
c500: c(0x607D8B),
c600: c(0x546E7A),
c700: c(0x455A64),
c800: c(0x37474F),
c900: c(0x263238),
},
};
pub struct MaterialColorPalette {
pub red: MaterialColorSeries,
pub pink: MaterialColorSeries,
pub purple: MaterialColorSeries,
pub deep_purple: MaterialColorSeries,
pub indigo: MaterialColorSeries,
pub blue: MaterialColorSeries,
pub light_blue: MaterialColorSeries,
pub cyan: MaterialColorSeries,
pub teal: MaterialColorSeries,
pub green: MaterialColorSeries,
pub light_green: MaterialColorSeries,
pub lime: MaterialColorSeries,
pub yellow: MaterialColorSeries,
pub amber: MaterialColorSeries,
pub orange: MaterialColorSeries,
pub deep_orange: MaterialColorSeries,
pub brown: MaterialColorNonAccentSeries,
pub grey: MaterialColorNonAccentSeries,
pub blue_grey: MaterialColorNonAccentSeries,
}
pub struct MaterialColorSeries {
pub c50: RGB8,
pub c100: RGB8,
pub c200: RGB8,
pub c300: RGB8,
pub c400: RGB8,
pub c500: RGB8,
pub c600: RGB8,
pub c700: RGB8,
pub c800: RGB8,
pub c900: RGB8,
pub a50: RGB8,
pub a200: RGB8,
pub a400: RGB8,
pub a700: RGB8,
}
pub struct MaterialColorNonAccentSeries {
pub c50: RGB8,
pub c100: RGB8,
pub c200: RGB8,
pub c300: RGB8,
pub c400: RGB8,
pub c500: RGB8,
pub c600: RGB8,
pub c700: RGB8,
pub c800: RGB8,
pub c900: RGB8,
}
const fn c(rgb: u32) -> RGB8 {
RGB8 {
r: ((rgb >> 16) & 0xff) as u8,
g: ((rgb >> 8) & 0xff) as u8,
b: (rgb & 0xff) as u8,
}
}
god bless ChatGPT
Thank you!
I made an object version: