顯示圖像調色板的HEX值

Question

將圖像拖入框中後，請參考www.granjacreativa.com/damepaleta ，我們將顯示主色和調色板。如何顯示每種顯示顏色的HEX值？ 我想在每個的顏色框下顯示它們。

謝謝

Answer 1

嘗試以下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]; 
} 

讀Convert jQuery RGB output to Hex Color

更新從你你想swatch background color在hex，那麼你應該得到colors後嘗試site source使用，

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

讓所有swatch background-color使用$.each()

Answer 2

你可以得到的背景顏色和顯示十六進制，這裏是一個JavaScript代碼段：

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

我們將利用帆布，因爲是簡單的獲得實際的十六進制顏色。