17

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

For example:

Colorname RGB black #000000 white #FFFFFF red #FF0000 green #008000
Improve this question
2

6 Answers 6

Reset to default
12

You can use 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:

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
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

8

You can do that with color_classifier.js plugin. It works good and returns the name of nearest color that has name.

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");
Improve this answer

Comments

7

First create a function to convert the 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 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 (l <= 15) { return ("Black") } else if ((s <= 10 && l <= 70) || s === 0) { return ("Gray") } 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);
Improve this answer

Comments

6

This color range was created by using specific query selector on this page

It might be useful if you writing jQuery plugin or something else without npm and you want to avoid third party libraries

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}), {}));

w3schools

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()];
Improve this answer

Comments

0

In the name of accuracy...

There are only 139 color codes that have a recognized identifier (not 140), out of which two have dual names!

The twins are:

  1. Aqua/Cyan = #00FFFF

  2. Fuchsia/Magenta = #FF00FF

So the total number of color identifiers supported by browsers is 141.

Improve this answer

Comments

-1

Here you can see RGB and 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 may hardcoding It.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.