如何将颜色在RGB格式转换为十六进制格式,反之亦然?

例如,将'#0080C0'转换为(0,128,192)。


当前回答

一个简单的答案,将RGB转换为十六进制。这里颜色通道的值被限定在0到255之间。

function RGBToHex(r = 0, g = 0, b = 0) {
    // clamp and convert to hex
    let hr = Math.max(0, Math.min(255, Math.round(r))).toString(16);
    let hg = Math.max(0, Math.min(255, Math.round(g))).toString(16);
    let hb = Math.max(0, Math.min(255, Math.round(b))).toString(16);
    return "#" +
        (hr.length<2?"0":"") + hr +
        (hg.length<2?"0":"") + hg +
        (hb.length<2?"0":"") + hb;
}

其他回答

我假设您指的是html风格的十六进制符号,即#rrggbb。你的代码几乎是正确的,只是顺序颠倒了。它应该是:

var decColor = red * 65536 + green * 256 + blue;

此外,使用位移位可能会让它更容易阅读:

var decColor = (red << 16) + (green << 8) + blue;

我建议使用一个经过良好测试和维护的库:Colors.js(可用于node.js和浏览器),而不是复制和粘贴到处都能找到的代码片段。它只有7 KB(压缩后更少)。

十六进制到RGB

Const hex2rgb = (hex) => { const r = parseInt(十六进制。切片(1,3),16) const g = parseInt(十六进制。切片(3,5),16) const b = parseInt(十六进制。切片(5,7),16) //返回{r, g, b} //返回一个对象 返回[r, g, b] } console.log (hex2rgb (" # 0080 c0 "))

RGB转十六进制

rgb2hex = (r, g, b) => { Var RGB = (r << 16) | (g << 8) | b //返回'#' + rgb.toString(16) // #80c0 //返回'#' + (0x1000000 + rgb).toString(16).slice(1) // #0080c0 //或使用[padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) 返回'#' + rgb.toString(16)。padStart (0) } Console.log (rgb2hex(0, 128, 192))

此外,如果有人需要在线工具,我已经建立了海克斯到RGB,反之亦然。

一行功能HEX到RGBA

支持短#fff和长#ffffff格式。 支持alpha通道(不透明)。 不关心是否指定散列,在两种情况下都可以工作。

function hexToRGBA(hex, opacity) {
    return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}

例子:

hexToRGBA('#fff')        ->  rgba(255,255,255,1)  
hexToRGBA('#ffffff')     ->  rgba(255,255,255,1)  
hexToRGBA('#fff', .2)    ->  rgba(255,255,255,0.2)  
hexToRGBA('#ffffff', .2) ->  rgba(255,255,255,0.2)  
hexToRGBA('fff', .2)     ->  rgba(255,255,255,0.2)  
hexToRGBA('ffffff', .2)  ->  rgba(255,255,255,0.2)

hexToRGBA('#ffffff', 0)  ->  rgba(255,255,255,0)
hexToRGBA('#ffffff', .5) ->  rgba(255,255,255,0.5)
hexToRGBA('#ffffff', 1)  ->  rgba(255,255,255,1)

短箭头函数

对于那些重视短箭头功能的人。

Hex2rgb

大卫的答案的箭头函数版本

const hex2rgb = h => [(x=parseInt(h,16)) >> 16 & 255,x >> 8 & 255, x & 255];

一个更灵活的解决方案,支持短十六进制或哈希#

const hex2rgb = h => {
    if(h[0] == '#') {h = h.slice(1)};
    if(h.length <= 3) {h = h[0]+h[0]+h[1]+h[1]+h[2]+h[2]};
    h = parseInt(h,16);
    return [h >> 16 & 255,h >> 8 & 255, h & 255];
};

Rgb2hex

const rgb2hex = (r,g,b) => ((1<<24)+(r<<16)+(g<<8)+b).toString(16).slice(1);