可自定义颜色选择器

Question

我正在构建一个网络应用程序，我想放入一个颜色选择器。但是，我想将颜色选项限制为一组有限的颜色。具体来说，我将确定哪些十六进制颜色与可用的 DMC 绣花线最匹配，并且我希望颜色选择器仅显示这些颜色。我搜索了可配置的颜色选择器，但到目前为止我发现的所有颜色选择器都不允许您限制可用的颜色。有谁知道允许这种配置的颜色选择器？

Answer 1

此解决方案使用Pickr：

const dmcColors = [
  "#ff0000",
  "#00ff00",
  "#0000ff",
  "#f0e68c",
  "#8a2be2",
  "#aaaaaa",
]; // Add your DMC colors here

const pickr = Pickr.create({
  el: "#color-picker",
  theme: "nano", // or 'monolith', 'nano'
  swatches: dmcColors,
  components: {
    palette: true,
    preview: true,
    opacity: false,
    hue: true,
    interaction: {
      hex: true,
      input: true,
    },
  },
});

pickr.on("change", (color, instance) => {
  // Get the selected color as HEX format
  const selectedColor = color.toHEXA().toString();
  console.info(`Selected Color: ${selectedColor}`);
});
 

<!--add this link element in head tag -->
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"
    />

<div id="color-picker">Hello</div>

<p id="selected-color-display">Selected Color: None</p>


<!--Add this script at the bottom of body element -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr"></script>