根据十六进制颜色获取最接近的颜色名称 [英] Get the closest color name depending on an hex-color

问题描述

我尝试获取最匹配的颜色名称取决于给定的十六进制值。例如，如果我们有十六进制＃f00 ，我们得到颜色名称 red 。

I try to get the most matching color name depending on an given hex-value. For example if we have the hex-color #f00 we've to get the colorname red.

'#ff0000' => 'red'
'#000000' => 'black'
'#ffff00' => 'yellow'

我使用目前的levenshtein-distance算法来获得最接近的颜色名称，效果很好

I use currently the levenshtein-distance algorithm to get the closest color name, works well so far, but sometimes not as expected.

例如：

'#0769ad' => 'chocolate'
'#00aaee' => 'mediumspringgreen'

那么任何想法如何让结果更接近呢？

So any ideas how to get the result closer?

这是我为了得到最接近的颜色：

Here's what I made to get the closest color:

Array.closest = (function () {

    // http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
    function levDist(s, t) {
        if (!s.length) return t.length;
        if (!t.length) return s.length;

        return Math.min(
            levDist(s.substring(1), t) + 1,
            levDist(t.substring(1), s) + 1,
            levDist(s.substring(1), t.substring(1)) + (s[0] !== t[0] ? 1 : 0)
        );
    }

    return function (arr, str) {
        // http://stackoverflow.com/q/11919065/1250044#comment16113902_11919065
        return arr.sort(function (a, b) {
            return levDist(a, str) - levDist(b, str);
        });
    };

}());

http://jsfiddle.net/ARTsinn/JUZVd/2/

另一件事是性能！看起来它有一个真正的大问题，这使得这真的很慢（是算法？）。

Another thing is the performance! It seems that it there's somewehere a really big issue that makes this really slow (is it the algorithm?).

推荐答案

Levenshtein距离在这里不是真的合适，因为它将逐个字符比较字符相等。您需要分别检查每种颜色，并且您希望 79 更接近 80 比 00 。

Levenshtein distance isn't really appropriate here, because it will compare character by character for equality. You need to check each color separately, and you would want 79 to be much closer to 80 than 00.

以下似乎更接近你想要的，只需对你的代码做最小的修改：

The following seems to be a lot closer to what you want, with only minimal changes to your code:

Array.closest = (function () {
    function dist(s, t) {
        if (!s.length || !t.length) return 0;
        return dist(s.slice(2), t.slice(2)) +
            Math.abs(parseInt(s.slice(0, 2), 16) - parseInt(t.slice(0, 2), 16));
    }

    return function (arr, str) {
        return arr.sort(function (a, b) {
            return dist(a, str) - dist(b, str);
        });
    };
}());

请注意，只有当 s 和 t 是6个字符的颜色十六进制代码。

Note that this will only give reasonable results when both s and t are 6-character color hex codes.

需要对整个数组进行排序以获得最接近的颜色。

Your code is inefficient because you don't need to sort the entire array to get the closest color. You should instead just loop through the array and keep track of the shortest distance.

例如：

Array.closest = (function () {
    function dist(s, t) {
        if (!s.length || !t.length) return 0;
        return dist(s.slice(2), t.slice(2)) +
            Math.abs(parseInt(s.slice(0, 2), 16) - parseInt(t.slice(0, 2), 16));
    }

    return function (arr, str) {
        var min = 0xffffff;
        var best, current, i;
        for (i = 0; i < arr.length; i++) {
            current = dist(arr[i], str)
            if (current < min) {
                min = current
                best = arr[i];
            }
        }
        return best;
    };
}());

请注意，此更改后 Array.closest（）将返回单个值而不是数组，因此您需要在代码中进一步删除 [0] 。

Note that after this change Array.closest() will return a single value rather than an array, so you will need to remove the [0] further down in your code.

这篇关于根据十六进制颜色获取最接近的颜色名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！