Html获取Rgb中的颜色

Html get color in Rgb

本文关键字：颜色 Rgb 获取 Html      更新时间：2023-09-26

我需要在webgl中做一个小项目，并需要将颜色从html传递到javascript，问题是我需要Rgb中的颜色才能直接使用webgl，我需要知道的是，是否有一种方法可以使用html5从输入中获得Rgb中的颜色。

我在做这个：

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

这里的问题是，如果我试图获得这种颜色，他会给我十六进制值，我知道通过javascript和一个函数，我可以将十六进制转换为rgb，但我需要知道是否有更简单的方法可以做到这一点并付诸实施。

幸运的是，HTML5中的颜色值只有在#XXXXXX格式下才有效（意味着rgb(...)和#XXX无效）。我们可以利用这一点，因为我们总是准确地知道RGB位置在结果值中的位置： 
#XXXXXX
#RRGGBB

要将其转换为rgb(...)，我们只需去掉#字符，并将RR、GG和BB值转换为十进制：

// #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)"
相关文章：