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'> </span><br>
Matched: <span id='matched_color' class='color-field'> </span><span id="color_name"> </span>