Step-by-step Guide to Create a Color Picker in JavaScript: tui-color-picker.js for Beginners

tui-color-picker.js a simple javascript library for creating a color picker in browser, which is very useful to select color by clicking. In this tutorial, we will implement this color picker with some steps using tui-color-picker.js.

View color picker demo

How to create a color picker using tui-color-picker.js?

1. Import tui-color-picker.js and tui-color-picker.css file by cdn

<script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.js"></script>
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">

2.Create a div to contain a color picker

<div id="tui-color-picker-conatiner"></div>

3.Set the css style of tui-color-picker-conatiner

You can modify this css style for your own web application.

<style type="text/css">
#tui-color-picker-conatiner{border:#eeeeee solid 1px; float:left; padding:5px;}
</style>

4.Create color picker using tui-color-picker.js

<script type="text/javascript">
// get colorPicker class
var colorPicker = tui.colorPicker;
const container = document.getElementById('tui-color-picker-conatiner');
const instance = colorPicker.create({
  container: container, // this is a html element object
  detailTxt: 'More' // set text on button
});
</script>

5.Bind an event on color picker and get the hex value of selected color

<script type="text/javascript">
// bind a event on colorPicker and get the hex value of selected color, such as #ff6600
instance.on('selectColor', function(ev) {
    console.log(ev['color']);
});
</script>