將rgb顏色轉換爲最接近的有效CSS3顏色名稱

Question

我正在使用javascript接收rgb值。我想將該值轉換爲最接近的有效CSS3顏色名稱。我找到了一個python解決方案，但我需要它在JavaScript中，我似乎無法解決。

我需要這個的原因是將可能的顏色限制在10個或以上。

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

Answer 1

給你。該函數本身是純JS。只有測試函數使用jQuery。 顏色是在一個結構數組中定義的，因爲你說你只想匹配大約10個特定的顏色。大部分代碼都用於演示。

功能findClosestColorHex採用作爲參數的十六進制值，如「＃FF0000」，而findClosestColorRGB需要3個獨立的整數爲R，G，B。這兩個函數需要的顏色表作爲參數，所以它可以在需要時swaped，但如果你將使用一個固定的表格，你可以改變它。

在某些組合中，結果並不完美，因爲我在數組中定義的顏色只有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>