Created
February 17, 2018 15:42
-
-
Save kiley0/756bf555c5a7ae17b8d03596ae364712 to your computer and use it in GitHub Desktop.
Array of Google Material Design color hex codes
This file contains 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
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', | |
]; |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hsl colors array https://gist.github.com/V3rB0se/cb54cb1be19225fd929cec22fce220cf