如何将RGB格式的颜色转换为十六进制格式,反之亦然?
例如,转换'#0080C0'为(0, 128, 192)。
'#0080C0'
(0, 128, 192)
注 :这两个版本的rgbToHex期待整数值r,g并且b,所以你需要,如果你有非整数值做自己的舍入。
rgbToHex
r
g
b
以下将执行RGB到十六进制的转换,并添加任何所需的零填充:
function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } alert(rgbToHex(0, 51, 255)); // #0033ff
转换另一种方式:
function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } alert(hexToRgb("#0033ff").g); // "51";
最后,在答案中rgbToHex()讨论并在@cwolves的评论中建议使用的替代版本:
rgbToHex()
function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } alert(rgbToHex(0, 51, 255)); // #0033ff
更新
这是它的一个版本hexToRgb(),还解析了一个速记的三元组,例如“#03F”:
hexToRgb()
function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } alert(hexToRgb("#0033ff").g); // "51"; alert(hexToRgb("#03f").g); // "51";