Set hex color from input

[jcrawford]

I have been looking through the documentation and I cannot find a way to set a color as the active color. For instance if I have an input box with an on change event and I enter #ffffff it does not update the selected color in the wheel.

If there is not a way can you implement that feature?

[jaames]

Ah, you might be looking for the Working with Colors section in the documentation? The TL;DR is each color picker has a color prop, which has a bunch of properties on it for both setting and getting the currently selected color in a variety of different formats. For setting the color from a hex value, you can use something like colorPicker.color.hexString = '#ff0000'.

Here's an example for hooking up an input element to a color picker's hexString value, and vice versa:

<div id="colorPicker"></div>
<input id="hexInput"></input>

var colorPicker = new iro.ColorPicker('#colorPicker');
var hexInput = document.getElementById('hexInput');

// whenever the input is committed, update the color picker's selected color from the value
hexInput.addEventListener('change', function() {
  // (maybe do some regex validation here to make sure the input is a valid hex string first...)
  colorPicker.color.hexString = this.value;
});

// whenever the color picker is updated, update the input value to match it
colorPicker.on('change', function(color) {
  hexInput.value = color.hexString;
});

I also just quickly updated the Codepen demo to include an input element if you want to play around with it:
https://codepen.io/rakujira/pen/WZOeNq?editors=1010

[jcrawford]

Ahh thank you very much, I was trying to do colorPicker.color = '#FFFFFF';
Appreciate the clarification.

[jaames]

No problem! Maybe I ought to improve the documentation there to make it a bit clearer.