hexToRgb的另一个版本:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

编辑:3/28/2017 这是另一种似乎更快的方法

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

编辑:8/11/2017 经过更多测试后，上面的新方法并没有更快:(。虽然这是一种有趣的替代方式。

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来编译代码。

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)

访问文档获取更多演示。

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

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}

从HEX转换为RGB，其中RGB是0到1范围内的浮点值:

#FFAA22→{r: 0.5, g: 0, b:1}

我改编了@Tim Down的回答:

function convertRange(value,oldMin,oldMax,newMin,newMax) {
  return (Math.round(((((value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin) * 10000)/10000)
}

function hexToRgbFloat(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: convertRange(parseInt(result[1],16), 0, 255, 0, 1),
    g: convertRange(parseInt(result[2],16), 0, 255, 0, 1),
    b: convertRange(parseInt(result[3],16), 0, 255, 0, 1)
  } : null;
}

console.log(hexToRgbFloat("#FFAA22")) // {r: 1, g: 0.6667, b: 0.1333}

我发现了这个，因为我认为它非常直截了当，有验证测试和支持alpha值(可选)，这将适合这种情况。

只要注释掉regex行，如果你知道你在做什么，它会快一点。

function hexToRGBA(hex, alpha){
    hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
    if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
    if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
    var b_int = parseInt(hex, 16);
    return "rgba("+[
        (b_int >> 16) & 255, //R
        (b_int >> 8) & 255, //G
        b_int & 255, //B
        alpha || 1  //add alpha if is set
    ].join(",")+")";
}