断续器

将此干净的单行函数与两者同时使用和支持：rgbrgba

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+ 功能在浏览器上大量可用，如箭头函数、Array.map、String.padStart 和模板字符串。所以现在可以写一个单行：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)'))

基本上，我们使用正则表达式来获取字符串中的每个数字，仅获取数字（第一个结果是完整的字符串本身），循环访问每个数字，每次迭代转换为 with ，然后返回十六进制（通过以16为基数的转换），如果需要，通过 添加零。最后，只需将每个转换/调整的数字转换为以 开头的唯一数字。rgbslice(1)matchmapNumberparseIntStringpadStartjoinString'#'

当然，我们可以毫不费力地将其扩展为单行：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并且想要一个更完整的方法，你可以使用自jQuery 1.4.3以来可用的CSS Hooks，正如我在回答这个问题时所展示的那样：我可以强制jQuery.css（“backgroundColor”）以十六进制格式返回吗？

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

//Function to convert rgb color to hex format
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];
 }

(源)