显示图像调色板的 HEX 值答案

【问题标题】：Display HEX Value for color palette of images显示图像调色板的 HEX 值
【发布时间】：2014-01-24 17:58:46
【问题描述】：

请参考www.granjacreativa.com/damepaleta 将图像拖入框中后，我们会显示主色以及调色板。如何显示每种显示颜色的 HEX 值？我想将它们显示在每个的颜色框下。

谢谢

【问题讨论】：

标签： javascript php jquery colors palette

【解决方案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

更新从你site source你想在hex中得到swatch background color，那么你应该在得到colors之后尝试，

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

要获取所有swatch background-color，请使用$.each()

【讨论】：

试试alert(rgb2hex($('#yourelement').css('background-color')));
顺便说一句。函数 hex(x) { return ('0'+(+x||0).toString(16)).slice(-2); }
我很抱歉，但我完全是新手，因此我不知道应该在我的哪个文件中添加此代码。如果有帮助，我可以分享完整的代码吗？非常感谢大家的帮助

【解决方案2】：

你可以获取背景颜色和显示十六进制，这里是一个javascript sn-p：

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

我们将使用画布，因为更容易获得实际的十六进制颜色。

【讨论】：