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
Get color name by HEX or RGB
提问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.
如何使用它取决于您的应用程序,您可以将它存储在数据库中,也可以对其进行硬编码。