背景颜色hex到JavaScriptvariables
我对JavaScript和jQuery很陌生，现在我面临一个问题：
我需要发布一些数据到PHP和一点的数据需要是div X的背景颜色hex。
jQuery有css（“background-color”）函数，并且可以将背景的RGB值转换为JavaScriptvariables。
CSS函数似乎返回像这样rgb（0，70，255）的string。
我找不到任何方式来获取hex的背景颜色（即使它在CSS中设置为hex）。
所以看来我需要将其转换。 我find了一个将RGB转换为hex的函数，但是它需要用三个不同的variablesr，g和b来调用。 所以我需要parsingstringrgb（x，xx，xxx）到var r = x; var g = xx; var b = xxx; 不知何故。
我试图谷歌parsingJavaScript的string，但我真的不明白正则expression式的东西。
有没有办法得到div的背景颜色为hex，或者可以将string转换成3个不同的variables？
试试这个：
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" 针对以下评论中的问题：
我试图修改正则expression式来处理rgb和rgba取决于我得到哪一个。 任何提示？ 谢谢。
我不确定在这个问题的背景下是否有意义（因为你不能用hex表示rgba颜色），但是我想可能还有其他用途。 无论如何，你可以改变正则expression式是这样的：
/^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"]
如果你有jQuery可用，这是我刚刚提出的超紧凑版本。
var RGBtoHEX = function（color）{
返回“＃”+ $。map（color.match（/ \ b（\ d +）\ b / g），function（digit）{
return（'0'+ parseInt（digit）.toString（16））。slice（-2）
}）。join（''）;
};
您也可以使用rgb设置CSS颜色，例如：
background-color: rgb(0, 70, 255);
这是有效的CSS ，不要担心。
编辑：看到一个很好的方式来转换它，如果你绝对需要的nickf答案 。
我发现另一个function（ R0bb13 ）。 它没有正则expression式，所以我不得不从nickf借用它来正常工作。 我只发布它，因为这是一个有趣的方法，不使用if语句或循环来给你一个结果。 而且这个脚本以＃（这是我当时使用的Farbtastic插件所需要的）返回hex值，
//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脚本的hex结果应该是0046ff而不是0070ff，但没什么大不了的
更新，另一个更好的替代方法：
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]); }
用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; };
这些解决scheme将在Chrome中失败，因为它会返回一个用于背景色的rgba（x，x，x，x）。
编辑：这不一定是正确的。 Chrome仍然会使用rgb（）来设置背景，这取决于你在做什么。 很有可能只要没有应用Alpha通道，Chrome就会用rgb而不是rgba来回应。
函数stringRGB2HEX返回inputstring的一个副本，其格式为“rgb（r，g，b）”的所有颜色的元素已被hex格式“#rrggbb”replace。
//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)很容易转换成"none no-repeat scroll #000000"
http://www.phpied.com/rgb-color-parser-in-javascript/
一个JavaScript类，它接受一个string，并试图找出一个有效的颜色。 一些接受的input是例如：
* rgb(0, 23, 255) * #336699 * ffee66 * fb0 * red * darkblue * cadet blue
我发现这个解决schemehttp://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx ，我用它在我的项目
在这里，您可以使用$（selector）.getHexBackgroundColor（）轻松返回hex值：
$.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]); }
