Get started with spectrum CDN

MIT licensed

The Spectrum library is a customizable color picker component.

Tags:
  • color
  • colorpicker
  • ui

Stable version

Copied!

How to start using spectrum CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with spectrum CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/spectrum.css">
  <script src="https://cdn.cdnhub.io/spectrum/1.8.1/spectrum.min.js"></script>
</head>
<body>
  <button id="open-colorpicker">Open Color Picker</button>
  <div id="colorpicker"></div>

  <script>
    const colorpicker = new window.Spectrum("#colorpicker", {
      color: "#4CAF50",
      showInitial: true,
      preferredFormat: "hex",
      localStorageKey: "spectrum-colorpicker",
      palettes: [
        ["#f44336", "#2196f3", "#4caf50", "#ffc107"],
        ["#9c27b0", "#03a9f4", "#2e7d32", "#ffeb3b"],
        ["#673ab7", "#3f51b5", "#2196f3", "#4caf50"],
        ["#e91e63", "#9c27b0", "#03a9f4", "#2e7d32"]
      ]
    });

    document.getElementById("open-colorpicker").addEventListener("click", () => {
      colorpicker.show();
    });

    colorpicker.on("change", (color) => {
      console.log(color.toHexString());
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions