Konvertieren Sie RGB-Farbe in den nächsten gültigen CSS3-Farbnamen

Question

Ich erhalte einen rgb-Wert mit Javascript. Ich möchte diesen Wert in den nächsten gültigen CSS3-Farbnamen konvertieren. Ich fand eine Python-Lösung, aber ich brauche es in Javascript und ich kann nicht scheinen, es auszuarbeiten.

Der Grund, warum ich das brauche, ist die Begrenzung der möglichen Farben auf 10 geben oder nehmen.

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

Answer 1

Hier, bitte. Die Funktion selbst ist reines JS. Nur die Testfunktion verwendet jQuery. Farben werden in einem Array von Strukturen definiert, weil Sie angegeben haben, dass Sie nur mit etwa 10 bestimmten Farben übereinstimmen möchten. Der Großteil des Codes ist für die Präsentation gedacht.

Funktion findClosestColorHex nimmt als Parameter Hex-Wert wie '# FF0000', während findClosestColorRGB 3 separate Ganzzahlen für R, G, B nimmt. Beide Funktionen nehmen die Farbtabelle als Parameter, so kann es bei Bedarf ausgetauscht werden, aber wenn Sie werden einen festen Tisch verwenden, Sie können dies ändern.

In einigen Kombinationen ist das Ergebnis nicht perfekt, da die Farben, die ich in Array definiert habe, nur 16 Grundfarben sind.

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>