RGB to Color Name Mapping（近似カラーマッピング）

Question

私はビルダーカラーピッカーです。ユーザーがカラースクエアを選択すると、という近似色名に変換されます。

たとえば、ユーザーがC0C0C0またはBEBEBEの色を選択した場合、各色に特定の色名があるにもかかわらず、両方の色文字列がgreyに変換されます。

私はこの問題にどのように近づくことができるのか把握することができず、Googleも私を助けませんでした。 ？:(ここ

は私のsudoのコードは、色関数に

getApproxColor = (colorString) => { 
    if(`BBBBBB` <= colorString <= 'CCCCCC') { 
     return 'grey' 
    } 
    ... 
} 

である私は、この機能に全体の色の名前を書くべき六角カラーのいずれかの式があり

Answer 1

最も近い1

です見つけますこのようなことをしなければならない場合は、最初にこれらの16進数値をhslに変換すると思います。

次に、彩度と輝度をチェックして、結果に細かい粒度を追加する必要があります。

ここでは、6つの基本色のみを使用し、stolen code from an older questionを使用してこのhex => hsl変換を行う概念の大まかな証明があります。トリッキーな質問です

inp.oninput = e => { 
 
    if (!inp.checkValidity()) return; 
 
    var val = inp.value; 
 
    if (val.length !== 3 && val.length !== 6) return; 
 
    var color = hexToName(inp.value); 
 
    if (color) { 
 
    inp.style.backgroundColor = '#' + val; 
 
    log.textContent = color; 
 
    } 
 
} 
 

 

 
function hexToName(hex) { 
 
    // first get hsl correspondance 
 
    var hsl = hexToHsl(hex); 
 
    if(!hsl){ 
 
    return; 
 
    } 
 
    // get the base color 
 
    var color = getColorName(hsl[0] * 360); 
 
    // check saturation and luminosity 
 
    // needs more granularity, left as an exercise for the reader 
 
    if (hsl[1] < .5) { 
 
    return hsl[2] <= .5 ? hsl[2] === 0? 'black' : 'darkgray' : hsl[2] === 1 ? 'white': 'gray'; 
 
    } 
 
    return hsl[2] <= .5 ? color : 'light' + color; 
 
} 
 
function getColorName(hue) { 
 
    // here you will need more work: 
 
    // we use fixed distance for this simple demo 
 
    var names = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta']; 
 
    var angles = [0, 60, 120, 180, 240, 300]; 
 
    var match = angles.filter(a => 
 
    a - 60 <= hue && a + 60 > hue 
 
)[0] || 0; 
 
    return names[angles.indexOf(match)]; 
 
} 
 
// shamelessly stolen from https://stackoverflow.com/a/3732187/3702797 
 
function hexToHsl(hex) { 
 
    if (hex.length === 3) { 
 
    hex = hex.split('').map(c => c.repeat(2)).join(''); 
 
    } 
 
    if (hex.length !== 6) { 
 
    return; 
 
    } 
 
    var r = parseInt(hex[0] + hex[1], 16); 
 
    var g = parseInt(hex[2] + hex[3], 16); 
 
    var b = parseInt(hex[4] + hex[5], 16); 
 

 
    r /= 255, g /= 255, b /= 255; 
 
    var max = Math.max(r, g, b), 
 
    min = Math.min(r, g, b); 
 
    var h, s, l = (max + min)/2; 
 

 
    if (max == min) { 
 
    h = s = 0; // achromatic 
 
    } else { 
 
    var d = max - min; 
 
    s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
 
    switch (max) { 
 
     case r: 
 
     h = (g - b)/d + (g < b ? 6 : 0); 
 
     break; 
 
     case g: 
 
     h = (b - r)/d + 2; 
 
     break; 
 
     case b: 
 
     h = (r - g)/d + 4; 
 
     break; 
 
    } 
 
    h /= 6; 
 
    } 
 

 
    return [h, s, l]; 
 
}

#<input id="inp" type="text" pattern="[0-9a-fA-F]+"> 
 
<pre id="log"><pre>

Answer 2

TL; DR：？ちょうど使用。このライブラリは、それは私が言ったことの混合ですが、Kaiidoで言及した、複雑では解決：http://chir.ag/projects/ntc/

---

がここにオリジナルの答えを維持するが、それは共同動作しません。完全に。上記を参照。

まあ、すべての色は6桁の6桁の組み合わせです。

あなたはのは言わせて、int型にその数を変換する場合、BEBEBEあなたはその後、すべての既知の名前のキー/ペアとそれに対応する整数値を持つ小さなテーブルを持っている可能性が12500670.

です。

次に、テーブルに最も近い整数を見つけることになります。

編集：

1. はヘキサ10進数に変換：あなたのカラーピッカーを持っており、それは人が「BEBEBE」を選択したことを言ったら

   基本的に、あなたがしなければなりません。複数のチュートリアルとオンラインツールがありますので、ここでは詳しく説明しません。それほど難しいことではありません。

2. これで、テーブル、オブジェクト、配列、小数点以下の値でソートされたもの、それらのコンテンツネームがあります。例： http://cloford.com/resources/colours/500col.htmヘキサコードを持つこのテーブルを使用して、10進数に変換できます。 [{ 名： 'bebebe' 小数：：、ヘキサ '灰色' '12500670' }は、 [...] //挿入より多くの色が ]
3. はその後、小数を比較するあなたのリストを反復処理することができあなたが持っているものよりも高い数に達したときに停止し、見つかったものと前のものを保存することができます。
4. あなたは、あなただけ見られるものと前の、そしてより少ない差の違いは、私はそれが最善の方法であるかどうかわからないのです利益