第175题：实现颜色转换 rgb(255, 255, 255) - #FFFFFF 的多种思路

Question

在 CSS 中定义颜色可以使用 rgb 颜色值，例：rgb(182, 0, 35)；也可以使用 16 进制颜色值，例：#B60023。不管是 rgb(182, 0, 35)，还是 #B60023 都表示了同一种颜色，其实无论是用哪一种表示方法都行，但由于 web 页面的千变万化，遇到的情况也有可能千奇百怪，有时我们就需要把 rgb 与 16 进制颜色进行转换了。

我们来看看一个 rgb 与 16 进制颜色如何转换的例子。

对于十六进制颜色值，可以将它们两个划分为一组，从左到右分别代表 RGB。两个十六进制数的第一个和十六相乘，结果加上第二个数，就得到一个0-255之间的数。

例如，有一个十六进制颜色值 #B60023，将它转换为RGB就是：R（B6），G（00），B（23）。那么红色就是：B(11) x 16 + 6 = 182。绿色为 0，蓝色为：2 x 16 +3 = 35。因此，十六进制颜色值 #B60023 对应的rgb()红色就是：rgb(182, 0, 35)。

那么如何使用 JavaScript 来实现 rgb 与 16 进制颜色的相互转换？我们来看看实现方法。

JavaScript 实现颜色转换的核心就是进制间的转换。

RGB 格式其实就是十进制表示法，所以，十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。

1、JavaScript 实现 RGB 颜色转换为 16 进制（十进制转16进制）

十进制转换为 16 进制，核心代码如示例：

const num=255;
num.toString(16);

其结果是 FF。

说明：toString 里的参数 16 表示数值转换为 16 进制字符串。

rgb 颜色转换为 16 进，实例代码如下：

/*RGB颜色转换为16进制*/
function colorHex(rgbStr) {
  //十六进制颜色值的正则表达式
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if (/^(rgb|RGB)/.test(rgbStr)) {
    const aColor = rgbStr.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    let strHex = "#";
    for (let i = 0; i < aColor.length; i++) {
      let hex = Number(aColor[i]).toString(16);
      if (hex === "0") {
        hex += hex;
      }
      strHex += hex;
    }
    if (strHex.length !== 7) {
      strHex = rgbStr;
    }
    return strHex;
  } else if (reg.test(rgbStr)) {
    const aNum = rgbStr.replace(/#/, "").split("");
    if (aNum.length === 6) {
      return rgbStr;
    } else if (aNum.length === 3) {
      let numHex = "#";
      for (let i = 0; i < aNum.length; i += 1) {
        numHex += (aNum[i] + aNum[i]);
      }
      return numHex;
    }
  } else {
    return rgbStr;
  }
};
console.log(colorHex("rgb(52,83,139)"))		// #17f538

2、JavaScript 实现 16 进制颜色转化为 rgb 颜色

16 进制转换为十进制相对容易些，核心代码如示例：

parseInt("0xFF");

其结果就是 255

说明：0x 就表明当前是 16 进制，由于 parseInt 后面无参数，所以默认就是转换为 10 进制了。

16 进制颜色转化为 rgb 颜色，实例代码如下：

function colorRgb (colorStr) {
  //十六进制颜色值的正则表达式
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var sColor = colorStr.toLowerCase();
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    //处理六位的颜色值f
    var sColorChange = [];
    for (var i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
    }
    return "rgb(" + sColorChange.join(",") + ")";
  } else {
    return sColor;
  }
};
console.log(colorRgb("#34538b"))	// rgb(52,83,139)

Answer 1

仔细观察本题，本题可分为三个步骤：

• 从 rgb(255, 255, 255) 中提取出 r=255 、 g=255 、 b=255
• 将 r 、 g 、 b 转换为十六进制，不足两位则补零
• 组合 #

提取 r、g、b

方式一：利用 match

利用 match() 方法，读取出 r 、 g 、 b

function rgb2hex(sRGB) {
    const reg = /^(rgb|RGB)(s*(d{1,3})s*,s*(d{1,3}s*),s*(d{1,3})s*)$/
	const rbg = sRGB.match(reg)
    return rbg
}

// 测试
rgb2hex('rgb(255, 255, 255)')
// ["rgb(255, 255, 255)", "rgb", "255", "255", "255", index: 0, input: "rgb(255, 255, 255)", groups: undefined]
rgb2hex('rgb(16, 10, 255)')
// ["rgb(16, 10, 255)", "rgb", "16", "10", "255", index: 0, input: "rgb(16, 10, 255)", groups: undefined]

r = rgb[2] 、 g = rgb[3] 、 b = rgb[4]

方式二：利用 match() 方法（2）

rgb(255, 255, 255) 中 r 、 g 、 b 分别为连续的数字，所以我们可以利用正则 /d+/g 获取取所有连着的数字

function rgb2hex(sRGB) {
    const rgb = sRGB.match(/d+/g);
    return rgb
}

// 测试
rgb2hex('rgb(255, 255, 255)')
// ["255", "255", "255"]
rgb2hex('rgb(16, 10, 255)')
// ["16", "10", "255"]

方式三：replace + 利用 split

观察 rgb(255, 255, 255) 的每一个色值是透过 , 连接一起的，所以我们考虑是否能通过 split(',') 拆分出每一个色值，主要考虑两步

• 替换 rgb(255, 255, 255) 的部分字符（ rgb 、 ( 、 ) ）为 ''
• 拆分出每一个色值

function rgb2hex(sRGB) {
    const rgb = sRGB.replace(/(?:(|)|rgb|RGB)*/g, '').split(',')
    return rgb
}
// 测试
rgb2hex('rgb(255, 255, 255)')
// ["255", " 255", " 255"]
rgb2hex('rgb(16, 10, 255)')
// ["16", " 10", " 255"]

转换为十六进制，不足补零

转换为十六进制，可采用：

• (+n).toString(16) 或 Number(n).toString(16) `

不足两位则补零：

• ('0' + r16).slice(-2)

• r16.padStart(2, '0')

• (r < 16? '0':'') + r16

• r16.length < 2 ? '0' + r16 : r16

• ((1 << 24) + (Number(r) << 16) + (Number(g) << 8) + Number(b)).toString(16).slice(1)

方式多种多样，发散思维，

Answer 2

function getValue(str){
    const reg = /rgb(( *d{1,3}),( *d{1,3}),( *d{1,3}))/
    const res = str.match(reg)
    return [res[1] * 1,res[2] * 1,res[3] * 1]
}
function translate(rgbStr){
    const hexValues = getValue(rgbStr).map(item => item.toString(16).padStart(2, '0'))
    return '#' + hexValues.join('')
}
console.log(translate('rgb(231, 231, 232)'))