Material Design Style Color Palette as JSON

material-colors.json

{
  "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": "#0d47a1",
    "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"
  }
}

material-colors.json.js

/**
 * Material Design Style Color Palette as JSON
 *
 * @see https://www.google.com/design/spec/style/color.html for source
 * @see https://gist.github.com/kawanet/2d29cf6039734198169f3f3b70096748 for LESS
 * @see https://gist.github.com/kawanet/a880c83f06d6baf742e45ac9ac52af96 for this
 */

JSON.stringify(Array.prototype.reduce.call(document.querySelectorAll(".color-group ul"), function(names, ul) {
  var name = ul.querySelector(".name");
  if (!name) return names;
  name = name.innerText.toLowerCase().replace(/\s+/g, "");
  names[name] = Array.prototype.reduce.call(ul.querySelectorAll("li"), function(shades, li) {
    var shade = li.querySelector(".shade");
    shade = shade && shade.innerText.toLowerCase().replace(/\s+/g, "-");
    var hex = li.querySelector(".hex");
    hex = hex && hex.innerText.toLowerCase();
    shades[shade] = hex;
    return shades;
  }, {});
  return names;
}, {}), null, "  ");

nice job！

The link is now at https://material.io/design/color/the-color-system.html

Here's a script to extract the colors as SASS variables and copy them to the clipboard:

entries = [];
for (palette of document.querySelectorAll(".palette")) {
  hue = "";
  for (tone of palette.querySelectorAll(".tone")) {
    label = tone.querySelector(".label").innerText || "";
    value = tone.querySelector(".value").innerText || "";
    shade = (label.match(/A?[0-9]+$/) || [])[0] || "";
    newHue = label.replace(shade, "").split(/\s/).filter(w => w).join("-")
    if (newHue) {
      entries.push("");
      hue = newHue;
    }
    entries.push(`$${hue}${shade ? "-" : ""}${shade}: ${value};`.toLowerCase());
  }
}
copy(entries.join("\n"));

Here are the same colors as CSS custom properties:

--c-amber-50: #fff8e1;
--c-amber-100: #ffecb3;
--c-amber-200: #ffe082;
--c-amber-300: #ffd54f;
--c-amber-400: #ffca28;
--c-amber-500: #ffc107;
--c-amber-600: #ffb300;
--c-amber-700: #ffa000;
--c-amber-800: #ff8f00;
--c-amber-900: #ff6f00;
--c-amber-a100: #ffe57f;
--c-amber-a200: #ffd740;
--c-amber-a400: #ffc400;
--c-amber-a700: #ffab00;

--c-blue-50: #e3f2fd;
--c-blue-100: #bbdefb;
--c-blue-200: #90caf9;
--c-blue-300: #64b5f6;
--c-blue-400: #42a5f5;
--c-blue-500: #2196f3;
--c-blue-600: #1e88e5;
--c-blue-700: #1976d2;
--c-blue-800: #1565c0;
--c-blue-900: #0d47a1;
--c-blue-a100: #82b1ff;
--c-blue-a200: #448aff;
--c-blue-a400: #2979ff;
--c-blue-a700: #2962ff;

--c-blue-grey-50: #eceff1;
--c-blue-grey-100: #cfd8dc;
--c-blue-grey-200: #b0bec5;
--c-blue-grey-300: #90a4ae;
--c-blue-grey-400: #78909c;
--c-blue-grey-500: #607d8b;
--c-blue-grey-600: #546e7a;
--c-blue-grey-700: #455a64;
--c-blue-grey-800: #37474f;
--c-blue-grey-900: #263238;

--c-brown-50: #efebe9;
--c-brown-100: #d7ccc8;
--c-brown-200: #bcaaa4;
--c-brown-300: #a1887f;
--c-brown-400: #8d6e63;
--c-brown-500: #795548;
--c-brown-600: #6d4c41;
--c-brown-700: #5d4037;
--c-brown-800: #4e342e;
--c-brown-900: #3e2723;

