Question

我正在使用带有ColorPropsPlugin的TweenMax JS库，它将补间以多种格式指定的颜色值，我遇到的问题是结果总是以字符串的形式出现：

"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

if (isset($_POST[...
{  
   // - 1st load

   $_SESSION["posted-data"] = $_POST;
   header('Location:index.php?pass=...');
}

if (isset($_SESSION["posted-data"]))
{
   // - 2nd load

   ... code to process ...
   unset($_SESSION["posted-data"])
}

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

Answer 5

一种代码化的方法：

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：它是如何运作的。

声明为箭头函数（ES6中的新函数）的

h采用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)'))

Answer 8

在JavaScript中将RGB颜色转换为十六进制的另一种方法

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

在Javascript中将rgb字符串转换为十六进制

8 个答案: