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.

create a web color picker using javascript iro.js

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>

Leave a Reply

Your email address will not be published. Required fields are marked *