rgbの色を最も近い有効なCSS3の色名に変換します。

Question

javascriptを使用してrgb値を受信して​​います。その値を最も近い有効なCSS3カラー名に変換したいと思います。私はpythonのソリューションを見つけましたが、私はjavascriptでそれを必要とし、私はそれを動作させるように見えることはできません。

私がこれを必要とするのは、考えられる色を10に制限することです。ここで

Convert rgb color to english color name, like 'green'

Answer 1

にいます。関数自体は純粋なJSです。テスト関数のみがjQueryを使用します。 色は構造体の配列に定義されています。約10個の特定の色のみに一致させたいからです。ほとんどのコードはプレゼンテーションのためのものです。 findClosestColorRGBがR、Gのための3つの別々の整数をとりながら

機能findClosestColorHexは、両方の関数がパラメータとしてカラーテーブルを取るので、必要であれば、それはswapedことができるが、場合B.、例えば「＃1 FF0000」としてパラメータ進値として取りあなたは1つの固定テーブルを使用するつもりです、あなたはこれを変更することができます。

いくつかの組み合わせでは、配列で定義した色は16色しかないので、結果は完全ではありません。

var ColorTable = [ 
 
{name:'black', hex: '#000000'}, 
 
{name:'silver', hex: '#C0C0C0'}, 
 
{name:'gray', hex: '#808080'}, 
 
{name:'white', hex: '#FFFFFF'}, 
 
{name:'maroon', hex: '#800000'}, 
 
{name:'red', hex: '#FF0000'}, 
 
{name:'purple', hex: '#800080'}, 
 
{name:'fuchsia', hex: '#FF00FF'}, 
 
{name:'green', hex: '#008000'}, 
 
{name:'lime', hex: '#00FF00'}, 
 
{name:'olive', hex: '#808000'}, 
 
{name:'yellow', hex: '#FFFF00'}, 
 
{name:'navy', hex: '#000080'}, 
 
{name:'blue', hex: '#0000FF'}, 
 
{name:'teal', hex: '#008080'}, 
 
{name:'aqua', hex: '#00FFFF'} 
 
]; 
 

 
Hex2RGB = function(hex) { 
 
    if (hex.lastIndexOf('#') > -1) { 
 
     hex = hex.replace(/#/, '0x'); 
 
    } else { 
 
     hex = '0x' + hex; 
 
    } 
 
    var r = hex >> 16; 
 
    var g = (hex & 0x00FF00) >> 8; 
 
    var b = hex & 0x0000FF; 
 
    return {r:r, g:g, b:b}; 
 
}; 
 

 
function findClosestColorHex(hex, table) 
 
{ 
 
    var rgb = Hex2RGB(hex); 
 
    var delta = 3 * 256*256; 
 
    var temp = {r:0, g:0, b:0}; 
 
    var nameFound = 'black'; 
 
    
 
    for(i=0; i<table.length; i++) 
 
    { 
 
    \t temp = Hex2RGB(table[i].hex); 
 
    if(Math.pow(temp.r-rgb.r,2) + Math.pow(temp.g-rgb.g,2) + Math.pow(temp.b-rgb.b,2) < delta) 
 
    { 
 
    \t delta = Math.pow(temp.r-rgb.r,2) + Math.pow(temp.g-rgb.g,2) + Math.pow(temp.b-rgb.b,2); 
 
     nameFound = table[i].name; 
 
    } 
 
    } 
 
    return nameFound; 
 
} 
 

 
function findClosestColorRGB(r, g, b, table) 
 
{ 
 
    var rgb = {r:r, g:g, b:b}; 
 
    var delta = 3 * 256*256; 
 
    var temp = {r:0, g:0, b:0}; 
 
    var nameFound = 'black'; 
 
    
 
    for(i=0; i<table.length; i++) 
 
    { 
 
    \t temp = Hex2RGB(table[i].hex); 
 
    if(Math.pow(temp.r-rgb.r,2) + Math.pow(temp.g-rgb.g,2) + Math.pow(temp.b-rgb.b,2) < delta) 
 
    { 
 
    \t delta = Math.pow(temp.r-rgb.r,2) + Math.pow(temp.g-rgb.g,2) + Math.pow(temp.b-rgb.b,2); 
 
     nameFound = table[i].name; 
 
    } 
 
    } 
 
    return nameFound; 
 
} 
 

 
//alert(findClosestColor('#884455', ColorTable)); 
 

 

 

 
// Example code 
 

 
$('document').ready(function(){ 
 
    
 
\t $('#slider_r').val(0); 
 
    $('#slider_g').val(0); 
 
    $('#slider_b').val(0); 
 
    
 
    function ReCalc() 
 
    { 
 
    \t $('#selected_color').css('background-color', 'rgb('+$('#slider_r').val()+', '+$('#slider_g').val()+', '+$('#slider_b').val()+')'); 
 
    var ret = findClosestColorRGB($('#slider_r').val(), $('#slider_g').val(), $('#slider_b').val(), ColorTable); 
 
    $('#matched_color').css('background-color', ret); 
 
    $('#color_name').html(ret); 
 
    } 
 
    
 
    $('#slider_r').change(function(){ 
 
    \t $('#value_r').val($('#slider_r').val()); 
 
\t \t ReCalc(); 
 
    }); 
 
    $('#slider_g').change(function(){ 
 
    \t $('#value_g').val($('#slider_g').val()); 
 
\t \t ReCalc(); 
 
    }); 
 
    $('#slider_b').change(function(){ 
 
    \t $('#value_b').val($('#slider_b').val()); 
 
\t \t ReCalc(); 
 
    }); 
 

 
});

.color-field { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: #000000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
R: <input id="slider_r" type="range" min="0" max="255" step="0"/> <input type=text id="value_r" value='0'><br> 
 
G: <input id="slider_g" type="range" min="0" max="255" step="0"/> <input type=text id="value_r" value='0'><br> 
 
B: <input id="slider_b" type="range" min="0" max="255" step="0"/> <input type=text id="value_r" value='0'><br> 
 
<br> 
 
Selected: <span id='selected_color' class='color-field'>&nbsp;</span><br> 
 
Matched: <span id='matched_color' class='color-field'>&nbsp;</span><span id="color_name">&nbsp;</span>