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

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