使用 JavaScript 将十六进制代码更改为 rgb 值答案

【问题标题】：Changing hex codes to rgb values with JavaScript [duplicate]使用 JavaScript 将十六进制代码更改为 rgb 值
【发布时间】：2015-09-07 08:31:53
【问题描述】：

有人可以向我解释如何将十六进制代码（例如：#FF9C19）转换为 rgb 值，对应的例如：(255, 156, 25)，或者使用 JavaScript 的其他方式吗？

我发现一个帖子问这个问题，但它使用的是 python。

【问题讨论】：

标签： javascript rgb

【解决方案1】：

Hex 代码使用 base 16（十六进制），RGB 使用 base 10（十进制）
Hex码可以分成3个字节，分别描述红色RR，绿色GG然后蓝色BB，即#RRGGBB
十六进制的 # 并不总是写出来，或者有时它可能使用 0x 或 &h 等代替（您可能需要根据您的环境考虑这一点）

将这些放在一起并使用RegExp 提取有趣的位，并使用parseInt 从base 16 数字的字符串 表示形式转换

function hex_to_RGB(hex) {
    var m = hex.match(/^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);
    return {
        r: parseInt(m[1], 16),
        g: parseInt(m[2], 16),
        b: parseInt(m[3], 16)
    };
}
// ex.
hex_to_RGB('#FF0110') // {r: 255, g: 1, b: 16}

在相反方向转换时，您将使用num.toString(16)，如果字节小于(dec) 16

如果您从 Integer i 开始，它代表您的 hex 颜色，您可以使用按位运算访问 RGB 值，即

var i = 0xFF0110, // 16711952
    rgb = {
        r: (i >> 16) & 0xFF,        // or `(i & 0xFF0000) >> 16`
        g: (i >>  8) & 0xFF,        // or `(i & 0x00FF00) >>  8`
        b:  i        & 0xFF         // or ` i & 0x0000FF       `
    }; // {r: 255, g: 1, b: 16}, same as before

【讨论】：

【解决方案2】：

合法的十六进制颜色可以是 '#' 和 rgb 组件之后的 3 或 6 个字符

可以是 0 到 255 之间的百分比或数字。

function hexToRgb(c){
    if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
        if(c.length== 4){
            c= '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
        }
        c= '0x'+c.substring(1);
        return 'rgb('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+')';
    }
    return '';
}

function rgbToHex(rgb){
    var c= rgb.match(/\d+(\.\d+)?%?/g);
    if(c){
        c= c.slice(0, 3).map(function(next){
            var itm= next;
            if(itm.indexOf('%')!= -1){
                itm= Math.round(parseFloat(itm)*2.55);
            }
            if(itm<0) itm= 0;
            if(itm>255) itm= 255;
            itm= Math.round(itm).toString(16);
            if(itm.length== 1) itm= '0'+itm;
            return itm;
        });
        return '#'+c.join('').toLowerCase();
    }
    return '';
}

【讨论】：