一行功能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)

结合使用匿名函数和数组。地图为清洁工;更流线型的外观。

var write=function(str){document.body.innerHTML=JSON.stringify(str,null,' ');}; function hexToRgb(hex, asObj) { return (function(res) { return res == null ? null : (function(parts) { return !asObj ? parts : { r : parts[0], g : parts[1], b : parts[2] } }(res.slice(1,4).map(function(val) { return parseInt(val, 16); }))); }(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex))); } function rgbToHex(r, g, b) { return (function(values) { return '#' + values.map(function(intVal) { return (function(hexVal) { return hexVal.length == 1 ? "0" + hexVal : hexVal; }(intVal.toString(16))); }).join(''); }(arguments.length === 1 ? Array.isArray(r) ? r : [r.r, r.g, r.b] : [r, g, b])) } // Prints: { r: 255, g: 127, b: 92 } write(hexToRgb(rgbToHex(hexToRgb(rgbToHex(255, 127, 92), true)), true)); body{font-family:monospace;white-space:pre}

2022年:如果你经常操纵颜色，不介意使用包装，

使用tinycolor2。这是一个快速的JavaScript颜色操作和转换库(大约400kb)。

它接受各种颜色字符串格式。如:

tinycolor("#000"); // Hex3
tinycolor("#f0f0f6"); // Hex6
tinycolor("#f0f0f688"); // Hex8
tinycolor("f0f0f6"); // Hex withouth the number sign '#'
tinycolor("rgb (255, 0, 0)"); // RGB
tinycolor("rgba (255, 0, 0, .5)"); // RGBA
tinycolor({ r: 255, g: 0, b: 0 }); // RGB object
tinycolor("hsl(0, 100%, 50%)"); // HSL
tinycolor("hsla(0, 100%, 50%, .5)"); // HSLA
tinycolor("red"); // Named

RGB转十六进制

var color = tinycolor('rgb(0, 128, 192)');
color.toHexString(); //#0080C0

十六进制转RGB

var color = tinycolor('#0080C0');
color.toRgbString(); // rgb(0, 128, 192)

访问文档获取更多演示。

ECMAScript 6版本的Tim Down的答案

将RGB转换为十六进制

const rgbToHex = (r, g, b) => '#' + [r, g, b]。映射(x => { const十六进制= x.toString(16) 返回十六进制。长度=== 1 ?'0' + hex: hex }) . join () console.log(rgbToHex(0,51,255));/ / # 0033 ff的

将十六进制转换为RGB

返回一个数组[r, g, b]。工作也与速记十六进制三胞胎，如“#03F”。

const hexToRgb = hex => hex.replace (/ ^ # ? (\ d] [a - f) (\ d] [a - f) (\ d] [a - f) $ /我 ，(m, r, g, b) => '#' + r + r + g + g + b + b) .substring (1) .match (/ {2} / g)。 .map(x => parseInt(x, 16)) console.log(hexToRgb("#0033ff")) // [0,51,255] console.log(hexToRgb("#03f")) // [0,51,255]

附加:RGB到十六进制使用padStart()方法

const rgbToHex = (r, g, b) => '#' + [r, g, b] .map(x => x. tostring(16)。padStart (2, ' 0 ')) . join () console.log(rgbToHex(0,51,255));/ / # 0033 ff的

注意，这个答案使用了最新的ECMAScript特性，旧的浏览器不支持这些特性。如果希望此代码在所有环境中都能工作，则应该使用Babel来编译代码。

基于@ michazperzhaakowski的回答(EcmaScipt 6)和他基于Tim Down的回答的回答

我写了一个转换hexToRGB函数的修改版本，增加了安全检查r/g/b颜色组件是否在0-255之间，而且函数可以接受数字r/g/b参数或字符串r/g/b参数，如下所示:

 function rgbToHex(r, g, b) {
     r = Math.abs(r);
     g = Math.abs(g);
     b = Math.abs(b);

     if ( r < 0 ) r = 0;
     if ( g < 0 ) g = 0;
     if ( b < 0 ) b = 0;

     if ( r > 255 ) r = 255;
     if ( g > 255 ) g = 255;
     if ( b > 255 ) b = 255;

    return '#' + [r, g, b].map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex
    }).join('');
  }

为了安全地使用这个函数——你应该检查传递的字符串是否是真正的rbg字符串颜色——例如，一个非常简单的检查可以是:

if( rgbStr.substring(0,3) === 'rgb' ) {

  let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
  rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);

  .....
}

CSS Level 4边注:一般来说，你想要能够将十六进制转换为RGB的原因是alpha通道，在这种情况下，你可以很快用CSS4添加一个十六进制。例如:#FF8800FF或#f80f表示全透明的橙色。

除此之外，下面的代码在一个函数中回答了这两个问题，从另一个函数到另一个函数。这接受一个可选的alpha通道，支持字符串数组格式，解析3,4,6,7个字符的十六进制，和rgb/a完整或部分字符串(百分比定义的rgb/a值除外)没有标志。

(如果支持IE，替换少量的ES6语法)

一句话:

function rgbaHex(c,a,i){return(Array.isArray(c)||(typeof c==='string'&&/,/.test(c)))?((c=(Array.isArray(c)?c:c.replace(/[\sa-z\(\);]+/gi,'').split(',')).map(s=>parseInt(s).toString(16).replace(/^([a-z\d])$/i,'0$1'))),'#'+c[0]+c[1]+c[2]):(c=c.replace(/#/,''),c=c.length%6?c.replace(/(.)(.)(.)/,'$1$1$2$2$3$3'):c,a=parseFloat(a)||null,`rgb${a?'a':''}(${[(i=parseInt(c,16))>>16&255,i>>8&255,i&255,a].join().replace(/,$/,'')})`);}

可读版本:

function rgbaHex(c, a) {
    // RGBA to Hex
    if (Array.isArray(c) || (typeof c === 'string' && /,/.test(c))) {
        c = Array.isArray(c) ? c : c.replace(/[\sa-z\(\);]+/gi, '').split(',');
        c = c.map(s => window.parseInt(s).toString(16).replace(/^([a-z\d])$/i, '0$1'));

        return '#' + c[0] + c[1] + c[2];
    }
    // Hex to RGBA
    else {
        c = c.replace(/#/, '');
        c = c.length % 6 ? c.replace(/(.)(.)(.)/, '$1$1$2$2$3$3') : c;
        c = window.parseInt(c, 16);

        a = window.parseFloat(a) || null;

        const r = (c >> 16) & 255;
        const g = (c >> 08) & 255;
        const b = (c >> 00) & 255;

        return `rgb${a ? 'a' : ''}(${[r, g, b, a].join().replace(/,$/,'')})`;
    }
}

Usages:

rgbaHex(“# a8f”)

rgbaHex(“# aa88ff”)

rgbaHex(“# A8F”)

rgbaHex(“# AA88FF”)

rgbaHex（'#AA88FF'， 0.5）

rgbaHex(“# a8f”、“0.85”)

/ /等。

rgbaHex（'rgba（170，136，255，0.8）;'）

rgbaHex（'rgba（170，136，255，0.8）'）

rgbaHex（'rgb（170，136，255）'）

rgbaHex（'rg170，136，255'）

rgbaHex(' 170,136,255 ')

rgbaHex 170,136,255,0.8 ([])

rgbaHex ([170136255])

/ /等。