jQuery #颜色转换为RGBA？

Question

如何将颜色代码#ff0000转换为RGB颜色？

可以将#ff0000转换为rgb(255,0,0);

我相信这是可能的，但我不知道如何实现。希望能得到指点！

- daryl

Answer 1

您可以使用以下方法：

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);

- Paul

---

非常好。您是否愿意花一两分钟编辑并解释这个程序的工作原理？我不喜欢只是“复制粘贴”最终结果。 - daryl

为什么不使用 var patt = /^#([\dA-F]{2})([\dA-F]{2})([\dA-F]{2})$/i;？ - Brock Adams

@tfbox，好的。我正在使用正则表达式来匹配一个看起来像#后跟着六个十六进制数字的字符串。它将它们分成两组，在这种情况下，matches[1]变成了ff，而第二和第三组变成了00。内置的parseInt函数需要一个基数作为第二个参数，所以我只需指定十六进制（基数16），它就会将其转换为整数。 - Paul

@tfbox 你应该注意，如果输入字符串不是紧跟着一个#号的6个十六进制数字，并且两端没有填充空格或其他任何东西，那么matches[1-3]将是未定义的。我没有对此进行任何错误检查，只是假设已经知道输入字符串是有效的。 - Paul

Answer 2

.css("background-color") 将返回 rgb 值。详情请见 http://api.jquery.com/css/

这里有一个 fiddle 示例：http://jsfiddle.net/3nigma/msRqv/1/

- Rafay

---

嗯，接近了。但不是我想要的“完全一样”。我应该提到我也想能够将 alpha 通道应用于此。 - daryl

非常聪明。然后只需执行 $('#element').css('background-color').replace(')', ', 0.5)').replace('rgb', 'rgba');，其中0.5是您的透明度水平。 - chris

Answer 3

纯粹使用您拥有的字符串，您可以像这样操作：

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)

- Pascal MARTIN

---

只要这些字符串以一个无用的字符开头，并且每个颜色有两个数字，那么这将起作用--但是如果每个颜色没有两个数字，这将不再起作用，并且需要进行一些重新设计。 - Pascal MARTIN

Answer 4

这个算法怎么样？

http://www.javascripter.net/faq/hextorgb.htm

你甚至可以创建一个使用该算法的JQuery插件。我觉得这很酷。我不知道是否已经存在这样的插件。

- Vicente Plata

Answer 5

你需要从十六进制定义中分离出所有三个组件，然后将它们转换为十进制。这是可行的：

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()+')';
}

- Félix Saparelli

Answer 6

试试这个：

http://jsfiddle.net/AlienWebguy/AfVhs/1/

- AlienWebguy