JavaScript实现十六进制颜色值和RGB相互转换

在线颜色值转换工具

16进制转rgb/rgba

函数hexToRgb：将带#号的16进制颜色转换为rgb格式颜色，有两个参数：

1. 第一个参数是带#的16进制颜色，必需

2. 第二个是透明度，取值为0~1，可选，如有则返回rgba格式。

如：将#ff9e24转为rgba(255, 158, 36)或rgba(255, 158, 36, 1)

var hexToRgb = function(hex, opacity) { //16进制转rgb()或rgba()字符串
  var rgb = [];
  hex = hex.substr(1); //去除前缀 # 号
  if (hex.length === 3) { // 处理 "#abc" 成 "#aabbcc"
    hex = hex.replace(/(.)/g, '$1$1');
  }
  hex.replace(/../g, function(color) {
    rgb.push(parseInt(color, 0x10)); //按16进制将字符串转换为数字
  });
  if (!opacity) {
    return "rgb(" + rgb.join(",") + ")";
  }
  return "rgba(" + rgb.join(",") + "," + opacity + ")";
}

var rgb = hexToRgb("#ff9e24")
console.log(rgb)   //rgba(255, 158, 36)

var rgba = hexToRgb("#ff9e24", 0.5)
console.log(rgba)   //rgba(255, 158, 36, 0.5)

16进制转rgb[]

函数hexToRgbArr：将带#的16进制颜色转为长度为3的数组，数组按顺序依次表示R、G、B的值。

如：将#ff9e24转为[255, 158, 36]

var hexToRgbArr =  function(hex) { //16进制转rgb[],数组长度为3，值为rgb的三个值
  var rgb = [];
  hex = hex.substr(1); //去除前缀 # 号
  if (hex.length === 3) { // 处理 "#abc" 成 "#aabbcc"
    hex = hex.replace(/(.)/g, '$1$1');
  }
  hex.replace(/../g, function(color) {
    rgb.push(parseInt(color, 0x10)); //按16进制将字符串转换为数字
  });
  return rgb
}

var rgbArr = hexToRgb("#ff9e24")
console.log(rgbArr)   //[255, 158, 36]

RGB转为16进制数

函数RGBToHex ：将rgb转为16进制颜色，参数为有rgb三个值的数组，返回带#的十六进制颜色值。

如：将[255, 158, 36]转为#ff9e24

var RGBToHex = function(rgbarr) { // RGB转为16进制数，传入参数为有rgb三个值的数组
  var hexColor = "#";
  var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  for (var i = 0; i < 3; i++) {
    var r = null;
    var c = rgbarr[i];
    var hexAr = [];
    while (c > 16) {
      r = c % 16;
      c = (c / 16) >> 0;
      hexAr.push(hex[r]);
    }
    hexAr.push(hex[c]);
    if (hexAr.length < 2) {
      hexAr.push("0")
    }
    hexColor += hexAr.reverse().join('');
  }
  return hexColor;
}

var hex = hexToRgb([255, 158, 36])
console.log(hex)   //"#ff9e24"