Simple color picker input maker. Every time it's used. It will append to existing container.

color-picker-box.js

((d)=>{
let z=d.querySelector("#__z");
if (!z) {
  z = d.createElement("div");
  z.setAttribute("id", "__z");
  z.setAttribute("style", "z-index: 999999; padding: 1em; position:fixed; display:flex; width:100vw; top: 0px; left:0px; align-items: center; flex-direction: row; flex-wrap: nowrap; align-content: space-around; justify-content: center; ");
  d.body.appendChild(z);
}
let e=d.createElement("input"); 
e.setAttribute("type", "color"); 
e.setAttribute("style", "box-shadow: 0px 2px 5px rgba(0, 0, 0, .25); margin: .2em");
z.appendChild(e);
})(document)

Link able javascript:

javascript:(function()%7B((d)%3D%3E%7Blet%20z%3Dd.querySelector(%22%23__z%22)%3Bif%20(!z)%20%7Bz%20%3D%20d.createElement(%22div%22)%3Bz.setAttribute(%22id%22%2C%20%22__z%22)%3Bz.setAttribute(%22style%22%2C%20%22z-index%3A%20999999%3B%20padding%3A%201em%3B%20position%3Afixed%3B%20display%3Aflex%3B%20width%3A100vw%3B%20top%3A%200px%3B%20left%3A0px%3B%20align-items%3A%20center%3B%20flex-direction%3A%20row%3B%20flex-wrap%3A%20nowrap%3B%20align-content%3A%20space-around%3B%20justify-content%3A%20center%3B%20%22)%3Bd.body.appendChild(z)%3B%7Dlet%20e%3Dd.createElement(%22input%22)%3Be.setAttribute(%22type%22%2C%20%22color%22)%3Be.setAttribute(%22style%22%2C%20%22box-shadow%3A%200px%202px%205px%20rgba(0%2C%200%2C%200%2C%20.25)%3B%20margin%3A%20.2em%22)%3Bz.appendChild(e)%3B%7D)(document)%7D)()