Spectrum From Master

A working demo of the latest version of spectrum colorpicker

HTML

<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.148 97.147" width="70" height= "70">  
  <g id="Group_5629" data-name="Group 5629" transform="translate(882.085 -6394.32)">
    <g class="Rectangle_171" data-name="Rectangle 171" stroke="#fff" stroke-width= "6px" fill="rgb(231, 224, 224)" transform="translate(-882.085 6394.32)">
      <rect class="cls-4" stroke="none" width="97.148" height="97.148" rx="48.574"></rect>
      <rect class="cls-5" stroke="none" x="3" y="3" width="91.148" height="91.148" rx="45.574"></rect>
    </g>
    <path id="Subtraction_28" data-name="Subtraction 28" class="cls-2" fill="rgba(0,0,0,0.1)" d="M42.351,85.177A42.317,42.317,0,0,1,0,42.825v-.473A42.316,42.316,0,0,1,42.351,0l.435,0V85.175h-.435Z" transform="translate(-876.079 6400.308)"></path>
    <g id="Group_5627" data-name="Group 5627" transform="translate(-825.843 6427.227)">
      <path id="Path_6553" data-name="Path 6553" class="cls-3" fill="#02848e" d="M24.162,30.605H1.611A1.616,1.616,0,0,1,0,28.995V14.5a1.616,1.616,0,0,1,1.611-1.611H3.222V9.665a9.665,9.665,0,0,1,19.33,0v3.222h1.611A1.616,1.616,0,0,1,25.773,14.5v14.5A1.616,1.616,0,0,1,24.162,30.605ZM6.443,12.887H19.33V9.665a6.443,6.443,0,0,0-12.887,0Z" transform="translate(0)"></path>
    </g>
    <g class="sp-active" id="Group_5628" data-name="Group 5628" transform="translate(-868.92 6427.585)">
      <path id="Path_6554" data-name="Path 6554" class="cls-3"...

CSS

.full-spectrum .sp-palette {
max-width: 200px;
}

JavaScript

$("#Group_5628").spectrum({
    color: "#f00",
    preferredFormat: "rgb",
    change: function(color) {        
        $(".Rectangle_171").attr("fill",color);
        $("#basic-log").text("change called: " + color.toHexString());
    }
});