Chrome devtools colorpicker branch

No external dependencies

by bgrins

HTML

<div id='container'>
    <div class='swatch' id='el'></div>
    </div>

CSS

/***
Spectrum: The No Hassle Colorpicker
https://github.com/bgrins/spectrum

Author: Brian Grinstead
License: MIT
***/

.sp-container { 
    position:absolute; 
    top:0; 
    left:0; 
    display:none;
    background: rgba(230, 230, 230, 1) !important;
    border:1px solid #646464;
    border-radius:0;
    padding: 10px;
    width: 200px;
}
.sp-container.sp-flat {
    position: relative;
}
.sp-container.sp-show {
    display:inline-block;
}

/* Keep aspect ratio: http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
.sp-top {
  position:relative; 
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute; top:0; left:0; bottom:0; right:0;
}
.sp-color { 
    position: absolute;
    top:0;left:0;bottom:0;right:20%;
}
.sp-hue {
    position: absolute;
    top:0;right:0;bottom:0;left:83%;
}
.sp-fill { 
    margin-top: 80%;  /* Same as sp-color width */
}
.sp-sat, .sp-val { 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

.swatch, .sp-dragger, .sp-slider { 
    -webkit-user-select:none; user-select: none; 
}

.sp-range-container input { width: 80%; }
.swatch-inner { width:100%; height:100%; display:block; }
.swatch {
    display: inline-block;
    position:relative;
    vertical-align: baseline;
    margin-left: 1px;
    margin-right: 2px;
    margin-bottom: -1px;
    width: 1em;
    height: 1em;
    background-image: url(https://github.com/bgrins/spectrum/raw/devtools/checker.png);
    border: 1px solid rgba(128, 128, 128, 0.6);
}
.swatch:hover, .swatch.swatch-active {
    border: 1px solid rgba(64, 64, 64, 0.8);
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -moz-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
}
.sp-val {
    background-image: -moz-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image:...

JavaScript

window.onload = function() {

    
    var swatch = document.getElementById('el');
    var spectrum = new WebInspector.Spectrum(swatch, [255, 126, 255, 1]);    
    
    swatch.onclick = function(e) {
        spectrum.toggle(e);
    };
    
    spectrum.addChangeListener(function(color) {
        console.log("rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", " + color[3] + ")");
    });
    
    
    };


var WebInspector = { };

WebInspector.Spectrum = function(swatch, rgb)
{
    var document = this.document = swatch.ownerDocument;
    this.element = document.createElement('div');
    this.swatch = swatch;
    this.swatchInner = document.createElement('span');
    this.swatchInner.className = 'swatch-inner';
    this.swatch.appendChild(this.swatchInner);
    
    this.element.className = "sp-container sp-dev";
    this.element.innerHTML = [
        "<div class='sp-top'>",
            "<div class='sp-fill'></div>",
            "<div class='sp-top-inner'>",
                "<div class='sp-color'>",
                    "<div class='sp-sat'>",
                        "<div class='sp-val'>",
                            "<div class='sp-dragger'></div>",
                        "</div>",
                    "</div>",
                "</div>",
                "<div class='sp-hue'>",
                    "<div class='sp-slider'></div>",
                "</div>",
            "</div>",
        "</div>",
        "<div class='sp-range-container'>",
            "<input type='range' class='sp-range' min='0' max='100' />",
        "</div>"
    ].join('');
    
    this.element.addEventListener("click", WebInspector.Spectrum.stopPropagation, false);
    swatch.parentNode.insertBefore( this.element, swatch.nextSibling );
        
    var that = this;
    
    this.slider = this.element.querySelectorAll(".sp-hue")[0];
    this.slideHelper = this.element.querySelectorAll(".sp-slider")[0];
    WebInspector.Spectrum.draggable(this.slider, function(dragX, dragY) {
       ...