--c-cyan-50: #e0f7fa;
--c-cyan-100: #b2ebf2;
--c-cyan-200: #80deea;
--c-cyan-300: #4dd0e1;
--c-cyan-400: #26c6da;
--c-cyan-500: #00bcd4;
--c-cyan-600: #00acc1;
--c-cyan-700: #0097a7;
--c-cyan-800: #00838f;
--c-cyan-900: #006064;
--c-cyan-a100: #84ffff;
--c-cyan-a200: #18ffff;
--c-cyan-a400: #00e5ff;
--c-cyan-a700: #00b8d4;

--c-deep-orange-50: #fbe9e7;
--c-deep-orange-100: #ffccbc;
--c-deep-orange-200: #ffab91;
--c-deep-orange-300: #ff8a65;
--c-deep-orange-400: #ff7043;
--c-deep-orange-500: #ff5722;
--c-deep-orange-600: #f4511e;
--c-deep-orange-700: #e64a19;
--c-deep-orange-800: #d84315;
--c-deep-orange-900: #bf360c;
--c-deep-orange-a100: #ff9e80;
--c-deep-orange-a200: #ff6e40;
--c-deep-orange-a400: #ff3d00;
--c-deep-orange-a700: #dd2c00;

--c-deep-purple-50: #ede7f6;
--c-deep-purple-100: #d1c4e9;
--c-deep-purple-200: #b39ddb;
--c-deep-purple-300: #9575cd;
--c-deep-purple-400: #7e57c2;
--c-deep-purple-500: #673ab7;
--c-deep-purple-600: #5e35b1;
--c-deep-purple-700: #512da8;
--c-deep-purple-800: #4527a0;
--c-deep-purple-900: #311b92;
--c-deep-purple-a100: #b388ff;
--c-deep-purple-a200: #7c4dff;
--c-deep-purple-a400: #651fff;
--c-deep-purple-a700: #6200ea;

--c-green-50: #e8f5e9;
--c-green-100: #c8e6c9;
--c-green-200: #a5d6a7;
--c-green-300: #81c784;
--c-green-400: #66bb6a;
--c-green-500: #4caf50;
--c-green-600: #43a047;
--c-green-700: #388e3c;
--c-green-800: #2e7d32;
--c-green-900: #1b5e20;
--c-green-a100: #b9f6ca;
--c-green-a200: #69f0ae;
--c-green-a400: #00e676;

--c-grey-50: #fafafa;
--c-grey-100: #f5f5f5;
--c-grey-200: #eeeeee;
--c-grey-300: #e0e0e0;
--c-grey-400: #bdbdbd;
--c-grey-500: #9e9e9e;
--c-grey-600: #757575;
--c-grey-700: #616161;
--c-grey-800: #424242;
--c-grey-900: #212121;

--c-indigo-50: #e8eaf6;
--c-indigo-100: #c5cae9;
--c-indigo-200: #9fa8da;
--c-indigo-300: #7986cb;
--c-indigo-400: #5c6bc0;
--c-indigo-500: #3f51b5;
--c-indigo-600: #3949ab;
--c-indigo-700: #303f9f;
--c-indigo-800: #283593;
--c-indigo-900: #1a237e;
--c-indigo-a100: #8c9eff;
--c-indigo-a200: #536dfe;
--c-indigo-a400: #3d5afe;
--c-indigo-a700: #304ffe;

--c-light-blue-50: #e1f5fe;
--c-light-blue-100: #b3e5fc;
--c-light-blue-200: #81d4fa;
--c-light-blue-300: #4fc3f7;
--c-light-blue-400: #29b6f6;
--c-light-blue-500: #03a9f4;
--c-light-blue-600: #039be5;
--c-light-blue-700: #0288d1;
--c-light-blue-800: #0277bd;
--c-light-blue-900: #01579b;
--c-light-blue-a100: #80d8ff;
--c-light-blue-a200: #40c4ff;
--c-light-blue-a400: #00b0ff;
--c-light-blue-a700: #0091ea;

--c-light-green-50: #f1f8e9;
--c-light-green-100: #dcedc8;
--c-light-green-200: #c5e1a5;
--c-light-green-300: #aed581;
--c-light-green-400: #9ccc65;
--c-light-green-500: #8bc34a;
--c-light-green-600: #7cb342;
--c-light-green-700: #689f38;
--c-light-green-800: #558b2f;
--c-light-green-900: #33691e;
--c-light-green-a100: #ccff90;
--c-light-green-a200: #b2ff59;
--c-light-green-a400: #76ff03;
--c-light-green-a700: #64dd17;

