Display HEX Value for color palette of images

Question

Please refer to www.granjacreativa.com/damepaleta after you drag an image into the box, we show the dominant color as well as the color palette. How do I display the HEX value for each of the colors displayed? I want to display them under the color box of each.

thank you

Answer 1

Try to use below functions

var hexDigits = new Array
    ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert hex format to a rgb color

function rgb2hex(rgb) {
   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
   return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

Read Convert jQuery RGB output to Hex Color

Updated From you site source you want to get swatch background color in hex then you should try after getting the colors,

alert(rgb2hex($('.swatch').css('background-color')));

to get all swatch background-color use $.each()

Answer 2

You can get background color and display hex, here is a javascript snippet:

$('.swatch').on('click',
    function(){
        var context = document.createElement('canvas').getContext('2d');
        context.strokeStyle = $(this).css('backgroundColor');
        alert(context.strokeStyle);
}).css('cursor', 'pointer');

We'll make use of canvas, since is simpler to get the actual hex color.