Convert rgb color to closest valid CSS3 color name

Question

I am receiving an rgb value using javascript. I want to convert that value to the closest valid CSS3 color name. I found a python solution but I need it in javascript and I can't seem to work it out.

The reason I need this is to limit the possible colors to 10 give or take.

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

Answer 1

Here you are. The function itself is pure JS. Only test function uses jQuery. Colors are defined in an array of structures, because you said you want to match to about 10 specific colors only. Most of the code is for presentation.

Function findClosestColorHex takes as parameter hex value such as '#FF0000', while findClosestColorRGB takes 3 separate integers for R, G, B. Both functions take the color table as parameter, so it can be swaped if needed, but if you are going to use one fixed table, you can change this.

In some combinations the result is not perfect because the colors that I have defined in array are only 16 basic colors.

 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>