--c-lime-50: #f9fbe7;
--c-lime-100: #f0f4c3;
--c-lime-200: #e6ee9c;
--c-lime-300: #dce775;
--c-lime-400: #d4e157;
--c-lime-500: #cddc39;
--c-lime-600: #c0ca33;
--c-lime-700: #afb42b;
--c-lime-800: #9e9d24;
--c-lime-900: #827717;
--c-lime-a100: #f4ff81;
--c-lime-a200: #eeff41;
--c-lime-a400: #c6ff00;
--c-lime-a700: #aeea00;

--c-orange-50: #fff3e0;
--c-orange-100: #ffe0b2;
--c-orange-200: #ffcc80;
--c-orange-300: #ffb74d;
--c-orange-400: #ffa726;
--c-orange-500: #ff9800;
--c-orange-600: #fb8c00;
--c-orange-700: #f57c00;
--c-orange-800: #ef6c00;
--c-orange-900: #e65100;
--c-orange-a100: #ffd180;
--c-orange-a200: #ffab40;
--c-orange-a400: #ff9100;
--c-orange-a700: #ff6d00;

--c-pink-50: #fce4ec;
--c-pink-100: #f8bbd0;
--c-pink-200: #f48fb1;
--c-pink-300: #f06292;
--c-pink-400: #ec407a;
--c-pink-500: #e91e63;
--c-pink-600: #d81b60;
--c-pink-700: #c2185b;
--c-pink-800: #ad1457;
--c-pink-900: #880e4f;
--c-pink-a100: #ff80ab;
--c-pink-a200: #ff4081;
--c-pink-a400: #f50057;
--c-pink-a700: #c51162;

--c-purple-50: #f3e5f5;
--c-purple-100: #e1bee7;
--c-purple-200: #ce93d8;
--c-purple-300: #ba68c8;
--c-purple-400: #ab47bc;
--c-purple-500: #9c27b0;
--c-purple-600: #8e24aa;
--c-purple-700: #7b1fa2;
--c-purple-800: #6a1b9a;
--c-purple-900: #4a148c;
--c-purple-a100: #ea80fc;
--c-purple-a200: #e040fb;
--c-purple-a400: #d500f9;
--c-purple-a700: #aa00ff;

--c-red-50: #ffebee;
--c-red-100: #ffcdd2;
--c-red-200: #ef9a9a;
--c-red-300: #e57373;
--c-red-400: #ef5350;
--c-red-500: #f44336;
--c-red-600: #e53935;
--c-red-700: #d32f2f;
--c-red-800: #c62828;
--c-red-900: #b71c1c;
--c-red-a100: #ff8a80;
--c-red-a200: #ff5252;
--c-red-a400: #ff1744;
--c-red-a700: #d50000;

--c-teal-50: #e0f2f1;
--c-teal-100: #b2dfdb;
--c-teal-200: #80cbc4;
--c-teal-300: #4db6ac;
--c-teal-400: #26a69a;
--c-teal-500: #009688;
--c-teal-600: #00897b;
--c-teal-700: #00796b;
--c-teal-800: #00695c;
--c-teal-900: #004d40;
--c-teal-a100: #a7ffeb;
--c-teal-a200: #64ffda;
--c-teal-a400: #1de9b6;
--c-teal-a700: #00bfa5;

--c-yellow-50: #fffde7;
--c-yellow-100: #fff9c4;
--c-yellow-200: #fff59d;
--c-yellow-300: #fff176;
--c-yellow-400: #ffee58;
--c-yellow-500: #ffeb3b;
--c-yellow-600: #fdd835;
--c-yellow-700: #fbc02d;
--c-yellow-800: #f9a825;
--c-yellow-900: #f57f17;
--c-yellow-a100: #ffff8d;
--c-yellow-a200: #ffff00;
--c-yellow-a400: #ffea00;
--c-yellow-a700: #ffd600;

Thanks for this. It helps

Thanks a lot !