Javascript 通过十六进制或RGB获取颜色名称

知道代码RBG/HEX，如何使用JS/JQuery获得颜色名称

例如：

Colorname      RGB
black          #000000  
white          #FFFFFF
red            #FF0000
green          #008000

---

在这里您可以看到RGB和相应的颜色名称：

如何使用它取决于您的应用程序，您可以将其存储在数据库中，也可以对其进行硬编码。

您可以使用插件来实现这一点。它工作正常，并返回具有名称的最近颜色的名称

就这样用吧

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

你可以用。 示例：

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let is_exact_match = result[2]; // false           : True if exact color match

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let shade_value = result[2];    // #0000ff         : RGB value of shade of closest match
let shade_name = result[3];     // Blue            : Color name of shade of closest match
let is_exact_match = result[4]; // false           : True if exact color match

---

该颜色的名称还有一个变体，包括其他参数：

示例：

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let is_exact_match = result[2]; // false           : True if exact color match

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let shade_value = result[2];    // #0000ff         : RGB value of shade of closest match
let shade_name = result[3];     // Blue            : Color name of shade of closest match
let is_exact_match = result[4]; // false           : True if exact color match

---

首先创建将rgb颜色转换为hsl的函数：

function hsl(rgbArr) {
  var r1 = Number(rgbArr[0]) / 255, g1 = Number(rgbArr[1]) / 255, b1 = Number(rgbArr[2]) / 255;
  var maxColor = Math.max(r1,g1,b1), minColor = Math.min(r1,g1,b1);
  var L = (maxColor + minColor) / 2 , S = 0, H = 0;
  if(maxColor != minColor){
    if(L < 0.5){
      S = (maxColor - minColor) / (maxColor + minColor);
    }else{
      S = (maxColor - minColor) / (2.0 - maxColor - minColor);
    }
    if(r1 == maxColor){
      H = (g1-b1) / (maxColor - minColor);
    }else if(g1 == maxColor){
      H = 2.0 + (b1 - r1) / (maxColor - minColor);
    }else{
      H = 4.0 + (r1 - g1) / (maxColor - minColor);
    }
  }
  L = L * 100;
  S = S * 100;
  H = H * 60;
  if(H<0){
    H += 360;
  }
  return {h:H, s:S, l:L};
}

---

此颜色范围是使用上的特定查询选择器创建的

如果您编写jQuery插件或其他没有npm的东西，并且希望避免使用第三方库，那么它可能会很有用

---

对于没有名称的颜色，如

020304

，会发生什么情况？可能重复（查看@）

var color = "rgb(253, 209, 57)";
var rgb = color.replace(/[^0-9,]/g,'').replace().split(",");
var nameColor = colorName(hsl(rgb))+" "+inten(rgb);
console.log(nameColor);

JSON.stringify(Array.from(document.querySelectorAll('.colorbox')).map((el) => ({
    [el.querySelector('.colornamespan > a').innerText.toLowerCase()]: el.querySelector('.colorhexspan > a').innerText.toLowerCase()
})).reduce((acm, cur) => ({...acm, ...cur}), {}));

