Get color name by HEX or RGB

Question

How to get color name using JS / JQuery knowing RBG / HEX code?

For example:

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

Answer 1

You can do this with the color_classifier.js plugin. It works well and returns the name of the nearest color with the name.

Just use this

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

Answer 2

You can use the name of this 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 variant that Name that Color, which includes additional parameters:

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 

Answer 3

First create a function to convert rgb color to 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 classify 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 the function to get the color intensity:

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

Answer 4

Here you can see the RGB and the corresponding color names:

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 you can hardcode it.