十六进制到 RGB 函数 - JavaScript

很多时候我们需要将十六进制颜色值转换为 RGB 格式，例如使用 canvas 绘制图形时，canvas 只支持 RGB 格式的颜色值。

下面给大家介绍一个将十六进制颜色值转换为 RGB 格式的函数 - hexToRgb。

函数实现

function hexToRgb(hex) {
  var r = parseInt(hex.slice(1, 3), 16);
  var g = parseInt(hex.slice(3, 5), 16);
  var b = parseInt(hex.slice(5, 7), 16);

  return "rgb(" + r + ", " + g + ", " + b + ")";
}

函数说明

函数的参数为一个十六进制颜色值，例如 "#FF0000"。

首先，我们可以使用 slice 方法截取字符串中的字串。

r 值

var r = parseInt(hex.slice(1, 3), 16);

我们使用 slice 方法截取字符串的第 1 个字符到第 3 个字符，然后使用 parseInt 方法将截取的字符串转换为十进制数。

g 值

var g = parseInt(hex.slice(3, 5), 16);

我们使用 slice 方法截取字符串的第 3 个字符到第 5 个字符，然后使用 parseInt 方法将截取的字符串转换为十进制数。

b 值

var b = parseInt(hex.slice(5, 7), 16);

我们使用 slice 方法截取字符串的第 5 个字符到第 7 个字符，然后使用 parseInt 方法将截取的字符串转换为十进制数。

最后，我们将 r、g、b 三个值组合成一个 RGB 字符串。

使用示例

console.log(hexToRgb("#FF0000")); // 输出 "rgb(255, 0, 0)"
console.log(hexToRgb("#00FF00")); // 输出 "rgb(0, 255, 0)"
console.log(hexToRgb("#0000FF")); // 输出 "rgb(0, 0, 255)"

以上示例中，我们将三个不同的十六进制颜色值传入 hexToRgb 函数，并输出转换后的 RGB 字符串。

总结

hexToRgb 函数可以方便地将十六进制颜色值转换为 RGB 格式，使用方便，代码简洁。