Html在Rgb中获得颜色

时间:2016-04-18 15:04:03

标签: javascript html5 colors

我需要在webgl中做一点projet并且需要将颜色从html传递到javascript,问题是我需要Rgb中的颜色与webGl一起工作,我需要知道的是,如果有的话是一种使用html5从输入中获取rgb颜色的方法。

我这样做:

<input type="color" onchange="cor()" id="color">

这里的问题是,如果我试图获得这种颜色,他给我十六进制值,我知道通过javascript与函数我可以将十六进制转换为rgb但我需要知道是否有更简单的方法来做到这一点并开始工作。

1 个答案:

答案 0 :(得分:8)

幸运的是,HTML5中的颜色值只有在#XXXXXX格式(意味着rgb(...)#XXX无效)时才有效。我们可以利用这一点,因为我们始终确切知道RGB位置在结果值中的位置:

#XXXXXX
#RRGGBB

要将此转换为rgb(...),我们只需删除#字符并将RRGGBB值转换为十进制:

// #XXXXXX -> ["XX", "XX", "XX"]
var value = value.match(/[A-Za-z0-9]{2}/g);

// ["XX", "XX", "XX"] -> [n, n, n]
value = value.map(function(v) { return parseInt(v, 16) });

// [n, n, n] -> rgb(n,n,n)
return "rgb(" + value.join(",") + ")";

凭借JavaScript之美,我们可以在一行代码中完成所有这些:

return "rgb(" + "#FF0000".match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) }).join(",") + ")";
-> "rgb(255,0,0)"