Get color name by HEX or RGB
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}), {}));
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()];
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
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);
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");