Fork me on GitHub

CodeMirror ColorPicker AddOn 

// CodeMirror Addon 
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit'
    }
});
// Standalone 
var ColorPicker = CodeMirrorColorPicker.ColorPicker;
var colorpicker = new ColorPicker({
    color: 'blue', // init color code 
    position: 'inline',   // default show 
    container : '#color-container'
    type : 'palette' // or 'sketch',  default type is 'chromedevtool'
})

ColorPicker Style

Chrome Devtool Style

Sketch Style

Only Palette Style

{
    colorpicker : {
        type : 'palette' // or 'sketch',  default type is 'chromedevtool'
    }    
}

Image Filter

Image Palette

var Color = CodeMirrorColorPicker.Color;
Color.ImageToRGB(blob, { maxWidth: 100 }, function (results) {
    const colors = Color.palette(results, 16);   // k = 16 

    console.log(colors);
})

Color Scales

Saturation Scale

Value Scale

var Color = CodeMirrorColorPicker.Color;
var results = Color.scaleS(color, 100, 'hex');   // Saturation 
var results2 = Color.scaleV(color, 100, 'hex');   // Value

Color Scales - Template 

var Color = CodeMirrorColorPicker.Color;
var colors = ['red', 'green', 'blue']
var scaleColors = Color.scale(colors, count);
var scaleColors = Color.scale.parula(count);   // ['#352a87', '#0f5cdd', '#00b5a6', '#ffc337', '#fdff00']
var scaleColors = Color.scale.jet(count);   // ['#00008f', '#0020ff', '#00ffff', '#51ff77', '#fdff00', '#ff0000', '#800000']
var scaleColors = Color.scale.hsv(count);   // ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff', '#ff0000']
var scaleColors = Color.scale.hot(count);   // ['#0b0000', '#ff0000', '#ffff00', '#ffffff']
var scaleColors = Color.scale.pink(count);   // ['#1e0000', '#bd7b7b', '#e7e5b2', '#ffffff']
var scaleColors = Color.scale.bone(count);   // ['#000000', '#4a4a68', '#a6c6c6', '#ffffff']
var scaleColors = Color.scale.copper(count);   // ['#000000', '#3d2618', '#9d623e', '#ffa167', '#ffc77f']

Default Html Sample