A Simple Starter Guide to Create a Web Color Picker in JavaScript: Iro.js for Beginners

Iro.js is a powerful javascript component for creating web color picker, it is beautiful and easy to use.  In this tutorial, we will implement this web color picker with some steps.

View this web color picker demo

How to create a web color picker using iro.js

1.Import iro.js javascript library

<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>

2.Create a div container to show web color picker

<div id="picker-container"></div>

3.Create a web color picker

<script type="text/javascript">
var colorPicker = new iro.ColorPicker("#picker-container", {
  // Set the size of the color picker
  width: 250,
  // Set the initial color
  color: "#ff6600"
});
</script>

Here we have set the width and inital color of this web color picker.

4.Bind an event on this color picker to get the hex value of selected color

<script type="text/javascript">
colorPicker.on('color:change', function(color) {
  // log the current color as a HEX string, such as #defff4
  console.log(color.hexString);
});
</script>