【发布时间】：2011-10-11 22:54:42
【问题描述】：
是否可以将#ff0000 等颜色转换为 rgb？
所以将#ff0000 转换为rgb(255,0,0);
我很确定这一定是可能的，我只是不知道怎么做。任何见解都会很棒！
【问题讨论】：
【发布时间】：2011-10-11 22:54:42
【问题描述】：
你可以使用：
var s = "#ff0000";
var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
var matches = patt.exec(s);
var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");";
alert(rgb);
【讨论】：
-
非常好。愿意花一两分钟来编辑并解释它是如何工作的吗？我不只是“复制和粘贴”最终结果。
-
为什么不使用
var patt = /^#([\dA-F]{2})([\dA-F]{2})([\dA-F]{2})$/i;？ -
@tfbox，当然。我正在使用正则表达式来匹配一个看起来像
#后跟六个十六进制数字的字符串。它将它们分组为 2 个组，在这种情况下，matches[1]变为ff，而匹配 2 和 3 变为00。内置的parseInt函数将基数作为第二个参数，所以我只指定十六进制（以 16 为底），它会完成转换为 int 的工作。 -
@tfbox 你应该注意
matches[1-3]将是未定义的，如果输入字符串不是紧跟在 # 之后的 6 个十六进制数字，并且两端没有填充空格，我不这样做对此进行任何错误检查。我只是假设已经知道输入字符串是有效的。
.css("background-color") 将返回 rgb http://api.jquery.com/css/
【讨论】：
-
嗯，关闭。但不是“完全”我所追求的。我应该提到我也希望能够将 Alpha 通道应用于此。
-
非常聪明。然后只需执行
$('#element').css('background-color').replace(')', ', 0.5)').replace('rgb', 'rgba');，其中 0.5 是您的 alpha 级别。
【讨论】：
纯粹使用你拥有的字符串，你可以这样：
var color = '#FF5500';
首先，提取每种颜色的两个十六进制数字：
var redHex = color.substring(1, 3);
var greenHex = color.substring(3, 5);
var blueHex = color.substring(5, 7);
然后，将它们转换为十进制：
var redDec = parseInt(redHex, 16);
var greenDec = parseInt(greenHex, 16);
var blueDec = parseInt(blueHex, 16);
最后，得到你的rgb() 字符串：
var colorRgb = 'rgb(' + redDec + ', ' + greenDec + ', ' + blueDec + ')';
console.log( colorRgb );
你会得到输出：
rgb(255, 85, 0)
【讨论】：
-
只要这些字符串以一个无用的字符开头并且每种颜色有两位数字，这将起作用 - 但如果每种颜色没有两位数字，这将不再起作用，并且会需要一点返工。
您必须将所有三个组件与十六进制定义分开，然后将它们转换为十进制。这有效：
function hex2rgba(x,a) {
var r=x.replace('#','').match(/../g),g=[],i;
for(i in r){g.push(parseInt(r[i],16));}g.push(a);
return 'rgba('+g.join()+')';
}
【讨论】：
【讨论】：