RGB 到十六进制,十六进制到 RGB
2022-08-29 22:29:41
如何将RGB格式的颜色转换为十六进制格式,反之亦然?
例如,转换为 .'#0080C0'
(0, 128, 192)
如何将RGB格式的颜色转换为十六进制格式,反之亦然?
例如,转换为 .'#0080C0'
(0, 128, 192)
注意:和 的两个版本都期望整数值,因此如果您有非整数值,则需要自己进行舍入。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";
最后,正如 @casablanca 的答案中所讨论的,并在 @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
下面是一个版本,它还解析了一个速记十六进制三元组,例如“#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";
十六进制的替代方案:
function hexToRgb(hex) {
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return r + "," + g + "," + b;
}
编辑: 3/ 28 / 2017 这是另一种似乎更快的方法
function hexToRgbNew(hex) {
var arrBuff = new ArrayBuffer(4);
var vw = new DataView(arrBuff);
vw.setUint32(0,parseInt(hex, 16),false);
var arrByte = new Uint8Array(arrBuff);
return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}
编辑:8/11/2017 经过更多测试后,上述新方法并不:(更快。虽然这是一个有趣的替代方式。