13

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
dgw
  • 13,418
  • 11
  • 56
  • 54
newpdv
  • 412
  • 1
  • 6
  • 15
  • 1
    What should happen for colors that don't have a name, like `#020304`? – zneak Feb 10 '12 at 07:49
  • 1
    possible duplicate of [Convert RGB to ColorName String Javascript](http://stackoverflow.com/questions/5486730/convert-rgb-to-colorname-string-javascript) (have a look @ http://chir.ag/projects/name-that-color) –  Feb 10 '12 at 07:50

5 Answers5

11

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
Community
  • 1
  • 1
Grant Miller
  • 27,532
  • 16
  • 147
  • 165
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");
Chuck Norris
  • 15,207
  • 15
  • 92
  • 123
5

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

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()];
Petr Tripolsky
  • 1,419
  • 15
  • 23
-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.

equero
  • 20
  • 3