Chrome devtools colorpicker concept

HTML

<input type='spectrum' value='orange' />

<br />
<input type='spectrum' value='rgba(255, 0, 0, .5)' />

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:inline-block;
}
.sp-container.sp-flat {
    position: relative;
}

/* 
   Keep square proportions using percentage widths.
   Basic aspect ratio technique modified from:
   http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
*/
.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; 
}

/* Don't allow text selection */
.sp-replacer, .sp-preview, .sp-dragger, .sp-slider , .sp-container.sp-dragging .sp-input, .sp-container button  { 
    -webkit-user-select:none; user-select: none; 
}

.sp-range-container input { width: 80%; }
.sp-replacer {
    display: inline-block;
    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);
    background-repeat: no-repeat;
    border: 1px solid rgba(128, 128, 128, 0.6);
}

.sp-replacer:hover {
    border: 1px solid rgba(64, 64, 64, 0.8);
}
.sp-preview { width:100%; height:100%;}

/* Replacer (the little preview div that shows up instead of the <input>) 
.sp-replacer {
    margin:0;
    border-radius: 5px;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    zoom: 1;
    *display: inline;
}
.sp-dd { 
    padding: 2px 0;
    height: 16px; 
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    width:25px;
   ...

JavaScript

// Spectrum: The No Hassle Colorpicker
// https://github.com/bgrins/spectrum
// Author: Brian Grinstead
// License: MIT
// Requires: jQuery, spectrum.css

(function(window, $, undefined) {
    var defaultOpts = {
        color: false,
        flat: false,
        showInput: false,
        showAlpha: true,
        changeOnMove: true,
        beforeShow: noop,
        move: noop,
        change: noop,
        show: noop,
        hide: noop,
        showPallet: false,
        maxPalletSize: 12,
        theme: 'sp-dev',
        pallet: ['fff', '000']
    },
    spectrums = [],
    replaceInput = [
        "<div class='sp-replacer'>",
            "<div class='sp-preview'></div>",
        "</div>"
    ].join(''),
    markup = (function() {
        
        
        return [
            "<div class='sp-container'>",
                "<div class='sp-top sp-cf'>",
                    "<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-pallet sp-cf'></div>",
                "<div class='sp-range-container sp-cf'>",
                    "<input type='range' class='sp-range' min='0' max='100' />",
                "</div>",
                "<div class='sp-input-container sp-cf'>",
                    "<input class='sp-input' type='text' spellcheck='false'  />",
                    "<div>",
                        "<button class='sp-cancel sp-hide-small'>Cancel</button>",
                ...