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

Posted 2023-02-23

【中文标题】在Javascript中将rgb字符串转换为十六进制

【英文标题】：Convert rgb strings to hex in Javascript

【发布时间】：2012-10-15 17:21:23

【问题描述】：

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

"rgb(255,255,255)"

如何将其转换为十六进制数字：

0xffffff

【问题讨论】：

RGB to Hex and Hex to RGB的可能重复

不要这么想，因为这个问题要求转换一个字符串，而不是三个整数。还是我弄错了？

【参考方案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("");

【讨论】：

我可能在这里做错了什么，但是请您检查一下这是否有效，因为我得到了 0x255255255 - jsfiddle.net/QRk6J/1

好的，我想通了，我必须为地图创建一个新的 var，例如：var b = a.map 等。我会编辑你的答案 - jsfiddle.net/QRk6J/2

这里（Opera），它使用相同的变量。但很高兴知道，谢谢！

作为一个函数， var a = str.substring(str.indexOf('(')+1).split(',') 效果很好，因为 parseInt 会忽略最后一个元素。无需一对拆分调用。

【参考方案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;

【讨论】：

在这种情况下我不需要百分比，但在其他情况下使用百分比我会 +1 你。

【参考方案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);

【参考方案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

【讨论】：

它同时支持rgb()和rgba()。

不处理十进制 rgb console.log(JSON.stringify(parseColor("rgb(251.94,247.35,221.85)") ); “十六进制”：“#fb.f0a3d70a3d7f7.599999999998dd.d99999999998”，“不透明度”：1

【参考方案5】：

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

【参考方案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()

【参考方案7】：

代码高尔夫方法：

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

【参考方案8】：

用于 rgb 字符串到十六进制字符串的可读 oneliner：

rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')

这里返回"#0080ff"。

【参考方案9】：

另一种在 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("");