Material Colors

colors.json

{
  "Red": {
    "50": { "color": "#ffebee", "light": "#ffffff", "dark": "#ccb9bc" },
    "100": { "color": "#ffcdd2", "light": "#ffffff", "dark": "#cb9ca1" },
    "200": { "color": "#ef9a9a", "light": "#ffcccb", "dark": "#ba6b6c" },
    "300": { "color": "#e57373", "light": "#ffa4a2", "dark": "#af4448" },
    "400": { "color": "#ef5350", "light": "#ff867c", "dark": "#b61827" },
    "500": { "color": "#f44336", "light": "#ff7961", "dark": "#ba000d" },
    "600": { "color": "#e53935", "light": "#ff6f60", "dark": "#ab000d" },
    "700": { "color": "#d32f2f", "light": "#ff6659", "dark": "#9a0007" },
    "800": { "color": "#c62828", "light": "#ff5f52", "dark": "#8e0000" },
    "900": { "color": "#b71c1c", "light": "#f05545", "dark": "#7f0000" },
    "A100": { "color": "#ff8a80", "light": "#ffbcaf", "dark": "#c85a54" },
    "A200": { "color": "#ff5252", "light": "#ff867f", "dark": "#c50e29" },
    "A400": { "color": "#ff1744", "light": "#ff616f", "dark": "#c4001d" },
    "A700": { "color": "#d50000", "light": "#ff5131", "dark": "#9b0000" }
  },
  "Pink": {
    "50": { "color": "#fce4ec", "light": "#ffffff", "dark": "#c9b2ba" },
    "100": { "color": "#f8bbd0", "light": "#ffeeff", "dark": "#c48b9f" },
    "200": { "color": "#f48fb1", "light": "#ffc1e3", "dark": "#bf5f82" },
    "300": { "color": "#f06292", "light": "#ff94c2", "dark": "#ba2d65" },
    "400": { "color": "#ec407a", "light": "#ff77a9", "dark": "#b4004e" },
    "500": { "color": "#e91e63", "light": "#ff6090", "dark": "#b0003a" },
    "600": { "color": "#d81b60", "light": "#ff5c8d", "dark": "#a00037" },
    "700": { "color": "#c2185b", "light": "#fa5788", "dark": "#8c0032" },
    "800": { "color": "#ad1457", "light": "#e35183", "dark": "#78002e" },
    "900": { "color": "#880e4f", "light": "#bc477b", "dark": "#560027" },
    "A100": { "color": "#ff80ab", "light": "#ffb2dd", "dark": "#c94f7c" },
    "A200": { "color": "#ff4081", "light": "#ff79b0", "dark": "#c60055" },
    "A400": { "color": "#f50057", "light": "#ff5983", "dark": "#bb002f" },
    "A700": { "color": "#c51162", "light": "#fd558f", "dark": "#8e0038" }
  },
  "Purple": {
    "50": { "color": "#f3e5f5", "light": "#ffffff", "dark": "#c0b3c2" },
    "100": { "color": "#e1bee7", "light": "#fff1ff", "dark": "#af8eb5" },
    "200": { "color": "#ce93d8", "light": "#ffc4ff", "dark": "#9c64a6" },
    "300": { "color": "#ba68c8", "light": "#ee98fb", "dark": "#883997" },
    "400": { "color": "#ab47bc", "light": "#df78ef", "dark": "#790e8b" },
    "500": { "color": "#9c27b0", "light": "#d05ce3", "dark": "#6a0080" },
    "600": { "color": "#8e24aa", "light": "#c158dc", "dark": "#5c007a" },
    "700": { "color": "#7b1fa2", "light": "#ae52d4", "dark": "#4a0072" },
    "800": { "color": "#6a1b9a", "light": "#9c4dcc", "dark": "#38006b" },
    "900": { "color": "#4a148c", "light": "#7c43bd", "dark": "#12005e" },
    "A100": { "color": "#ea80fc", "light": "#ffb2ff", "dark": "#b64fc8" },
    "A200": { "color": "#e040fb", "light": "#ff79ff", "dark": "#aa00c7" },
    "A400": { "color": "#d500f9", "light": "#ff5bff", "dark": "#9e00c5" },
    "A700": { "color": "#aa00ff", "light": "#e254ff", "dark": "#7200ca" }
  },
  "Deep Purple": {
    "50": { "color": "#ede7f6", "light": "#ffffff", "dark": "#bbb5c3" },
    "100": { "color": "#d1c4e9", "light": "#fff7ff", "dark": "#a094b7" },
    "200": { "color": "#b39ddb", "light": "#e6ceff", "dark": "#836fa9" },
    "300": { "color": "#9575cd", "light": "#c7a4ff", "dark": "#65499c" },
    "400": { "color": "#7e57c2", "light": "#b085f5", "dark": "#4d2c91" },
    "500": { "color": "#673ab7", "light": "#9a67ea", "dark": "#320b86" },
    "600": { "color": "#5e35b1", "light": "#9162e4", "dark": "#280680" },
    "700": { "color": "#512da8", "light": "#8559da", "dark": "#140078" },
    "800": { "color": "#4527a0", "light": "#7953d2", "dark": "#000070" },
    "900": { "color": "#311b92", "light": "#6746c3", "dark": "#000063" },
    "A100": { "color": "#b388ff", "light": "#e7b9ff", "dark": "#805acb" },
    "A200": { "color": "#7c4dff", "light": "#b47cff", "dark": "#3f1dcb" },
    "A400": { "color": "#651fff", "light": "#a255ff", "dark": "#0100ca" },
    "A700": { "color": "#6200ea", "light": "#9d46ff", "dark": "#0a00b6" }
  },
  "Indigo": {
    "50": { "color": "#e8eaf6", "light": "#ffffff", "dark": "#b6b8c3" },
    "100": { "color": "#c5cae9", "light": "#f8fdff", "dark": "#9499b7" },
    "200": { "color": "#9fa8da", "light": "#d1d9ff", "dark": "#6f79a8" },
    "300": { "color": "#7986cb", "light": "#aab6fe", "dark": "#49599a" },
    "400": { "color": "#5c6bc0", "light": "#8e99f3", "dark": "#26418f" },
    "500": { "color": "#3f51b5", "light": "#757de8", "dark": "#002984" },
    "600": { "color": "#3949ab", "light": "#6f74dd", "dark": "#00227b" },
    "700": { "color": "#303f9f", "light": "#666ad1", "dark": "#001970" },
    "800": { "color": "#283593", "light": "#5f5fc4", "dark": "#001064" },
    "900": { "color": "#1a237e", "light": "#534bae", "dark": "#000051" },
    "A100": { "color": "#8c9eff", "light": "#c0cfff", "dark": "#5870cb" },
    "A200": { "color": "#536dfe", "light": "#8f9bff", "dark": "#0043ca" },
    "A400": { "color": "#3d5afe", "light": "#8187ff", "dark": "#0031ca" },
    "A700": { "color": "#304ffe", "light": "#7a7cff", "dark": "#0026ca" }
  },
  "Blue": {
    "50": { "color": "#e3f2fd", "light": "#ffffff", "dark": "#b1bfca" },
    "100": { "color": "#bbdefb", "light": "#eeffff", "dark": "#8aacc8" },
    "200": { "color": "#90caf9", "light": "#c3fdff", "dark": "#5d99c6" },
    "300": { "color": "#64b5f6", "light": "#9be7ff", "dark": "#2286c3" },
    "400": { "color": "#42a5f5", "light": "#80d6ff", "dark": "#0077c2" },
    "500": { "color": "#2196f3", "light": "#6ec6ff", "dark": "#0069c0" },
    "600": { "color": "#1e88e5", "light": "#6ab7ff", "dark": "#005cb2" },
    "700": { "color": "#1976d2", "light": "#63a4ff", "dark": "#004ba0" },
    "800": { "color": "#1565c0", "light": "#5e92f3", "dark": "#003c8f" },
    "900": { "color": "#0d47a1", "light": "#5472d3", "dark": "#002171" },
    "A100": { "color": "#82b1ff", "light": "#b6e3ff", "dark": "#4d82cb" },
    "A200": { "color": "#448aff", "light": "#83b9ff", "dark": "#005ecb" },
    "A400": { "color": "#2979ff", "light": "#75a7ff", "dark": "#004ecb" },
    "A700": { "color": "#2962ff", "light": "#768fff", "dark": "#0039cb" }
  },
  "Light Blue": {
    "50": { "color": "#e1f5fe", "light": "#ffffff", "dark": "#afc2cb" },
    "100": { "color": "#b3e5fc", "light": "#e6ffff", "dark": "#82b3c9" },
    "200": { "color": "#81d4fa", "light": "#b6ffff", "dark": "#4ba3c7" },
    "300": { "color": "#4fc3f7", "light": "#8bf6ff", "dark": "#0093c4" },
    "400": { "color": "#29b6f6", "light": "#73e8ff", "dark": "#0086c3" },
    "500": { "color": "#03a9f4", "light": "#67daff", "dark": "#007ac1" },
    "600": { "color": "#039be5", "light": "#63ccff", "dark": "#006db3" },
    "700": { "color": "#0288d1", "light": "#5eb8ff", "dark": "#005b9f" },
    "800": { "color": "#0277bd", "light": "#58a5f0", "dark": "#004c8c" },
    "900": { "color": "#01579b", "light": "#4f83cc", "dark": "#002f6c" },
    "A100": { "color": "#80d8ff", "light": "#b5ffff", "dark": "#49a7cc" },
    "A200": { "color": "#40c4ff", "light": "#82f7ff", "dark": "#0094cc" },
    "A400": { "color": "#00b0ff", "light": "#69e2ff", "dark": "#0081cb" },
    "A700": { "color": "#0091ea", "light": "#64c1ff", "dark": "#0064b7" }
  },
  "Cyan": {
    "50": { "color": "#e0f7fa", "light": "#ffffff", "dark": "#aec4c7" },
    "100": { "color": "#b2ebf2", "light": "#e5ffff", "dark": "#81b9bf" },
    "200": { "color": "#80deea", "light": "#b4ffff", "dark": "#4bacb8" },
    "300": { "color": "#4dd0e1", "light": "#88ffff", "dark": "#009faf" },
    "400": { "color": "#26c6da", "light": "#6ff9ff", "dark": "#0095a8" },
    "500": { "color": "#00bcd4", "light": "#62efff", "dark": "#008ba3" },
    "600": { "color": "#00acc1", "light": "#5ddef4", "dark": "#007c91" },
    "700": { "color": "#0097a7", "light": "#56c8d8", "dark": "#006978" },
    "800": { "color": "#00838f", "light": "#4fb3bf", "dark": "#005662" },
    "900": { "color": "#006064", "light": "#428e92", "dark": "#00363a" },
    "A100": { "color": "#84ffff", "light": "#baffff", "dark": "#4bcbcc" },
    "A200": { "color": "#18ffff", "light": "#76ffff", "dark": "#00cbcc" },
    "A400": { "color": "#00e5ff", "light": "#6effff", "dark": "#00b2cc" },
    "A700": { "color": "#00b8d4", "light": "#62ebff", "dark": "#0088a3" }
  },
  "Teal": {
    "50": { "color": "#e0f2f1", "light": "#ffffff", "dark": "#aebfbe" },
    "100": { "color": "#b2dfdb", "light": "#e5ffff", "dark": "#82ada9" },
    "200": { "color": "#80cbc4", "light": "#b2fef7", "dark": "#4f9a94" },
    "300": { "color": "#4db6ac", "light": "#82e9de", "dark": "#00867d" },
    "400": { "color": "#26a69a", "light": "#64d8cb", "dark": "#00766c" },
    "500": { "color": "#009688", "light": "#52c7b8", "dark": "#00675b" },
    "600": { "color": "#00897b", "light": "#4ebaaa", "dark": "#005b4f" },
    "700": { "color": "#00796b", "light": "#48a999", "dark": "#004c40" },
    "800": { "color": "#00695c", "light": "#439889", "dark": "#003d33" },
    "900": { "color": "#004d40", "light": "#39796b", "dark": "#00251a" },
    "A100": { "color": "#a7ffeb", "light": "#dbffff", "dark": "#75ccb9" },
    "A200": { "color": "#64ffda", "light": "#9effff", "dark": "#14cba8" },
    "A400": { "color": "#1de9b6", "light": "#6effe8", "dark": "#00b686" },
    "A700": { "color": "#00bfa5", "light": "#5df2d6", "dark": "#008e76" }
  },
  "Green": {
    "50": { "color": "#e8f5e9", "light": "#ffffff", "dark": "#b6c2b7" },
    "100": { "color": "#c8e6c9", "light": "#fbfffc", "dark": "#97b498" },
    "200": { "color": "#a5d6a7", "light": "#d7ffd9", "dark": "#75a478" },
    "300": { "color": "#81c784", "light": "#b2fab4", "dark": "#519657" },
    "400": { "color": "#66bb6a", "light": "#98ee99", "dark": "#338a3e" },
    "500": { "color": "#4caf50", "light": "#80e27e", "dark": "#087f23" },
    "600": { "color": "#43a047", "light": "#76d275", "dark": "#00701a" },
    "700": { "color": "#388e3c", "light": "#6abf69", "dark": "#00600f" },
    "800": { "color": "#2e7d32", "light": "#60ad5e", "dark": "#005005" },
    "900": { "color": "#1b5e20", "light": "#4c8c4a", "dark": "#003300" },
    "A100": { "color": "#b9f6ca", "light": "#ecfffd", "dark": "#88c399" },
    "A200": { "color": "#69f0ae", "light": "#9fffe0", "dark": "#2bbd7e" },
    "A400": { "color": "#00e676", "light": "#66ffa6", "dark": "#00b248" },
    "A700": { "color": "#00c853", "light": "#5efc82", "dark": "#009624" }
  },
  "Light Green": {
    "50": { "color": "#f1f8e9", "light": "#ffffff", "dark": "#bec5b7" },
    "100": { "color": "#dcedc8", "light": "#fffffb", "dark": "#aabb97" },
    "200": { "color": "#c5e1a5", "light": "#f8ffd7", "dark": "#94af76" },
    "300": { "color": "#aed581", "light": "#e1ffb1", "dark": "#7da453" },
    "400": { "color": "#9ccc65", "light": "#cfff95", "dark": "#6b9b37" },
    "500": { "color": "#8bc34a", "light": "#bef67a", "dark": "#5a9216" },
    "600": { "color": "#7cb342", "light": "#aee571", "dark": "#4b830d" },
    "700": { "color": "#689f38", "light": "#99d066", "dark": "#387002" },
    "800": { "color": "#558b2f", "light": "#85bb5c", "dark": "#255d00" },
    "900": { "color": "#33691e", "light": "#629749", "dark": "#003d00" },
    "A100": { "color": "#ccff90", "light": "#ffffc2", "dark": "#99cc60" },
    "A200": { "color": "#b2ff59", "light": "#e7ff8c", "dark": "#7ecb20" },
    "A400": { "color": "#76ff03", "light": "#b0ff57", "dark": "#32cb00" },
    "A700": { "color": "#64dd17", "light": "#9cff57", "dark": "#1faa00" }
  },
  "Lime": {
    "50": { "color": "#f9fbe7", "light": "#ffffff", "dark": "#c6c8b5" },
    "100": { "color": "#f0f4c3", "light": "#fffff6", "dark": "#bdc192" },
    "200": { "color": "#e6ee9c", "light": "#ffffce", "dark": "#b3bc6d" },
    "300": { "color": "#dce775", "light": "#ffffa6", "dark": "#a8b545" },
    "400": { "color": "#d4e157", "light": "#ffff89", "dark": "#a0af22" },
    "500": { "color": "#cddc39", "light": "#ffff6e", "dark": "#99aa00" },
    "600": { "color": "#c0ca33", "light": "#f5fd67", "dark": "#8c9900" },
    "700": { "color": "#afb42b", "light": "#e4e65e", "dark": "#7c8500" },
    "800": { "color": "#9e9d24", "light": "#d2ce56", "dark": "#6c6f00" },
    "900": { "color": "#827717", "light": "#b4a647", "dark": "#524c00" },
    "A100": { "color": "#f4ff81", "light": "#ffffb3", "dark": "#bfcc50" },
    "A200": { "color": "#eeff41", "light": "#ffff78", "dark": "#b8cc00" },
    "A400": { "color": "#c6ff00", "light": "#fdff58", "dark": "#90cc00" },
    "A700": { "color": "#aeea00", "light": "#e4ff54", "dark": "#79b700" }
  },
  "Yellow": {
    "50": { "color": "#fffde7", "light": "#ffffff", "dark": "#cccab5" },
    "100": { "color": "#fff9c4", "light": "#fffff7", "dark": "#cbc693" },
    "200": { "color": "#fff59d", "light": "#ffffcf", "dark": "#cbc26d" },
    "300": { "color": "#fff176", "light": "#ffffa8", "dark": "#cabf45" },
    "400": { "color": "#ffee58", "light": "#ffff8b", "dark": "#c9bc1f" },
    "500": { "color": "#ffeb3b", "light": "#ffff72", "dark": "#c8b900" },
    "600": { "color": "#fdd835", "light": "#ffff6b", "dark": "#c6a700" },
    "700": { "color": "#fbc02d", "light": "#fff263", "dark": "#c49000" },
    "800": { "color": "#f9a825", "light": "#ffd95a", "dark": "#c17900" },
    "900": { "color": "#f57f17", "light": "#ffb04c", "dark": "#bc5100" },
    "A100": { "color": "#ffff8d", "light": "#ffffbf", "dark": "#cacc5d" },
    "A200": { "color": "#ffff00", "light": "#ffff5a", "dark": "#c7cc00" },
    "A400": { "color": "#ffea00", "light": "#ffff56", "dark": "#c7b800" },
    "A700": { "color": "#ffd600", "light": "#ffff52", "dark": "#c7a500" }
  },
  "Amber": {
    "50": { "color": "#fff8e1", "light": "#ffffff", "dark": "#ccc5af" },
    "100": { "color": "#ffecb3", "light": "#ffffe5", "dark": "#cbba83" },
    "200": { "color": "#ffe082", "light": "#ffffb3", "dark": "#caae53" },
    "300": { "color": "#ffd54f", "light": "#ffff81", "dark": "#c8a415" },
    "400": { "color": "#ffca28", "light": "#fffd61", "dark": "#c79a00" },
    "500": { "color": "#ffc107", "light": "#fff350", "dark": "#c79100" },
    "600": { "color": "#ffb300", "light": "#ffe54c", "dark": "#c68400" },
    "700": { "color": "#ffa000", "light": "#ffd149", "dark": "#c67100" },
    "800": { "color": "#ff8f00", "light": "#ffc046", "dark": "#c56000" },
    "900": { "color": "#ff6f00", "light": "#ffa040", "dark": "#c43e00" },
    "A100": { "color": "#ffe57f", "light": "#ffffb0", "dark": "#cab350" },
    "A200": { "color": "#ffd740", "light": "#ffff74", "dark": "#c8a600" },
    "A400": { "color": "#ffc400", "light": "#fff64f", "dark": "#c79400" },
    "A700": { "color": "#ffab00", "light": "#ffdd4b", "dark": "#c67c00" }
  },
  "Orange": {
    "50": { "color": "#fff3e0", "light": "#ffffff", "dark": "#ccc0ae" },
    "100": { "color": "#ffe0b2", "light": "#ffffe4", "dark": "#cbae82" },
    "200": { "color": "#ffcc80", "light": "#ffffb0", "dark": "#ca9b52" },
    "300": { "color": "#ffb74d", "light": "#ffe97d", "dark": "#c88719" },
    "400": { "color": "#ffa726", "light": "#ffd95b", "dark": "#c77800" },
    "500": { "color": "#ff9800", "light": "#ffc947", "dark": "#c66900" },
    "600": { "color": "#fb8c00", "light": "#ffbd45", "dark": "#c25e00" },
    "700": { "color": "#f57c00", "light": "#ffad42", "dark": "#bb4d00" },
    "800": { "color": "#ef6c00", "light": "#ff9d3f", "dark": "#b53d00" },
    "900": { "color": "#e65100", "light": "#ff833a", "dark": "#ac1900" },
    "A100": { "color": "#ffd180", "light": "#ffffb1", "dark": "#caa052" },
    "A200": { "color": "#ffab40", "light": "#ffdd71", "dark": "#c77c02" },
    "A400": { "color": "#ff9100", "light": "#ffc246", "dark": "#c56200" },
    "A700": { "color": "#ff6d00", "light": "#ff9e40", "dark": "#c43c00" }
  },
  "Deep Orange": {
    "50": { "color": "#fbe9e7", "light": "#ffffff", "dark": "#c8b7b5" },
    "100": { "color": "#ffccbc", "light": "#ffffee", "dark": "#cb9b8c" },
    "200": { "color": "#ffab91", "light": "#ffddc1", "dark": "#c97b63" },
    "300": { "color": "#ff8a65", "light": "#ffbb93", "dark": "#c75b39" },
    "400": { "color": "#ff7043", "light": "#ffa270", "dark": "#c63f17" },
    "500": { "color": "#ff5722", "light": "#ff8a50", "dark": "#c41c00" },
    "600": { "color": "#f4511e", "light": "#ff844c", "dark": "#b91400" },
    "700": { "color": "#e64a19", "light": "#ff7d47", "dark": "#ac0800" },
    "800": { "color": "#d84315", "light": "#ff7543", "dark": "#9f0000" },
    "900": { "color": "#bf360c", "light": "#f9683a", "dark": "#870000" },
    "A100": { "color": "#ff9e80", "light": "#ffd0b0", "dark": "#c96f53" },
    "A200": { "color": "#ff6e40", "light": "#ffa06d", "dark": "#c53d13" },
    "A400": { "color": "#ff3d00", "light": "#ff7539", "dark": "#c30000" },
    "A700": { "color": "#dd2c00", "light": "#ff6434", "dark": "#a30000" }
  },
  "Brown": {
    "50": { "color": "#efebe9", "light": "#ffffff", "dark": "#bdb9b7" },
    "100": { "color": "#d7ccc8", "light": "#fffffb", "dark": "#a69b97" },
    "200": { "color": "#bcaaa4", "light": "#efdcd5", "dark": "#8c7b75" },
    "300": { "color": "#a1887f", "light": "#d3b8ae", "dark": "#725b53" },
    "400": { "color": "#8d6e63", "light": "#be9c91", "dark": "#5f4339" },
    "500": { "color": "#795548", "light": "#a98274", "dark": "#4b2c20" },
    "600": { "color": "#6d4c41", "light": "#9c786c", "dark": "#40241a" },
    "700": { "color": "#5d4037", "light": "#8b6b61", "dark": "#321911" },
    "800": { "color": "#4e342e", "light": "#7b5e57", "dark": "#260e04" },
    "900": { "color": "#3e2723", "light": "#6a4f4b", "dark": "#1b0000" }
  },
  "Grey": {
    "50": { "color": "#fafafa", "light": "#ffffff", "dark": "#c7c7c7" },
    "100": { "color": "#f5f5f5", "light": "#ffffff", "dark": "#c2c2c2" },
    "200": { "color": "#eeeeee", "light": "#ffffff", "dark": "#bcbcbc" },
    "300": { "color": "#e0e0e0", "light": "#ffffff", "dark": "#aeaeae" },
    "400": { "color": "#bdbdbd", "light": "#efefef", "dark": "#8d8d8d" },
    "500": { "color": "#9e9e9e", "light": "#cfcfcf", "dark": "#707070" },
    "600": { "color": "#757575", "light": "#a4a4a4", "dark": "#494949" },
    "700": { "color": "#616161", "light": "#8e8e8e", "dark": "#373737" },
    "800": { "color": "#424242", "light": "#6d6d6d", "dark": "#1b1b1b" },
    "900": { "color": "#212121", "light": "#484848", "dark": "#000000" }
  },
  "Blue Grey": {
    "50": { "color": "#eceff1", "light": "#ffffff", "dark": "#babdbe" },
    "100": { "color": "#cfd8dc", "light": "#ffffff", "dark": "#9ea7aa" },
    "200": { "color": "#b0bec5", "light": "#e2f1f8", "dark": "#808e95" },
    "300": { "color": "#90a4ae", "light": "#c1d5e0", "dark": "#62757f" },
    "400": { "color": "#78909c", "light": "#a7c0cd", "dark": "#4b636e" },
    "500": { "color": "#607d8b", "light": "#8eacbb", "dark": "#34515e" },
    "600": { "color": "#546e7a", "light": "#819ca9", "dark": "#29434e" },
    "700": { "color": "#455a64", "light": "#718792", "dark": "#1c313a" },
    "800": { "color": "#37474f", "light": "#62727b", "dark": "#102027" },
    "900": { "color": "#263238", "light": "#4f5b62", "dark": "#000a12" }
  }
}

generator.js

// Use this file to update colors.json
// Open https://material.io/resources/color/ and run code below on dev console
(async () => {
  function getColorLevelsMap(colorLabel) {
    const levels =
      "50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700".split(" ");

    const levelsMap = {};
    for (const level of levels) {
      const el = document.querySelector(
        `.palette-container li[aria-label="${colorLabel} ${level}"]`
      );
      if (el) {
        levelsMap[level] = el.getAttribute("value");
      }
    }
    return levelsMap;
  }

  function wait(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async function clickOnColor(color) {
    const el = document.querySelector(
      `.palette-container li[value="${color}"]`
    );
    el.click();
  }

  function getCurrentSchemeColors() {
    const schemeContainer = document.querySelector(
      ".scheme-container__content"
    );
    return {
      color: schemeContainer.querySelector("div p").textContent,
      light: schemeContainer.querySelector("li:nth-child(1) p:nth-child(2)")
        .textContent,
      dark: schemeContainer.querySelector("li:nth-child(2) p:nth-child(2)")
        .textContent,
    };
  }

  async function getColorScheme(color) {
    clickOnColor(color);

    while (true) {
      const scheme = getCurrentSchemeColors();
      if (scheme.color.toLowerCase() === color.toLowerCase()) {
        return scheme;
      }
      await wait(10);
    }
  }

  const colorLabels = [...document.querySelectorAll(".color-labels li")].map(
    (el) => el.textContent.trim()
  );

  const colors = {};
  for (const colorLabel of colorLabels) {
    colors[colorLabel] = {};

    const levelsMap = getColorLevelsMap(colorLabel);
    for (const [level, color] of Object.entries(levelsMap)) {
      colors[colorLabel][level] = await getColorScheme(color);
    }

    console.log(`Done ${colorLabel}`);
  }

  copy(JSON.stringify(colors));
  console.log(`All Done! colors.json copied to clipboard`);
})();