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

By | April 19, 2019

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.

One thought on “Select Color (hex, rgb, hsl) with Iro.js – JavaScript Color Picker

  1. James Daniel

    Hi, I’m the author of iro.js. Thanks for featuring my library!

    Rather than ignoring a display bug and publishing an article that highlights it, please could you open an issue thread on the library’s github page instead? https://github.com/jaames/iro.js/issues

    Bugs like this aren’t always obvious, because each browser is different. It’s not possible for me to fix a bug if I don’t know it exists in the first place.

    Thanks!
    – James

    Reply

Leave a Reply

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