Skip to content

Instantly share code, notes, and snippets.

@kiley0

kiley0/material-design-colors.js

Created February 17, 2018 15:42
Show Gist options
  • Save kiley0/756bf555c5a7ae17b8d03596ae364712 to your computer and use it in GitHub Desktop.
Save kiley0/756bf555c5a7ae17b8d03596ae364712 to your computer and use it in GitHub Desktop.
Download ZIP
Array of Google Material Design color hex codes
Raw
material-design-colors.js
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',
];
@aimuhire
Copy link

darken = {
'#546E7A' : "darken-1",

Cool. Why did you choose to invert the object key-value pairs? @zekageri

 darken = {
                "darken-1":"#546E7A",

@zekageri
Copy link

I don't know. It would have been better in reverse. :'D

@aimuhire
Copy link

I don't know. It would have been better in reverse. :'D

Alright

@nightcycle
Copy link

nightcycle commented Jun 15, 2021 •
edited
Loading

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',
	}
}

@aimuhire
Copy link

Hope this helps someone!

Yeah, it sure will.

@dtomschitz
Copy link

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',
  },
};

@V3rB0se
Copy link

V3rB0se commented Jul 29, 2021

hsl colors array https://gist.github.com/V3rB0se/cb54cb1be19225fd929cec22fce220cf

@voxsoftware
Copy link

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?

@fzyzcjy
Copy link

fzyzcjy commented Oct 29, 2021

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,
    }
}

@AdamLoumame
Copy link

god bless ChatGPT

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment