Color Picker 와 Gradient

어디서든 쓸 수 있는 간단한 컬러피커를 알아봅시다.

시작하기 →

Color Picker 와 Gradient

CodeMirro 또는 단독으로 간단하게 컬러피커를 사용 할 수 있습니다.

Color manipulation

색을 활용 할 수 있는 함수를 제공합니다. 자신만의 색을 만들어 보세요.

Image Filter & WebGL

색을 사용한 몇 가지 이미지 필터도 제공합니다. 또한 속도를 위해서 WebGL 이미지 필터를 지원합니다. 이미지를 자유롭게 바꿔보세요.

EasyLogic ColorPicker 1.10.3
CodeMirror ColorPicker 1.9.72

# 다양한 ColorPicker 스타일

# ColorPicker

import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'
// Standalone 
var ColorPicker = EasyLogicColorPicker.ColorPicker;
var colorpicker = ColorPickerUI.create({
    color: 'blue', // init color code 
    position: 'inline',   // default show 
    container : '#color-container'
    type : 'palette', // or 'sketch',  default type is 'chromedevtool'
    onChange: color => {
      console.log(color);
    }
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13

# GradientPicker

css의 gradient 를 손쉽게 편집할 수 있습니다.

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 으로 사용하실 수 있습니다. (코드미러 용은 npm codemirror-colorpicker 패키지를 이용해주세요.)

// CodeMirror Addon 
var cm = CodeMirror.fromTextArea(document.getElementById("sample_text_area"), {
    colorpicker : {
        mode : 'edit'
    }
});
1
2
3
4
5
6