我正在使用TweenMax JS库和ColorPropsPlugin，它将以多种格式指定颜色值，我的问题是结果总是以字符串的形式出现。
"rgb(255,255,255)"
如何才能将其转换为十六进制的数字呢？
0xffffff
我首先会把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 类，但由于它处理的是百分比和负数，所以可能会满足您的需求。
代码。
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}
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.comlrvick2080648。
经编辑。
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('');
Now, running 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('');
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)'))另一种在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("");