Get started with 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>

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ar.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ar.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ca.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ca.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-cs.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-cs.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-de.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-de.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-dk.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-dk.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-es.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-es.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-fa.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-fa.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-fi.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-fi.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-fr.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-fr.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-gr.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-gr.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-he.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-he.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-hr.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-hr.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-id.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-id.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-it.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-it.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ja.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ja.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ko.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ko.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-lt.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-lt.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-nl.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-nl.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-pl.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-pl.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-pt-br.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-pt-br.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ru.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-ru.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-sv.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-sv.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-tr.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-tr.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-zh-cn.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-zh-cn.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-zh-tw.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/i18n/jquery.spectrum-zh-tw.min.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/spectrum.css Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/spectrum.js Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/spectrum.min.css Copied!

https://cdn.cdnhub.io/spectrum/1.8.1/spectrum.min.js Copied!

Get started with spectrum CDN

Stable version

How to start using spectrum CDN

All versions