javascript 通过 HEX 或 RGB 获取颜色名称

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9224404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 05:59:07  来源:igfitidea点击:

Get color name by HEX or RGB

javascriptjquerycsscolors

提问by newpdv

How can I get a color name using JS/JQuery, knowing the code RBG/HEX?

知道代码 RBG/HEX,如何使用 JS/JQuery 获取颜色名称?

For example:

例如:

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

采纳答案by Grant Miller

You can use Name that Color.

您可以使用Name that Color

Example:

例子:

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


There is also a variation of Name that Color that includes additional parameters:

Name that Color 也有一个变体,其中包括附加参数:

http://www.color-blindness.com/color-name-hue-tool/js/ntc.js

http://www.color-blindness.com/color-name-hue-tool/js/ntc.js

Example:

例子:

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

回答by Chuck Norris

You can do that with color_classifier.jsplugin. It works good and returns the name of nearestcolor that has name.

您可以使用color_classifier.js插件来做到这一点。它运行良好并返回具有名称的 最近颜色的名称。

Just use like this

就这样使用

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

回答by Patricio Bustos

First create a function to convert the rgb color to hsl:

首先创建一个函数将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};
}

Create a function to clasific the colors:

创建一个函数来定义颜色:

function colorName(hsl) {
        var l = Math.floor(hsl.l), s = Math.floor(hsl.s), h = Math.floor(hsl.h);
        if (s <= 10 && l >= 90) {
            return ("White")
        } else if ((s <= 10 && l <= 70) || s === 0) {
            return ("Gray")
        } else if (l <= 15) {
            return ("Black")
        } else if ((h >= 0 && h <= 15) || h >= 346) {
            return ("Red");
        } else if (h >= 16 && h <= 35) {
            if (s < 90) {
                return ("Brown");
            } else {
                return ("Orange");
            }
        } else if (h >= 36 && h <= 54) {
            if (s < 90) {
                return ("Brown");
            } else {
                return ("Yellow");
            }
        } else if (h >= 55 && h <= 165) {
            return ("Green");
        } else if (h >= 166 && h <= 260) {
            return ("Blue")
        } else if (h >= 261 && h <= 290) {
            return ("Purple")
        } else if (h >= 291 && h <= 345) {
            return ("Pink")
        }
    }

And a function to get the intensity of color:

以及获取颜色强度的函数:

function inten(rgb){
  var hex = "",hex += Number(rgb[0]).toString(16), hex += Number(rgb[1]).toString(16), hex += Number(rgb[2]).toString(16), txt = "";
  var rgb = parseInt(hex, 16);
  var r = (rgb >> 16) & 0xff; 
  var g = (rgb >>  8) & 0xff;
  var b = (rgb >>  0) & 0xff; 
  var inten = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  if(inten >= 80 && inten <= 100){
    txt = "semi dark";
  }    else if(inten < 40){
    txt = "dark";
  }    else{
    txt = "light";
  }
 return txt;
}

Example:

例子:

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);

回答by equero

Here you can see RGB and corresponding color names:

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

http://www.w3schools.com/cssref/css_colornames.asp

http://www.w3schools.com/cssref/css_colornames.asp

How you can use It depends on your application, you can store It in a database or may hardcoding It.

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