const wordToHex = {
    aliceblue: "#F0F8FF",
    antiquewhite: "#FAEBD7",
    aqua: "#00FFFF",
    aquamarine: "#7FFFD4",
    azure: "#F0FFFF",
    beige: "#F5F5DC",
    bisque: "#FFE4C4",
    black: "#000000",
    blanchedalmond: "#FFEBCD",
    blue: "#0000FF",
    blueviolet: "#8A2BE2",
    brown: "#A52A2A",
    burlywood: "#DEB887",
    cadetblue: "#5F9EA0",
    chartreuse: "#7FFF00",
    chocolate: "#D2691E",
    coral: "#FF7F50",
    cornflowerblue: "#6495ED",
    cornsilk: "#FFF8DC",
    crimson: "#DC143C",
    cyan: "#00FFFF",
    darkblue: "#00008B",
    darkcyan: "#008B8B",
    darkgoldenrod: "#B8860B",
    darkgray: "#A9A9A9",
    darkgrey: "#A9A9A9",
    darkgreen: "#006400",
    darkkhaki: "#BDB76B",
    darkmagenta: "#8B008B",
    darkolivegreen: "#556B2F",
    darkorange: "#FF8C00",
    darkorchid: "#9932CC",
    darkred: "#8B0000",
    darksalmon: "#E9967A",
    darkseagreen: "#8FBC8F",
    darkslateblue: "#483D8B",
    darkslategray: "#2F4F4F",
    darkslategrey: "#2F4F4F",
    darkturquoise: "#00CED1",
    darkviolet: "#9400D3",
    deeppink: "#FF1493",
    deepskyblue: "#00BFFF",
    dimgray: "#696969",
    dimgrey: "#696969",
    dodgerblue: "#1E90FF",
    firebrick: "#B22222",
    floralwhite: "#FFFAF0",
    forestgreen: "#228B22",
    fuchsia: "#FF00FF",
    gainsboro: "#DCDCDC",
    ghostwhite: "#F8F8FF",
    gold: "#FFD700",
    goldenrod: "#DAA520",
    gray: "#808080",
    grey: "#808080",
    green: "#008000",
    greenyellow: "#ADFF2F",
    honeydew: "#F0FFF0",
    hotpink: "#FF69B4",
    indianred: "#CD5C5C",
    indigo: "#4B0082",
    ivory: "#FFFFF0",
    khaki: "#F0E68C",
    lavender: "#E6E6FA",
    lavenderblush: "#FFF0F5",
    lawngreen: "#7CFC00",
    lemonchiffon: "#FFFACD",
    lightblue: "#ADD8E6",
    lightcoral: "#F08080",
    lightcyan: "#E0FFFF",
    lightgoldenrodyellow: "#FAFAD2",
    lightgray: "#D3D3D3",
    lightgrey: "#D3D3D3",
    lightgreen: "#90EE90",
    lightpink: "#FFB6C1",
    lightsalmon: "#FFA07A",
    lightseagreen: "#20B2AA",
    lightskyblue: "#87CEFA",
    lightslategray: "#778899",
    lightslategrey: "#778899",
    lightsteelblue: "#B0C4DE",
    lightyellow: "#FFFFE0",
    lime: "#00FF00",
    limegreen: "#32CD32",
    linen: "#FAF0E6",
    magenta: "#FF00FF",
    maroon: "#800000",
    mediumaquamarine: "#66CDAA",
    mediumblue: "#0000CD",
    mediumorchid: "#BA55D3",
    mediumpurple: "#9370DB",
    mediumseagreen: "#3CB371",
    mediumslateblue: "#7B68EE",
    mediumspringgreen: "#00FA9A",
    mediumturquoise: "#48D1CC",
    mediumvioletred: "#C71585",
    midnightblue: "#191970",
    mintcream: "#F5FFFA",
    mistyrose: "#FFE4E1",
    moccasin: "#FFE4B5",
    navajowhite: "#FFDEAD",
    navy: "#000080",
    oldlace: "#FDF5E6",
    olive: "#808000",
    olivedrab: "#6B8E23",
    orange: "#FFA500",
    orangered: "#FF4500",
    orchid: "#DA70D6",
    palegoldenrod: "#EEE8AA",
    palegreen: "#98FB98",
    paleturquoise: "#AFEEEE",
    palevioletred: "#DB7093",
    papayawhip: "#FFEFD5",
    peachpuff: "#FFDAB9",
    peru: "#CD853F",
    pink: "#FFC0CB",
    plum: "#DDA0DD",
    powderblue: "#B0E0E6",
    purple: "#800080",
    rebeccapurple: "#663399",
    red: "#FF0000",
    rosybrown: "#BC8F8F",
    royalblue: "#4169E1",
    saddlebrown: "#8B4513",
    salmon: "#FA8072",
    sandybrown: "#F4A460",
    seagreen: "#2E8B57",
    seashell: "#FFF5EE",
    sienna: "#A0522D",
    silver: "#C0C0C0",
    skyblue: "#87CEEB",
    slateblue: "#6A5ACD",
    slategray: "#708090",
    slategrey: "#708090",
    snow: "#FFFAFA",
    springgreen: "#00FF7F",
    steelblue: "#4682B4",
    tan: "#D2B48C",
    teal: "#008080",
    thistle: "#D8BFD8",
    tomato: "#FF6347",
    turquoise: "#40E0D0",
    violet: "#EE82EE",
    wheat: "#F5DEB3",
    white: "#FFFFFF",
    whitesmoke: "#F5F5F5",
    yellow: "#FFFF00",
    yellowgreen: "#9ACD32",
};

const hexToWord =  Object.fromEntries(Object.entries(wordToHex).map(([k, v]) => [v, k]))

const toHex = (color) => wordToHex[color.toLowerCase()];
const fromHex = (hex) => hexToWord[hex.toLowerCase()];