Select Color (hex, rgb, hsl) with Iro.js – JavaScript Color Picker

Iro.js is a javascript color picker, it allows us to pick up color and get color value in html page. In this tutorial, you can use it easily following by our steps and codes.

Color Picker Preview

How to use iro.js to pick up color?

Step 1. Load iro.min.js file in head tag.

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

Step 2. Create a range to display color picker.

<div class="colorPicker"></div>

Step 3. Create a range to display value of color.

If you do not want to display the value of color, you can save it into a variable.

<div id="values"></div>

Step 4. Creat a color picker by iro.js, and read selected color value.

<script type="text/javascript">
// create color picker in display range.
var colorPicker = new iro.ColorPicker(".colorPicker", {
// color picker options
// Option guide: https://iro.js.org/guide.html#color-picker-options
width: 280,
color: "rgb(255, 0, 0)",
borderWidth: 1,
borderColor: "#fff",
});

var values = document.getElementById("values");

// read color value
colorPicker.on(["color:init", "color:change"], function(color){
values.innerHTML = [
"hex: " + color.hexString,
"rgb: " + color.rgbString,
"hsl: " + color.hslString,
].join("<br>");
});
</script>

However, iro.js exits display bug like below in my browser,

James Daniel, the author of iro.js, said: Bugs like this aren’t always obvious, because each browser is different.