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

Question

我正在使用 javascript 接收 rgb 值。 我想将该值转换为最接近的有效 CSS3 颜色名称。 我找到了一个 python 解决方案，但我需要在 javascript 中使用它，但我似乎无法解决。

我需要这个的原因是将可能的颜色限制为 10 种给予或接受。

将 rgb 颜色转换为英文颜色名称，如“绿色”

Answer 1

你在这里。 函数本身是纯JS。 只有测试函数使用 jQuery。 颜色在结构数组中定义，因为您说您只想匹配大约 10 种特定颜色。 大部分代码用于演示。

函数findClosestColorHex将 '#FF0000' 等十六进制值作为参数，而findClosestColorRGB为 R、G、B 使用 3 个单独的整数。这两个函数都将颜色表作为参数，因此可以根据需要进行交换，但如果您要使用一张固定表，您可以更改它。

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