Jake M Jake M - 2 months ago 14
Javascript Question

Iris Colour Picker: get selected colour as RGB value

Using the Iris colour picker, is it possible to get the selected colour in rgb format? Currently I always get the selected colour as a hex code.

http://automattic.github.io/Iris/

<input class"col-picker"/>

....

$('.col-picker').iris({
mode: 'rgb', // doesn't return colour in rgb
change: function(evt, ui) {

console.log('colour as rgb', ui.color.toString());

// Above always outputs hex values not rgb
}
});

Answer Source

The Iris plugin uses Color.js under the hood, which again includes color conversion tools.

Calling $(elemet).iris('color', true) get you the Color.js object, which has a toCSS method that will return the color in most available formats

$('.col-picker').iris({
  mode: 'rgb', // doesn't return colour in rgb
  change: function(evt, ui) {
    var color = $(this).iris('color', true).toCSS('rgb');
    console.log(color)
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://automattic.github.io/Iris/javascripts/iris.min.js"></script>

<input class="col-picker" />