从 RGB 值或十六进制值获取颜色名称的 Javascript 函数 [关闭]答案

【问题标题】：Javascript function to get the color name from RGB value or Hexadecimal value [closed]从 RGB 值或十六进制值获取颜色名称的 Javascript 函数 [关闭]
【发布时间】：2023-04-07 15:00:01
【问题描述】：

需要一个 javascript 方法来获取颜色名称。

希望javascript函数应该如下所示

function (r,g,b)
{
  ....
  return <color name>; // like blue, cyan, magneta etc etc
}

【问题讨论】：

wowmotty.blogspot.in/2009/06/…

标签： javascript

【解决方案1】：

您可以使用 color_classifier.js plug in 做到这一点。它工作得很好，并返回具有名称的最近颜色的名称。

就这样使用

window.classifier = new ColorClassifier();
get_dataset('dataset.js', function (data){
    window.classifier.learn(data);
});
var result_name = window.classifier.classify("#aaf000");

【讨论】：

【解决方案2】：

如果您知道颜色值表示与颜色匹配的组合，则可以使用：

function getName(r, g, b) {
  switch ((r >> 5)*100+(g >> 5)*10+(b >> 5)) {
    case 400: return "maroon";
    case 700: return "red";
    case 750: return "orange";
    case 770: return "yellow";
    case 440: return "olive";
    case 404: return "purple";
    case 707: return "fuchsia";
    case 777: return "white";
    case 070: return "lime";
    case 040: return "green";
    case 004: return "navy";
    case 007: return "blue";
    case 077: return "aqua";
    case 044: return "teal";
    case 000: return "black";
    case 666: return "silver";
    case 444: return "gray";
  }
}

对于与颜色不匹配的颜色值，它可能会返回相似的颜色（例如getName(230,240,250) 返回"white"）或undefined。

【讨论】：

【解决方案3】：

这里列出了所有标准的已知颜色：http://www.w3.org/TR/CSS21/syndata.html#color-units

这是已知颜色的最小集合，其他平台可能会给出更多颜色关键字如：http://www.w3schools.com/cssref/css_colornames.asp

只要选择你已知的颜色集，把它们做成一个(r, g, b) -> name图，这个功能很容易实现

【讨论】：

【解决方案4】：

//将hex格式转换为rgb颜色的函数

function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

这是一个如何在 jQuery 中使用此代码的示例：

document.write( rgb2hex($('#myElement').css('background-color')) );
// outputs: #222222

现在您可以使用此输出并与任何开关函数进行比较以了解此颜色的名称

switch(color_code){
  case '#111111' : return ColorOne; break;
  case '#222222' : return ColorTwo; break;
  case '#333333' : return ColorThree; break;
}

//将hex格式转换为rgb颜色的函数

function rgb2hex(rgb) {
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

参考这个 JSFiddle 链接可能会有所帮助。 --> ClickHere

【讨论】：