# ColorPicker 개요

## Content

**ColorPicker** 컨트롤을 통해, 패널을 클릭하여 색상, 채도, 밝기 및 알파와 같은 채널을 조정할 수 있습니다. 이 컨트롤은 **InputColor** 컨트롤의 드롭다운으로 사용할 수 있습니다. **value** 속성을 사용하여 현재 선택한 색상을 가져오거나 설정할 수 있습니다.

![colorpicker-overview](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/55e359f3-7c23-4ca9-ac69-930959e94e19/colorpicker-overview.8e8085.gif)

##### HTML

```html
<h1>ColorPicker</h1>
<div id="output">
  Select a background for me!
</div>
<div id="theColorPicker"></div> 
```

##### CSS

```css
h1{
  margin: 10px;
}

.wj-colorpicker {
  margin: 10px;
}
#output {
  margin: 10px;
  float: left;
  font-size: 12px;
  border: 1px solid grey;
  padding: 12px;
}
```

##### Javascript

```javascript
import * as input from '@mescius/wijmo.input';

function init() {
    // ColorPicker
    let theColorPicker = new input.ColorPicker('#theColorPicker', {
        showAlphaChannel: true,
        showColorString: true,
        valueChanged: (sender) => setBackground(sender.value)
    });
    
    // 선택된 색상 보여주기
    function setBackground(color) {
        document.getElementById('output').style.background = color;
        theColorPicker.value = color;
    }
}
```

또한 **showAlphaChannel**, **showColorString** 및 **palette** 속성 값을 변경하여 ColorPicker를 사용자 정의할 수 있습니다. 자세한 구현은 [ColorPicker](https://demo.mescius.co.kr/wijmo/learn-wijmo/Input/ColorPicker/Overview/purejs) 데모를 참고하시길 바랍니다.

ColorPicker는 4개의 패널로 나누어집니다: 팔레트 패널(Palette Panel), 채도/명도 패널(Saturation/Brightness Panel), 색상 패널(Hue Panel), 투명도 패널(Transparency Panel). 각 영역은 포커스를 얻은 뒤 키보드의 위/아래/왼쪽/오른쪽 화살표 키를 사용하여 색상을 변경할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/74f79803-efbb-406c-a8d2-86ea09e5fb97/image.6e03a4.e85815.png)

기본적으로 ColorPicker는 Tab 키와 Shift + Tab 키를 사용해 패널 간 포커스를 전환하는 기능을 지원하지 않습니다. 다음과 같은 방법으로 전환 기능을 활성화할 수 있습니다:

```javascript
import * as wjInput from '@mescius/wijmo.input';

new wjInput.ColorPicker('#theColorPicker', {
    keyActionTab: wjInput.ColorPickerTabKeyAction.All
});
```

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/74f79803-efbb-406c-a8d2-86ea09e5fb97/colorpicker.2d8bdd.6e73c2.gif)