Visualize theme palette in jsfiddle

palette.js

const colors = {
  green: {
    100: '#00ff00',
  },
}

Object.entries(colors).map(([color, shades]) =>
  Object.entries(shades).map(([shade, colorCode]) => renderShade(color, shade, colorCode))
)

function renderShade(color, shade, colorCode) {
  let container = getContainer(color)
  const box = document.createElement("div")
  box.textContent = color + ':' + shade
  box.style.display = "flex"
  box.style.justifyContent = "center"
  box.style.alignItems = "center"
  box.style.width = "100px"
  box.style.height = "100px"
  box.style.backgroundColor = colorCode
  container.appendChild(box)
}

function getContainer(color) {
  let container = document.querySelector("#" + color)
  if (!container) {
    container = document.createElement("div")
    container.style.display = "flex"
    container.style.flexWrap = "wrap"
    container.setAttribute("id", color)
    const headline = document.createElement("h3")
    headline.textContent = color
    headline.style.textTransform = "uppercase"
    document.body.appendChild(headline)
    document.body.appendChild(container)
  }
  return container
}