Material Design Palette

material-design-palette.js

// https://material.io/resources/color/#!/?view.left=0&view.right=0
toCamelCase = (value) => value.toLowerCase().replace(/\s\w/, (match) => match.slice(1).toUpperCase());

names = Array.from(document.querySelectorAll('.color-labels .color-label')).map((element => {
    return toCamelCase(element.innerText)
}))
  
shades = Array.from(document.querySelectorAll('.align-bottom.ng-binding.ng-scope')).map((element => element.innerText))

palette = Array.from(document.querySelectorAll('.palette-container')).reduce((obj, palette, index) => {
    obj[names[index]] = Array.from(palette.querySelectorAll(':scope .color')).reduce((shadeObj, colorElement, shadeIndex) => {
        shadeObj[shades[shadeIndex]] = colorElement.getAttribute('value');
        return shadeObj;
    }, {})
    return obj;
}, {});

//
{
  "red": {
    "50": "#FF8A80",
    "100": "#FF5252",
    "200": "#FF1744",
    "300": "#D50000",
    "400": "#EF5350",
    "500": "#F44336",
    "600": "#E53935",
    "700": "#D32F2F",
    "800": "#C62828",
    "900": "#B71C1C"
  },
  "pink": {
    "50": "#FF80AB",
    "100": "#FF4081",
    "200": "#F50057",
    "300": "#C51162",
    "400": "#EC407A",
    "500": "#E91E63",
    "600": "#D81B60",
    "700": "#C2185B",
    "800": "#AD1457",
    "900": "#880E4F"
  },
  "purple": {
    "50": "#EA80FC",
    "100": "#E040FB",
    "200": "#D500F9",
    "300": "#AA00FF",
    "400": "#AB47BC",
    "500": "#9C27B0",
    "600": "#8E24AA",
    "700": "#7B1FA2",
    "800": "#6A1B9A",
    "900": "#4A148C"
  },
  "deepPurple": {
    "50": "#B388FF",
    "100": "#7C4DFF",
    "200": "#651FFF",
    "300": "#6200EA",
    "400": "#7E57C2",
    "500": "#673AB7",
    "600": "#5E35B1",
    "700": "#512DA8",
    "800": "#4527A0",
    "900": "#311B92"
  },
  "indigo": {
    "50": "#8C9EFF",
    "100": "#536DFE",
    "200": "#3D5AFE",
    "300": "#304FFE",
    "400": "#5C6BC0",
    "500": "#3F51B5",
    "600": "#3949AB",
    "700": "#303F9F",
    "800": "#283593",
    "900": "#1A237E"
  },
  "blue": {
    "50": "#82B1FF",
    "100": "#448AFF",
    "200": "#2979FF",
    "300": "#2962FF",
    "400": "#42A5F5",
    "500": "#2196F3",
    "600": "#1E88E5",
    "700": "#1976D2",
    "800": "#1565C0",
    "900": "#0D47A1"
  },
  "lightBlue": {
    "50": "#80D8FF",
    "100": "#40C4FF",
    "200": "#00B0FF",
    "300": "#0091EA",
    "400": "#29B6F6",
    "500": "#03A9F4",
    "600": "#039BE5",
    "700": "#0288D1",
    "800": "#0277BD",
    "900": "#01579B"
  },
  "cyan": {
    "50": "#84FFFF",
    "100": "#18FFFF",
    "200": "#00E5FF",
    "300": "#00B8D4",
    "400": "#26C6DA",
    "500": "#00BCD4",
    "600": "#00ACC1",
    "700": "#0097A7",
    "800": "#00838F",
    "900": "#006064"
  },
  "teal": {
    "50": "#A7FFEB",
    "100": "#64FFDA",
    "200": "#1DE9B6",
    "300": "#00BFA5",
    "400": "#26A69A",
    "500": "#009688",
    "600": "#00897B",
    "700": "#00796B",
    "800": "#00695C",
    "900": "#004D40"
  },
  "green": {
    "50": "#B9F6CA",
    "100": "#69F0AE",
    "200": "#00E676",
    "300": "#00C853",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20"
  },
  "lightGreen": {
    "50": "#CCFF90",
    "100": "#B2FF59",
    "200": "#76FF03",
    "300": "#64DD17",
    "400": "#9CCC65",
    "500": "#8BC34A",
    "600": "#7CB342",
    "700": "#689F38",
    "800": "#558B2F",
    "900": "#33691E"
  },
  "lime": {
    "50": "#F4FF81",
    "100": "#EEFF41",
    "200": "#C6FF00",
    "300": "#AEEA00",
    "400": "#D4E157",
    "500": "#CDDC39",
    "600": "#C0CA33",
    "700": "#AFB42B",
    "800": "#9E9D24",
    "900": "#827717"
  },
  "yellow": {
    "50": "#FFFF8D",
    "100": "#FFFF00",
    "200": "#FFEA00",
    "300": "#FFD600",
    "400": "#FFEE58",
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D",
    "800": "#F9A825",
    "900": "#F57F17"
  },
  "amber": {
    "50": "#FFE57F",
    "100": "#FFD740",
    "200": "#FFC400",
    "300": "#FFAB00",
    "400": "#FFCA28",
    "500": "#FFC107",
    "600": "#FFB300",
    "700": "#FFA000",
    "800": "#FF8F00",
    "900": "#FF6F00"
  },
  "orange": {
    "50": "#FFD180",
    "100": "#FFAB40",
    "200": "#FF9100",
    "300": "#FF6D00",
    "400": "#FFA726",
    "500": "#FF9800",
    "600": "#FB8C00",
    "700": "#F57C00",
    "800": "#EF6C00",
    "900": "#E65100"
  },
  "deepOrange": {
    "50": "#FF9E80",
    "100": "#FF6E40",
    "200": "#FF3D00",
    "300": "#DD2C00",
    "400": "#FF7043",
    "500": "#FF5722",
    "600": "#F4511E",
    "700": "#E64A19",
    "800": "#D84315",
    "900": "#BF360C"
  },
  "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"
  }
}