https://epicpandagames.com/assets/js/colorpicker.js

1function normalizeColorToHex(value) {
2  if (!value) {
3    return "#000000";
4  }
5  var v = String(value).trim().toLowerCase();
6  if (v.startsWith("#")) {
7    if (v.length === 4) {
8      return (
9        "#" +
10        v[1] +
11        v[1] +
12        v[2] +
13        v[2] +
14        v[3] +
15        v[3]
16      );
17    }
18    if (v.length === 7) {
19      return v;
20    }
21  }
22  var rgbMatch = v.match(/rgba?\(([^)]+)\)/);
23  if (rgbMatch) {
24    var parts = rgbMatch[1].split(",").map(function (p) {
25      return parseFloat(p.trim());
26    });
27    if (parts.length >= 3) {
28      var r = Math.max(0, Math.min(255, Math.round(parts[0])));
29      var g = Math.max(0, Math.min(255, Math.round(parts[1])));
30      var b = Math.max(0, Math.min(255, Math.round(parts[2])));
31      return (
32        "#" +
33        r.toString(16).padStart(2, "0") +
34        g.toString(16).padStart(2, "0") +
35        b.toString(16).padStart(2, "0")
36      );
37    }
38  }
39  return "#000000";
40}
41
42function getCSSValue(name) {
43  var root = document.documentElement;
44  var rs = getComputedStyle(root);
45  return rs.getPropertyValue(name).trim();
46}
47
48function setCSSValue(name, value) {
49  document.documentElement.style.setProperty(name, value);
50}
51
52function createColorPickers(containerId, entries) {
53  var container = document.getElementById(containerId);
54  if (!container || !Array.isArray(entries)) {
55    return;
56  }
57  while (container.hasChildNodes()) {
58    container.removeChild(container.lastChild);
59  }
60  entries.forEach(function (entry) {
61    if (!entry || !entry.id || !entry.cssVar) {
62      return;
63    }
64    var li = document.createElement("li");
65    var input = document.createElement("input");
66    input.type = "color";
67    input.name = entry.id;
68    input.id = entry.id;
69    input.dataset.cssVar = entry.cssVar;
70    var labelText = document.createTextNode(entry.label || entry.id);
71    li.appendChild(input);
72    li.appendChild(labelText);
73    container.appendChild(li);
74
75    var currentValue = getCSSValue(entry.cssVar);
76    input.value = normalizeColorToHex(currentValue);
77
78    input.addEventListener("input", function (event) {
79      var cssVar = event.target.dataset.cssVar;
80      if (cssVar) {
81        setCSSValue(cssVar, event.target.value);
82      }
83    });
84  });
85}
86
87window.createColorPickers = createColorPickers;