我正在使用带有 ColorPropsPlugin 的 TweenMax JS 库，它将补间以多种格式指定的颜色值，我遇到的问题是结果总是以字符串的形式：
"rgb(255,255,255)"
如何将其转换为十六进制数字：
0xffffff
【问题讨论】：
标签： javascript hex rgb
我首先会删除 CSS 部分：
var a = "rgb(255,255,255)".split("(")[1].split(")")[0];
然后将其拆分为单独的数字：
a = a.split(",");
将单个数字转换为十六进制
var b = a.map(function(x){ //For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return (x.length==1) ? "0"+x : x; //Add zero if we get only one character
})
然后将它们粘在一起：
b = "0x"+b.join("");
【讨论】：
以下内容改编自我编写和使用的 Colour 类，但由于它处理百分比和负数，因此可能无法满足您的需求。
演示：http://jsfiddle.net/5ryxx/1/
代码：
function componentFromStr(numStr, percent) {
var num = Math.max(0, parseInt(numStr, 10));
return percent ?
Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
}
function rgbToHex(rgb) {
var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
var result, r, g, b, hex = "";
if ( (result = rgbRegex.exec(rgb)) ) {
r = componentFromStr(result[1], result[2]);
g = componentFromStr(result[3], result[4]);
b = componentFromStr(result[5], result[6]);
hex = "0x" + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
return hex;
}
【讨论】：
这就是我所做的。
String.prototype.toRGB = function() {
var rgb = this.split( ',' ) ;
this.r=parseInt( rgb[0].substring(4) ) ; // skip rgb(
this.g=parseInt( rgb[1] ) ; // this is just g
this.b=parseInt( rgb[2] ) ; // parseInt scraps trailing )
}
运行'rgb(125,181,215)'.toRGB() 后，您将在返回的同一字符串对象中获得.r、.g 和.b 属性定义（具有正确的整数值）。
要获取十六进制值，只需使用yourNumber.toString(16);
【讨论】：
function parseColor(color) {
var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); });
return {
hex: "#" + arr.slice(0, 3).map(toHex).join(""),
opacity: arr.length == 4 ? arr[3] : 1
};
}
function toHex(int) {
var hex = int.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
parseColor("rgb(210, 10, 10)"); // {"hex":"#d20a0a","opacity":1}
parseColor("rgba(210, 10, 10, 0.5)"); // {"hex":"#d20a0a","opacity":"0.5"}
parseColor("rgb(210)"); // {"hex":"#d2","opacity":1}
【讨论】：
rgb2Hex = s => s.match(/[0-9]+/g).reduce((a, b) => a+(b|256).toString(16).slice(1), '0x')
console.log(rgb2Hex('rgb(10, 11, 12)'), rgb2Hex('rgb(255, 256, 257)'))不推荐用于不可靠的用户输入，但字符串也可以作为函数进行评估：
rgb = (r, g, b) => '0x' + (1<<24|r<<16|g<<8|b).toString(16).slice(1)
console.log(eval('rgb(10, 11, 12)'), eval('rgb(255)'))【讨论】：
RGBToHex = function(r,g,b){
var bin = r << 16 | g << 8 | b;
return (function(h){
return new Array(7-h.length).join("0")+h
})(bin.toString(16).toUpperCase())
}
https://gist.github.com/lrvick/2080648
已编辑：
cnvrtRGBClrToHex('255,145,20')
function cnvrtRGBClrToHex(rgbClr){
var rgbClr = rgbClr.split(',');
var r = rgbClr[0];
var g = rgbClr[1];
var b = rgbClr[2];
return (r << 16 | g << 8 | b).toString(16).toUpperCase()
}
【讨论】：
代码高尔夫方法：
var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');
现在，运行 h("rgb(255, 60, 60)") 将返回 #ff3c3c。
您可以将'#' 替换为'0x' 以获得0xff3c3c 形式的输出。
额外：它是如何工作的。
h，声明为箭头函数（ES6 中的新功能）采用 RGB 值（字符串）并将其存储在 x 中。
然后，x 中的所有数字实例都通过正则表达式方程/\d+/g 找到，并进一步用作数组（由match 返回，由map 使用）。
map 循环通过函数y 处理返回数组的所有元素。
该函数将一个值（作为字符串存储在数组中）作为z 将其转换为数字（+z），检查它是否小于 16（((+z < 16)?'0':'')，即十六进制表示有单个数字），如果为真，则将'0' 添加到元素的开头。
然后，它将其转换为以 16 为底的字符串（十六进制，.toString(16)），并将其返回给map。所以本质上，数组中的所有十进制字符串现在都变成了十六进制字符串。
最后，数组的元素被连接在一起（join('')），没有分隔符，'#' 被添加到字符串的开头。
注意：如果提供的代码值大于 255，则输出将超过 6 个十六进制数字。比如，rgb(256, 0, 0) 的输出将是 #1000000。
要将值限制为 255，代码如下：
var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + ((+z > 255)?255:+z).toString(16)).join('');
【讨论】：
用于 rgb 字符串到十六进制字符串的可读 oneliner：
rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')
这里返回"#0080ff"。
【讨论】：
另一种在 JavaScript 中将 RGB 颜色转换为 HEX 的方法
color = "rgb(51,51,51);";
color = '#'+color.match(/\d+/g).map(function(x){
x = parseInt(x).toString(16);
return (x.length==1) ? "0"+x : x;
}).join("");
【讨论】：