Skip to content

Instantly share code, notes, and snippets.

@mcanam
Last active March 3, 2022 11:49
Show Gist options
  • Save mcanam/08634f7ccfa1447c77a56e87d244cce2 to your computer and use it in GitHub Desktop.
Save mcanam/08634f7ccfa1447c77a56e87d244cce2 to your computer and use it in GitHub Desktop.
A Javascript object that includes a list of material design color hex codes
const colors = {
red: {
"50": "#FFEBEE",
"100": "#FFCDD2",
"200": "#EF9A9A",
"300": "#E57373",
"400": "#EF5350",
"500": "#F44336",
"600": "#E53935",
"700": "#D32F2F",
"800": "#C62828",
"900": "#B71C1C",
"A100": "#FF8A80",
"A200": "#FF5252",
"A400": "#FF1744",
"A700": "#D50000",
},
pink: {
"50": "#FCE4EC",
"100": "#F8BBD0",
"200": "#F48FB1",
"300": "#F06292",
"400": "#EC407A",
"500": "#E91E63",
"600": "#D81B60",
"700": "#C2185B",
"800": "#AD1457",
"900": "#880E4F",
"A100": "#FF80AB",
"A200": "#FF4081",
"A400": "#F50057",
"A700": "#C51162",
},
purple: {
"50": "#F3E5F5",
"100": "#E1BEE7",
"200": "#CE93D8",
"300": "#BA68C8",
"400": "#AB47BC",
"500": "#9C27B0",
"600": "#8E24AA",
"700": "#7B1FA2",
"800": "#6A1B9A",
"900": "#4A148C",
"A100": "#EA80FC",
"A200": "#E040FB",
"A400": "#D500F9",
"A700": "#AA00FF",
},
deepPurple: {
"50": "#EDE7F6",
"100": "#D1C4E9",
"200": "#B39DDB",
"300": "#9575CD",
"400": "#7E57C2",
"500": "#673AB7",
"600": "#5E35B1",
"700": "#512DA8",
"800": "#4527A0",
"900": "#311B92",
"A100": "#B388FF",
"A200": "#7C4DFF",
"A400": "#651FFF",
"A700": "#6200EA",
},
indigo: {
"50": "#E8EAF6",
"100": "#C5CAE9",
"200": "#9FA8DA",
"300": "#7986CB",
"400": "#5C6BC0",
"500": "#3F51B5",
"600": "#3949AB",
"700": "#303F9F",
"800": "#283593",
"900": "#1A237E",
"A100": "#8C9EFF",
"A200": "#536DFE",
"A400": "#3D5AFE",
"A700": "#304FFE",
},
blue: {
"50": "#E3F2FD",
"100": "#BBDEFB",
"200": "#90CAF9",
"300": "#64B5F6",
"400": "#42A5F5",
"500": "#2196F3",
"600": "#1E88E5",
"700": "#1976D2",
"800": "#1565C0",
"900": "#0D49A1",
"A100": "#82B1FF",
"A200": "#448AFF",
"A400": "#2979FF",
"A700": "#2962FF",
},
lightBlue: {
"50": "#E1F5FE",
"100": "#B3E5FC",
"200": "#81D4FA",
"300": "#4FC3F7",
"400": "#29B6F6",
"500": "#03A9F4",
"600": "#039BE5",
"700": "#0288D1",
"800": "#0277BD",
"900": "#01579B",
"A100": "#80D8FF",
"A200": "#40C4FF",
"A400": "#00B0FF",
"A700": "#0091EA",
},
cyan: {
"50": "#E0F7FA",
"100": "#B2EBF2",
"200": "#80DEEA",
"300": "#4DD0E1",
"400": "#26C6DA",
"500": "#00BCD4",
"600": "#00ACC1",
"700": "#0097A7",
"800": "#00838F",
"900": "#006064",
"A100": "#84FFFF",
"A200": "#18FFFF",
"A400": "#00E5FF",
"A700": "#00B8D4",
},
teal: {
"50": "#E0F2F1",
"100": "#B2DFDB",
"200": "#80CBC4",
"300": "#4DB6AC",
"400": "#26A69A",
"500": "#009688",
"600": "#00897B",
"700": "#00796B",
"800": "#00695C",
"900": "#004D40",
"A100": "#A7FFEB",
"A200": "#64FFDA",
"A400": "#1DE9B6",
"A700": "#00BFA5",
},
green: {
"50": "#E8F5E9",
"100": "#C8E6C9",
"200": "#A5D6A7",
"300": "#81C784",
"400": "#66BB6A",
"500": "#4CAF50",
"600": "#43A047",
"700": "#388E3C",
"800": "#2E7D32",
"900": "#1B5E20",
"A100": "#B9F6CA",
"A200": "#69F0AE",
"A400": "#00E676",
"A700": "#00C853",
},
lightGreen: {
"50": "#F1F8E9",
"100": "#DCEDC8",
"200": "#C5E1A5",
"300": "#AED581",
"400": "#9CCC65",
"500": "#8BC34A",
"600": "#7CB342",
"700": "#689F38",
"800": "#558B2F",
"900": "#33691E",
"A100": "#CCFF90",
"A200": "#B2FF59",
"A400": "#76FF03",
"A700": "#64DD17",
},
lime: {
"50": "#F9FBE7",
"100": "#F0F4C3",
"200": "#E6EE9C",
"300": "#DCE775",
"400": "#D4E157",
"500": "#CDDC39",
"600": "#C0CA33",
"700": "#AFB42B",
"800": "#9E9D24",
"900": "#827717",
"A100": "#F4FF81",
"A200": "#EEFF41",
"A400": "#C6FF00",
"A700": "#AEEA00",
},
yellow: {
"50": "#FFFDE7",
"100": "#FFF9C4",
"200": "#FFF59D",
"300": "#FFF176",
"400": "#FFEE58",
"500": "#FFEB3B",
"600": "#FDD835",
"700": "#FBC02D",
"800": "#F9A825",
"900": "#F57F17",
"A100": "#FFFF8D",
"A200": "#FFFF00",
"A400": "#FFEA00",
"A700": "#FFD600",
},
amber: {
"50": "#FFF8E1",
"100": "#FFECB3",
"200": "#FFE082",
"300": "#FFD54F",
"400": "#FFCA28",
"500": "#FFC107",
"600": "#FFB300",
"700": "#FFA000",
"800": "#FF8F00",
"900": "#FF6F00",
"A100": "#FFE57F",
"A200": "#FFD740",
"A400": "#FFC400",
"A700": "#FFAB00",
},
orange: {
"50": "#FFF3E0",
"100": "#FFE0B2",
"200": "#FFCC80",
"300": "#FFB74D",
"400": "#FFA726",
"500": "#FF9800",
"600": "#FB8C00",
"700": "#F57C00",
"800": "#EF6C00",
"900": "#E65100",
"A100": "#FFD180",
"A200": "#FFAB40",
"A400": "#FF9100",
"A700": "#FF6D00",
},
deepOrange: {
"50": "#FBE9E7",
"100": "#FFCCBC",
"200": "#FFAB91",
"300": "#FF8A65",
"400": "#FF7043",
"500": "#FF5722",
"600": "#F4511E",
"700": "#E64A19",
"800": "#D84315",
"900": "#BF360C",
"A100": "#FF9E80",
"A200": "#FF6E40",
"A400": "#FF3D00",
"A700": "#DD2C00",
},
brown: {
"50": "#EFEBE9",
"100": "#D7CCC8",
"200": "#BCAAA4",
"300": "#A1887F",
"400": "#8D6E63",
"500": "#795548",
"600": "#6D4C41",
"700": "#5D4037",
"800": "#4E342E",
"900": "#3E2723",
},
grey: {
"50": "#FAFAFA",
"100": "#F5F5F5",
"200": "#EEEEEE",
"300": "#E0E0E0",
"400": "#BDBDBD",
"500": "#9E9E9E",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
},
blueGrey: {
"50": "#ECEFF1",
"100": "#CFD8DC",
"200": "#B0BeC5",
"300": "#90A4AE",
"400": "#78909C",
"500": "#607D8B",
"600": "#546E7A",
"700": "#455A64",
"800": "#37474F",
"900": "#263238",
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment