如何使用JavaScript将RGB颜色值转换为对应颜色名称字符串

核心逻辑 #

浏览器没有提供原生的RGB转颜色名称API，我们通过预定义W3C标准CSS颜色名与对应RGB值的映射表，对拿到的RGB字符串做匹配即可实现需求。

完整实现代码 #

// 预定义颜色映射表，可根据需要补充全所有W3C标准颜色
const colorMap = {
  'rgb(255,0,0)': '红色/red',
  'rgb(0,255,0)': '绿色/green',
  'rgb(0,0,255)': '蓝色/blue',
  'rgb(255,255,255)': '白色/white',
  'rgb(0,0,0)': '黑色/black',
  'rgb(255,255,0)': '黄色/yellow'
}

// 原有获取元素颜色的逻辑
let btn = document.querySelector("#demo");
let computedStyle = getComputedStyle(btn);
let rawRgb = computedStyle.color;

// 先把拿到的RGB字符串去空格，统一格式避免匹配失败
let formattedRgb = rawRgb.replace(/\s/g, '');

// 匹配颜色名，匹配不到则返回原RGB值
let colorName = colorMap[formattedRgb] || rawRgb;

console.log(colorName); // 示例输出：红色/red

注意事项 #

• 你可以根据业务需要补充映射表的内容，也可以自定义颜色对应的名称，不需要完全遵循标准命名
• 如果需要支持RGBA格式的颜色，只需要在映射表中新增RGBA格式的键值对即可
• 如果你需要实现近似颜色匹配（比如非标准RGB值匹配最近的标准色），可以新增RGB分量差值计算的逻辑，找到差值最小的对应颜色名即可

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