Technical Blog

Get a color name from any RGB combination

The aim of this script is to get a color name from any RGB combination. There are over 16 million combinations, so we cannot have one name for each combination. However, we can get the nearest known color.



The color picker comes from David Durman’s website.

How it works

The hexadecimal value of a color represent a three-coordinates point: Red, Green and Blue. The first thing we need is a data set. I use this list from Wikipedia. I parsed it with jQuery, and built an array of labels points (r, g, b and color name) that I serialized in JSON. I finally put it in a seperate file.

The second step is to classify the color. We put this new point in our 3D space, and locate the closest labeled point. This algorithm is called kNN (k Nearest Neighbor). Here we use k=1, as we only have on element per class (color name).

Possible evolutions

The results of this technique are impacted by two main factors:

  • The dataset
  • The metric

We can change the dataset to modify the results. We can reduce it, to only use generic color names (green, brown, yellow etc.), instead of precise names (Blizzard Blue, Pakistan green, Stil de grain yellow, etc.). We can also add more data, so the density of points in the space will be higher, and the results more accurate. A lot of lists are available on the web.

Instead of using a lot of exotic color names, a solution could be to use several points for each label (color name). For instance, we could use a limited set of color names (red, green, blue, etc) but have a lot of points associated to these labels. For example, different points like #07250b (that is, in my opinion, missclassified) and #51f665 could share a same label: green. The problem is to have the dataset. We could build one from pages like this one, removing the numbers from each color name, so multiple points share the same name.
With several points for each label, It also will give us the possibility of using a 3NN, for example, instead of a 1NN classifier. It should impact also on the results, but I’m not sure it will really improve them.

The metric, or distance function, is the way we compute the distance between two points. In this technique, I use the euclidian metric, but a lot of other distances exists. Articles can be found about color metrics.

One possibility is to change our 3D space. Here we use the RGB color space, but we could also use different spaces like CMYK, HSV etc.

Finally, we could also get more information about our classification process. We could display the decision function. Instead of displaying all the existing colors in the picker, we could display for each pixel the color of the closest labeled point. It would be a good way to see the dataset density, and detect zones where the density is to low.

How to use it

You need first to download color_classifier.js. It requires jQuery to load the dataset, but you can avoid it by moving dataset.js content in color_classifier.js.
The first step is to build the classifier:

window.classifier = new ColorClassifier();
get_dataset('dataset.js', function (data){

Then we can classify colors:

var result_name = window.classifier.classify("#aaf000");
  • Guest

    You may want to investigate octrees to speed up your classifier.

  • Vjeux

    It’s already instant to find the matching color name. Not sure it’s needed to implement such a complex data structure.

  • rgb to color name mapper » Web Design

    [...] rgb to color name mapper [...]

  • Mathieu

    Nice work.
    Indeed, you could – and should – consider using a different distance for better results, because Euclidean distance in RGB space doesn’t accurately reflect our human visual perception.

    (oh, and sorry for my rusty English)

  • Martin Hansen

    Fantastic little tool. I’m partly color blind so this is very helpful to me.

  • George

    hi, i have it implemented here but an error comes up in my firebug console. Can you please indicate what is wrong?

  • vrunoa

    In jsfiddle doesnt work due to cross-domain security. You should copy the dataset.js into your server.

  • Howdy

    I’m new at this, so I’m wondering how to make this work without jQuery.

    I’ve pasted the dataset onto the top of color_classifier.js.

    I’ve loaded the modified color_classifier.js, and I have the script

    window.classifier = new ColorClassifier();
    var result_name = window.classifier.classify(“#aaf000″);

    What should I do?

  • Reza Rahmati

    I get this error[min_idx] is undefined

  • Adam

    Would be great to complete the “missing colors” with user-created names from

  • Adam
  • Adam Harris

    I really like this, so I put it up some code based off of it on github. I hope that’s alright. I linked back here to give you credit.

  • deepak

    any one can give me complete coding file..???

  • Matthew Corway

    Make sure you classify the color inside the callback for get_dataset. See here:

    var domHex = “#CC0000″;
    window.classifier = new ColorClassifier();
    get_dataset(‘dataset.js’, function (data){//make sure your dataset is local
    var theColorName = window.classifier.classify(domHex);
    console.log(“The color’s name is: “+theColorName);

  • Martti Mäger

    Hi! Nice script man. It was really easy to create my own limited color list and use it without any problems.

    I wanted to ask one more specific question. Is there a way to return 2 most likely colors? Like if the color is somewhere between red and brown it would output both of them?

  • Anonymous

    Hey Martti, thanks for your comment :-)

    Yes it is possible, if you look at the script, instead of storing the closest point, you could modify it to store the 2 closest ones, using a sorted array for example.

  • Martti Mäger

    Do you mean this function:

    get_closest_color_hex: function(triplet)
    var p =[this.last_result];
    var val = p.x * (256 * 256) + p.y * 256 + p.z;
    var str = val.toString(16);
    while (str.length < 6)
    str = "0" + str;
    return "#" + str;

    Could you please be bit more specific. I think this option would be a nice update for the script.

    Let's say we have an image and we want to extract the dominant colour from there. Then we have a bunch a images with their dominant colors. If I'd search for like yellow and peach color I would get the image form both categories because for one person it's yellow and for another it's peach color.


  • Patel Bros

    How can I get color code from name(reverse of your Demo)

  • puzzler

    Are you a graphic designer or something?