API Documentation

Public API

create({object}) → {Colorpicker}

namespace: tui.component.colorpicker

Create color picker instance.

Option	Description	Default Value
container	[Required] container element
color	default selected color of colorpicker	'#f8f8f8'
preset	color preset for color palette	['#181818', ... (base16 color)]
cssPrefix	css prefix text for each child elements	'tui-colorpicker-'
detailTxt	text label for detail button	'Detail'

<div id="colorpicker"></div>
<script>
var colorpicker = tui.component.colorpicker.create({
    container: document.getElementById('colorpicker'),
    color: '#f9f9f9',
    preset: ['#181818', '#292929', '#393939']
});
</script>

Colorpicker.setColor({string})

Set color to colorpicker instance. the string parameter must be hex color value ex) #ffff00

Colorpicker.getColor() → {string}

Get hex color string of current selected color in colorpicker instance.

Colorpicker.toggle({boolean})

Toggle colorpicker element. set true then reveal colorpicker view.

Colorpicker.destroy()

Destroy colorpicker instance.

Public Event

"selectColor"

Property	Description
color	selected color string (hex)
origin	'palette' or 'slider'. it is 'palette' when user click color chip in palette view. otherwise value is 'slider.'

colorpicker.on('selectColor', function(e) {
    console.log(e.color);
    console.log(e.origin);    // 'palette', 'slider'
});