Color Picker & Gradient

easylogic color picker used anywhere.

Color Picker & Gradient

You can simply use color picker in Codemirror. Or you can use it alone.

Color manipulation

Provides a function for handling colors. You can create your own color.

Image Filter & WebGL

Provides a simple image filter concept using color. Also support WebGL image filter for speed. Let's make the image freely.

EasyLogic ColorPicker 1.10.3

CodeMirror ColorPicker 1.9.72

# Colorpicker Styles

# ColorPicker for Standalone

import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'
// Standalone 
var colorpicker = ColorPickerUI.create({
    color: 'blue', // init color code 
    position: 'inline',   // default show 
    container : '#color-container'
    type : 'sketch', // or 'sketch',  default type is 'chromedevtool'
    onHide: () => {
      console.log('hide');
    },
    onChange: color => {
      console.log(color);
    },
    onLastUpdate: color => {
      console.log(color);
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# GradientPicker for Standalone

You can make css gradient simply.

Support gradient format : linear-gradient, repeating-linear-gradient, radial-gradient, repeating-radial-gradient, conic-gradient, repeating-conic-gradient

import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'


 this.gradientPicker = ColorPickerUI.createGradientPicker({
   position: "inline",
   container: this.refs.$color.el,
   gradient: 'linear-gradient(to right, white 0%, black 100%)',
   onChange: (gradientString) => {
     console.log(gradientString);
   }
 });


 // set value 
 this.gradientPicker.setValue('radial-gradient(circle, white 0%, black 100%'));

 // get value
 var gradientString = this.gradientPicker.getValue()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# CodeMirror ColorPicker Addon

// CodeMirror Addon 
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit'
    }
});

1
2
3
4
5
6