HTML如何获取RGB颜色

Question

我需要在WebGL中完成一个小项目，并需要将颜色从HTML传递到JavaScript。问题是，我需要将颜色以RGB格式传递给WebGL才能直接使用。我想知道是否有一种使用HTML5从输入中获取RGB颜色的方法。

我正在做这个：

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

问题在于，如果我尝试获取这种颜色，他会给我十六进制的值。我知道通过 JavaScript 函数可以将十六进制转换为 RGB，但我需要知道是否有更简单的方法来做到这一点并使其正常工作。

- user6084053

Answer 1

幸运的是，在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 的优美之处，我们可以在一行代码中完成这一切：

And with the beauty of JavaScript, we can do this all on one line of code:

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

- James Donnelly

---

谢谢，HTML5有很多改进之处，为什么他们不直接加一个inputType = RgbColor或类似的东西呢？ - user6084053

@FilipeCosta 可能是因为有很多不同的颜色类型。我知道十六进制表示法本身有4种公认的格式（#RGB，#RGBA，#RRGGBB和#RRGGBBAA）。需要进行长时间的讨论，以确定应该接受哪些格式。不过我想我们可能会在未来的HTML版本中看到类似的东西。 - James Donnelly