将 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 将R、G、B 三个单独的整数作为参数。这两个函数都将颜色表作为参数，因此可以根据需要进行交换, 但是如果你要使用一个固定的桌子，你可以改变它。

在某些组合中，结果并不完美，因为我在数组中定义的颜色只有 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++)
  {
    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)
    {
        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++)
  {
    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)
    {
        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(){
 
    $('#slider_r').val(0);
  $('#slider_g').val(0);
  $('#slider_b').val(0);
  
  function ReCalc()
  {
    $('#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(){
    $('#value_r').val($('#slider_r').val());
        ReCalc();
  });
  $('#slider_g').change(function(){
    $('#value_g').val($('#slider_g').val());
        ReCalc();
  });
  $('#slider_b').change(function(){
    $('#value_b').val($('#slider_b').val());
        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_g" value='0'><br>
B: <input id="slider_b" type="range" min="0" max="255" step="0"/> <input type=text id="value_b" 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>