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

Box Style

Chrome Devtool Style

Adobe XD Style

Sketch Style

MacOS Style

Ring Style

VSCode Style

Mini Style

Mini Vertical 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

parula

hsv

parula

jet

hot

pink

bone

copper

red,yellow,rgba(255, 0, 255, 0.5)

red,yellow

red,blue

red,black

var Color = CodeMirrorColorPicker.Color;
var colors = ['red', 'green', 'blue']
var scaleColors = Color.scale(colors, count);
var scaleColors = Color.scale('red,yellow,rgba(255, 0, 255, 0.5)', 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']

Color Gradients - Template

white, red 0.5, yellow - count 20

white, red 0.2, yellow - count 100

white, red 0.2, yellow - count 100

white, red 0.2, blue 0.6, magenta 0.95, yellow - count 100

var Color = CodeMirrorColorPicker.Color;
        var gradientColors = Color.graident("white, red 0.5, yellow", count);
        var gradientColors = Color.graident(["white", "red 0.5" , "yellow"], count);
        var gradientColors = Color.graident(["white", "red 50%" , "yellow"], count);
        var gradientColors = Color.graident([['white'], ["red", 0.5] , ["yellow"]], count);

Default Html Sample