將 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>