虹膜颜色选择器：获取选定颜色作为 RGB 值答案

【问题标题】：Iris Colour Picker: get selected colour as RGB value虹膜颜色选择器：获取选定颜色作为 RGB 值
【发布时间】：2017-08-28 09:00:50
【问题描述】：

使用虹膜颜色选择器，是否可以获得 rgb 格式的选定颜色？目前我总是将选定的颜色作为十六进制代码。

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
    }
});

【问题讨论】：

标签： javascript colors

【解决方案1】：

Iris 插件在底层使用 Color.js，它再次包含颜色转换工具。

调用 $(elemet).iris('color', true) 会得到 Color.js 对象，它有一个 toCSS 方法，可以返回大多数可用格式的颜色

$('.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" />

【讨论】：