36

我对 JavaScript 和 jQuery 有点陌生，现在我遇到了一个问题：

我需要将一些数据发布到 PHP 中，并且其中一位数据需要是 div X 的背景颜色十六进制。

jQuery 具有 css("background-color") 函数，通过它我可以将背景的 RGB 值转换为 JavaScript 变量。

CSS 函数似乎返回了一个类似 rgb(0, 70, 255) 的字符串。

我找不到任何方法来获取背景颜色的十六进制（即使它在 CSS 中设置为十六进制）。

所以看来我需要转换它。我找到了一个将 RGB 转换为十六进制的函数，但需要使用三个不同的变量 r、g 和 b 来调用它。所以我需要将字符串 rgb(x,xx,xxx) 解析为 var r=x; 变量 g=xx; 变量 b=xxx; 不知何故。

我试图用 JavaScript 谷歌解析字符串，但我并不真正理解正则表达式的东西。

有没有办法让 div 的背景颜色为十六进制，或者可以将字符串转换为 3 个不同的变量？

4

10 回答 10

61

试试这个：

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

delete (parts[0]);
for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

针对以下评论中的问题：

我正在尝试修改正则表达式以处理 rgb 和 rgba，具体取决于我得到的。有什么提示吗？谢谢。

我不确定它在这个问题的上下文中是否有意义（因为你不能用十六进制表示 rgba 颜色），但我想可能还有其他用途。无论如何，您可以将正则表达式更改为：

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/

示例输出：

var d = document.createElement('div');
d.style.backgroundColor = 'rgba( 255,  60, 50, 0)';

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor);

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"]
于 2009-03-12T14:58:07.967 回答
10

如果你有 jQuery，这是我刚刚提出的超紧凑版本。

var RGBtoHEX = 函数（颜色）{
  return "#"+$.map(color.match(/\b(\d+)\b/g),函数(数字){
    return ('0' + parseInt(digit).toString(16)).slice(-2)
  }）。加入（''）;
};
于 2011-04-22T19:49:13.583 回答
8

您也可以使用 rgb 设置 CSS 颜色，例如：

background-color: rgb(0, 70, 255);

它是有效的 CSS，不用担心。

编辑：如果您绝对需要，请参阅nickf answer以获得转换它的好方法。

于 2009-03-12T14:53:46.077 回答
5

不久前我发现了另一个函数（由 R0bb13 编写）。它没有正则表达式，所以我不得不从 nickf 借来它以使其正常工作。我发布它只是因为它是一种有趣的方法，它不使用 if 语句或循环来为您提供结果。此脚本还返回带有 # 的十六进制值（我当时使用的Farbtastic插件需要它）

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

// call the function: rgb( "rgb(0, 70, 255)" );
// returns: #0046ff

注意：nickf 脚本的十六进制结果应该是 0046ff 而不是 0070ff，但没什么大不了的：P

更新，另一种更好的替代方法：

function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {
  return ("0" + parseInt(x).toString(16)).slice(-2);
 }
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
于 2009-07-29T02:32:28.890 回答
3

用 jQuery..

var cssColorToHex = function(colorStr){
    var hex = '#';
    $.each(colorStr.substring(4).split(','), function(i, str){
        var h = ($.trim(str.replace(')',''))*1).toString(16);
        hex += (h.length == 1) ? "0" + h : h;
    });
    return hex;
};
于 2010-11-16T14:25:48.500 回答
1

这些解决方案在 Chrome 中将失败，因为它返回一个 rgba(x,x,x,x) 作为背景颜色。

编辑：这不一定是真的。Chrome 仍将使用 rgb() 设置背景，具体取决于您在做什么。很可能只要没有应用 alpha 通道，Chrome 就会以 rgb 而不是 rgba 响应。

于 2010-05-22T18:35:14.627 回答
1

这个解决方案怎么样，函数stringRGB2HEX返回输入字符串的副本，其中所有出现的格式为“rgb(r,g,b)”的颜色都已替换为十六进制格式“#rrggbb”。

   //function for private usage of the function below
   //(declaring this one in global scope should make it faster rather than 
   //declaraing it as temporary function inside stringRGB2HEX that need to be
   //instantieted at every call of stringRGB2HEX
   function _rgb2hex(rgb_string, r, g, b) 
   {
      //VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0'
      var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: ( r + (256 * g) + (65536 * b) + 16777216)
      //toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx]   
      return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above
   }

   function stringRGB2HEX(string)
   {
      if(typeof string === 'string')
         string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex);
      return string;
   }

这也可以转换复杂样式的 rgb 颜色，例如background.

style.background像：这样的值很容易通过简单"none no-repeat scroll rgb(0, 0, 0)"地转换为"none no-repeat scroll #000000"stringRGB2HEX(style.background)

于 2010-08-19T15:06:34.387 回答
1

http://www.phpied.com/rgb-color-parser-in-javascript/

一个接受字符串并尝试从中找出有效颜色的 JavaScript 类。一些接受的输入例如：

* rgb(0, 23, 255)
* #336699
* ffee66
* fb0
* red
* darkblue
* cadet blue
于 2011-04-20T07:54:42.380 回答
0

我找到了这个解决方案http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx我在我的项目中使用它

于 2010-01-11T14:38:40.323 回答
0

在这里，这将允许您使用 $(selector).getHexBackgroundColor() 轻松返回十六进制值：

$.fn.getHexBackgroundColor = function() {
    var rgb = $(this).css('background-color');
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
于 2011-08-09T04:23:01.923 回答