RGB转换字符串在Javascript为十六进制(Convert rgb strings to he

我现在用的是TweenMax JS库与ColorPropsPlugin将吐温这是在多种格式中指定的颜色值，我的问题是，结果总是以字符串形式：

"rgb(255,255,255)"

那怎么可以转换到一个十六进制数，如：

0xffffff

Answer 1:

我会在第一切去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("");

Answer 2:

以下是从适合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;
}

Answer 3:

这是我做的。

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

Answer 4:

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}

Answer 5:

一个codegolfed的方法：

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 。

EXTRA：它是如何工作的。

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

Answer 6:

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()
}

Answer 7:

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

文章来源: Convert rgb strings to hex in Javascript