Color Picker & Gradient

# ColorPicker API

You can use colorpicker in codemirror or browser simply.

# Use for CodeMirror

# es6 style

import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/css/css'
import 'codemirror-colorpicker/dist/codemirror-colorpicker.css'
import 'codemirror-colorpicker'

// CodeMirror Addon 
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit',
        onChange: function (color) { // Called when a color is selected.
            console.log(color);
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# script load style

<!-- CodeMirror codes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.js" ></script>

<!-- ColorPicker codes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror-colorpicker@1.7.3/addon/codemirror-colorpicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/codemirror-colorpicker@1.7.3/addon/codemirror-colorpicker.js" ></script>

<script>
// CodeMirror Addon 
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit',
        onChange: function (color) { // Called when a color is selected.
            console.log(color);
        }
    }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Use for standalone

# es6 style

import {ColorPicker} from '@easylogic/colorpicker' 

var colorpicker = new ColorPicker({
    color: 'blue', // init color code 
    type : 'palette' // or 'sketch',  default type is 'chromedevtool'
})
1
2
3
4
5
6
7

# browser load style

// use CodeMirrorColorPicker as global object 
var ColorPicker = CodeMirrorColorPicker.ColorPicker;
var colorpicker = new ColorPicker({
    color: 'blue', // init color code 
    type : 'palette' // or 'sketch',  default type is 'chromedevtool'
})
1
2
3
4
5
6

# Show Color Picker

You can show in your wanted position

colorpicker.show({
    left : pos.left,
    top : pos.bottom,
    hideDelay : 2000    // default value is 2000.  color picker don't hide automatically when hideDelay is zero
}, color, function (newColor) {
    console.log(newColor)
})
1
2
3
4
5
6
7

# Show inline

You can set fixed position for color picker.

var colorpicker = new ColorPicker({
    position: 'inline',   
    container : document.getElementById('color-container')
})
1
2
3
4

# Hide Color Picker

colorpicker.hide()
1

# Callback for change and hide

var colorpicker = new ColorPicker({
    onChange (color) {
        console.log('when color is changed', color);
    },
    onLastUpdate (color) {
        console.log('last updated color is ', color);
    },
    onHide (color) {
        console.log('when colorpicker is hide', color);
    }
})
1
2
3
4
5
6
7
8
9
10
11

or

colorpicker.show({
    ...
}, color, function /* change callback */ (color) {
    console.log('change callback', color)
}, function /* hide callback */ (color) {
    console.log('hide callback', color)
}, function /* last update callback */ (color) {
    console.log('last update callback', color)
})
1
2
3
4
5
6
7
8
9

TIP

hideCallback is called only one when colorpicker is hide

# Initialize Color

colorpicker.initColor('blue')
1

# How to get current color

colorpicker.getColor('rgb')   // you also use hex or hsl
1

# ColorPicker Style

ColoPicker has chromedeveltool, sketch, macos, mini, mini-vertical, ring and palette styles.

{
    colorpicker : {
        type : 'palette' // or 'sketch',  default type is 'chromedevtool'
    }    
}
1
2
3
4
5

or

import { create } from 'codemirror-colorpicker'

var colorpicker = create({
    type: 'sketch',
    ...
})
1
2
3
4
5
6

ColorPicker Class List

ColorPicker // is equals to ChromeDevToolColorPicker,

ChromeDevToolColorPicker

MacOSColorPicker

MiniColorPicker

MiniVerticalColorPicker

RingColorPicker

you can open color picker by codemirror shortcut.

 var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    lineNumbers: true, 
    mode : "css",
    extraKeys : {
        'Ctrl-K' : function (cm, event) {   // when Ctrl+K is pressed
            cm.state.colorpicker.popup_color_picker();
        }
    },
    colorpicker : {
        mode : 'edit'
    }
});
1
2
3
4
5
6
7
8
9
10
11
12

# Set outputFormat

you can set any output color format.

{
    outputFormat : 'hex'    // get only hexcode in  both onChange and onHide  callbacks
}
1
2
3

# How to make your color palette

// CodeMirror Addon 
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit',
        colorSets: [
            { 
                name : "Material",  
                colors: [ 
                    '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',  '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722',  '#795548', '#9E9E9E', '#607D8B' 
                ]
            },
            { 
                name : "Custom", "edit" : true, "colors" : []
            },
            {
                name: "Color Scale", "scale" : ['red', 'yellow', 'black' ], count : 5
            }
        ]
        
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Set current colors in palette

// set to colors in current sets that you see 
colorpicker.setColorsInPalette(['yellow', 'red'])
1
2

# Set all colors in whole palette

picker.setUserPalette([
    { 
        name : "MyNewPalette",  
        colors: [ 
            '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',  '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722',  '#795548', '#9E9E9E', '#607D8B' 
        ]
    },
    { 
        name : "Custom", "edit" : true, "colors" : []
    },
    {
        name: "Color Scale", "scale" : ['red', 'yellow', 'black' ], count : 5
    }
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Basic Palette

Displays all specified colors.

{ 
    name : "Material",  
    colors: [ 
        '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',  '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722',  '#795548', '#9E9E9E', '#607D8B' 
    ]
}
1
2
3
4
5
6

# Editable Palette

when edit option is true, you can save your color in colorpicker.

{ 
    name : "Custom", "edit" : true, "colors" : []
}
1
2
3

Editable Color Palette

STOP

Currently, it is only stored in memory, and we plan to save the color in localStorage in the future.

# Scalable Palette

you are available color scale for palette.

{
    name: "Color Scale", "scale" : ['red', 'yellow', 'black' ], count : 5
}
1
2
3

Scalable Color Palette

Five colors is from red to yellow. Other five colors is from yellow to black

Last Updated: 4/6/2021, 12:07:54 AM

←