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.

Demo

Input
Closest

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){
    window.classifier.learn(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.

  • http://blog.vjeux.com/ Vjeux

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

  • http://webdesign.populoo.com/2011/10/02/rgb-to-color-name-mapper/ 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.
    See: http://stackoverflow.com/questions/5392061/algorithm-to-check-similarity-of-colors-based-on-rgb-values-or-maybe-hsv

    (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 http://jsfiddle.net/TMCby/6/ 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″);
    document.write(result_name);

    What should I do?

  • Reza Rahmati

    Hi
    I get this error
    this.data[min_idx] is undefined