十六进制和RGB

十六进制（也称为基数 16 或者十六进制）是一种以 16 为基数的位置数字系统。
它使用 16 个不同的符号 0–9 表示值 0 到 9，使用 A–F 表示值 10 到 15.

RGB 颜色是一种加色模型，其中红色、绿色和蓝色相加以再现一系列颜色。
每个参数指定颜色的强度，可以是 0 到 255 之间的整数或者 0% 到 100% 之间的百分比值。

在本教程中，我们推荐了几种将 RGB 转换为十六进制，或者将十六进制转换为RGB值的方法。

让我们将 RGB 值转换为十六进制值。
rbgtoHex 有两个版本，它们期望 r、g 和 b 的整数值。

以下代码将 RGB 转换为十六进制并添加任何所需的零填充：

function componentToHex(c) {
  let hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
console.log(rgbToHex(28, 135, 201)); //#1c89c9

这是上述方法的替代方法：

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
console.log(rgbToHex(28, 135, 201)); //#1c87c9

现在让我们将十六进制转换为 RGB：

function hexToRgb(hex) {
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
console.log(hexToRgb("#1c87c9").b); //201

还有另一个版本的 hexToRgb() 也解析速记十六进制三元组：

function hexToRgb(hex) {
  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
console.log(hexToRgb("#0044ff").g);
console.log(hexToRgb("#04f").g);