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

Posted 2023-02-23

【中文标题】使用 JavaScript 将十六进制代码更改为 rgb 值

【英文标题】：Changing hex codes to rgb values with JavaScript [duplicate]

【发布时间】：2015-09-07 08:31:53

【问题描述】：

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

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

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