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。两个函数都将颜色表作为参数，因此它可以如果需要可以转换，但是如果你打算使用一个固定的桌子，你可以改变它。

在某些组合中，结果并不完美，因为我在数组中定义的颜色只有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_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>

将rgb颜色转换为最接近的有效CSS3颜色名称

1 个答案: