如何使用JavaScript将RGBA颜色代码转换为Hex颜色代码？

阿华AIGC实验室

2026-5-25

解决RGBA转Hex时的透明度转换问题

我懂你的困扰——你现在的代码只能转换RGBA里的RGB颜色部分，没法处理透明度（alpha）值。咱们来修改一下这个rgba2hex函数，让它能完整输出包含透明度的8位Hex颜色码（格式为#RRGGBBAA，最后两位就是透明度的十六进制表示）。

原代码的问题分析

你的原函数虽然提取了alpha值，但没有对它进行转换和拼接，Hex部分只处理了RGB三个通道，漏掉了alpha通道的转换逻辑，所以才会丢失透明度信息。

修改后的完整函数

下面是修复后的代码，我会一步步拆解关键逻辑：

var colorcode = "rgba(0, 0, 0, 0.74)";
var finalCode = rgba2hex(colorcode);
console.log(finalCode); // 输出 #000000BD

function rgba2hex(orig) {
  // 去除空格并匹配RGBA各通道值
  var rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
  if (!rgb) return orig; // 如果匹配失败，直接返回原字符串避免报错

  // 处理RGB通道，转成两位十六进制
  var r = parseInt(rgb[1], 10);
  var g = parseInt(rgb[2], 10);
  var b = parseInt(rgb[3], 10);
  var rgbHex = ((r | 1 << 8).toString(16).slice(1) +
                (g | 1 << 8).toString(16).slice(1) +
                (b | 1 << 8).toString(16).slice(1));

  // 处理Alpha通道
  var alpha = rgb[4] ? rgb[4].trim() : '1'; // 默认透明度为1（完全不透明）
  var alphaInt;
  if (alpha.includes('%')) {
    // 处理百分比形式的透明度（比如74%）
    alphaInt = Math.round(parseFloat(alpha) / 100 * 255);
  } else {
    // 处理小数形式的透明度（比如0.74）
    alphaInt = Math.round(parseFloat(alpha) * 255);
  }
  // 转成两位十六进制，不足两位补0，同时统一转大写
  var alphaHex = alphaInt.toString(16).padStart(2, '0').toUpperCase();

  // 拼接成完整的8位Hex颜色码
  return '#' + rgbHex + alphaHex;
}

关键逻辑说明

Alpha通道兼容：同时支持小数（如0.74）和百分比（如74%）两种透明度格式，都会转换为0-255之间的整数，再转成两位十六进制字符串（不足两位用padStart补0）。
RGB通道复用：保留你原有的RGB转换逻辑，确保每个颜色通道输出两位十六进制值。
容错处理：如果输入的颜色格式不符合RGBA/RGB规范，直接返回原字符串，避免程序报错。