如何使用JavaScript将element.style.color转换为标准可对比颜色值

方案1：浏览器原生解析法（推荐，准确率最高） #

利用浏览器自带的CSS颜色解析能力，无需手动适配所有格式，支持所有合法CSS颜色值（rgb/rgba、hsl/hsla、hex、颜色关键字等）。

function convertColorToStandard(inputColor) {
  // 创建临时DOM节点
  const tempElement = document.createElement('div');
  // 赋值颜色，浏览器会自动校验并解析合法CSS颜色
  tempElement.style.color = inputColor;
  // 插入文档确保计算样式生效
  document.body.appendChild(tempElement);
  // 获取计算后的颜色，浏览器统一返回rgb/rgba格式
  const computedColor = window.getComputedStyle(tempElement).color;
  // 清理临时节点
  document.body.removeChild(tempElement);

  // 提取RGB三元组
  const rgbaReg = /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d*\.?\d+)?\)/;
  const matchResult = computedColor.match(rgbaReg);
  // 输入为非法颜色时返回null，可按需添加错误处理
  if (!matchResult) return null;

  const r = parseInt(matchResult[1], 10);
  const g = parseInt(matchResult[2], 10);
  const b = parseInt(matchResult[3], 10);

  return {
    // RGB三元组格式
    rgb: [r, g, b],
    // hex字符串格式，自动补前导0
    hex: `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
  }
}

使用示例 #

• 输入rgba(121, 110, 12, 0.14)，输出{rgb: [121,110,12], hex: '#796e0c'}
• 输入hsl(72, 82%, 26%)，自动转换为对应RGB和hex值
• 输入#afd544，输出{rgb: [175,213,68], hex: '#afd544'}
• 输入red、transparent等颜色关键字也可正常解析

方案2：手动解析法（适配Node.js等无DOM环境） #

如果无法操作浏览器DOM，需要分别适配所有颜色格式：

• 优先匹配hex格式：分别处理3位简写、6位标准、8位带透明度的格式，逐通道提取数值
• 再匹配rgb/rgba格式，正则提取通道数值
• 最后匹配hsl/hsla格式，通过色彩转换公式将HSL转为RGB

手动解析需要覆盖所有CSS合法颜色规则，包括140+标准颜色关键字，容易出现遗漏，非特殊场景优先选择方案1。

内容的提问来源于stack exchange，提问作者user3310334