javascript - HTML 在 Rgb 中获取颜色

标签 javascript html colors

好吧,我需要在 webgl 中做一些小项目,并且需要将颜色从 html 传递到 javascript,问题是我需要 Rgb 中的那种颜色才能直接与 webGl 一起工作,我需要知道的是是否有是一种使用 html5 从输入中获取 rgb 颜色的方法。

我这样做:

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

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

最佳答案

幸运的是,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)"

关于javascript - HTML 在 Rgb 中获取颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36697749/

相关文章:

java - 将颜色更改为 JPanel 并返回到原始状态

android - 如何设置随机颜色

javascript - 动态(重新)创建 iframe 内容不会重置 Chrome 中的 JS 对象

javascript - jQuery 弃用 '.toggle()' 。寻求替代方法

javascript - React Component 的状态用 .unshift() 渲染很奇怪,但是用 .push() 渲染正常

html - 如何创建一个居中的 AJAX 模式弹出窗口,其宽度是基于百分比的?

html - CSS : alternative to vertical-align?

javascript - 更改数组中的索引值

html - 如何让我的图标与我的矩形显示在同一行?

python - matplotlib 中用于 SciPy 树状图的更大调色板 (Python)