javascript - 如何获得十六进制颜色值而不是 RGB 值？

Question

使用以下 jQuery 将获取元素背景颜色的 RGB 值:

$('#selector').css('backgroundColor');

有没有办法获取十六进制值而不是 RGB？

Answer 1

TLDR

在 rgb 和 rgba 支持下使用这个简洁的单行函数:

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

2021 年更新答案

自从我最初回答这个问题以来已经过去了很长时间。然后很酷的 ECMAScript 5 和 2015+ 功能在浏览器上大量可用，例如 arrow functions , Array.map , String.padStart和 template strings .所以现在可以写一个单行 rgb2hex:

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`

// Use as you wish...
console.log(rgb2hex('rgb(0,0,0)'))
console.log(rgb2hex('rgb(255, 255, 255)'))
console.log(rgb2hex('rgb(255,0,0)'))
console.log(rgb2hex('rgb(38, 170, 90)'))

基本上，我们使用正则表达式来获取rgb字符串中的每个数字，slice(1)只获取数字(的第一个结果match 是完整的字符串本身)，map 遍历每个数字，每次迭代都使用 parseInt 转换为 Number，然后返回到十六进制 String(通过 base-16 转换)，如果需要，通过 padStart 添加零。最后，只需将每个转换/调整后的数字加入到一个唯一的String，以'#'开头。

当然，我们可以毫不费力地将其扩展为单行rgba2hex:

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

// Now it doesn't matter if 'rgb' or 'rgba'...
console.log(rgba2hex('rgb(0,0,0)'))
console.log(rgba2hex('rgb(255, 255, 255)'))
console.log(rgba2hex('rgb(255,0,0)'))
console.log(rgba2hex('rgb(38, 170, 90)'))
console.log(rgba2hex('rgba(255, 0, 0, 0.5)'))
console.log(rgba2hex('rgba(0,255,0,1)'))
console.log(rgba2hex('rgba(127,127,127,0.25)'))

就是这样。但是，如果您想深入了解旧式 JavaScript 世界，请继续阅读。

---

2010 年原始答案

这是我根据@Matt 建议编写的更清洁的解决方案:

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

某些浏览器已经将颜色返回为十六进制(从 Internet Explorer 8 及更低版本开始)。如果您需要处理这些情况，只需在函数内附加一个条件，就像@gfrobenius 建议的那样:

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

如果您正在使用 jQuery 并且想要更完整的方法，您可以使用 CSS Hooks从 jQuery 1.4.3 开始可用，正如我在回答这个问题时展示的那样:Can I force jQuery.css("backgroundColor") returns on hexadecimal format?