RGB到十六进制，十六进制到RGB

Question

RGB到十六进制，十六进制到RGB

如何将RGB格式的颜色转换为十六进制格式，反之亦然？

例如，转换'#0080C0'到(0, 128, 192).

Answer 1

以下操作将对RGB进行十六进制转换，并添加任何所需的零填充：function componentToHex(c) {&nbsp; var hex = c.toString(16);&nbsp; return hex.length == 1 ? "0" + hex : hex;}function rgbToHex(r, g, b) {&nbsp; return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);}alert(rgbToHex(0, 51, 255)); // #0033ff转换为另一种方式：function hexToRgb(hex) {&nbsp; var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);&nbsp; return result ? {&nbsp; &nbsp; r: parseInt(result[1], 16),&nbsp; &nbsp; g: parseInt(result[2], 16),&nbsp; &nbsp; b: parseInt(result[3], 16)&nbsp; } : null;}alert(hexToRgb("#0033ff").g); // "51";最后，另一个版本是rgbToHex()中讨论的@卡萨布兰卡的答复并在“狼”的评论中指出：function rgbToHex(r, g, b) {&nbsp; return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);}alert(rgbToHex(0, 51, 255)); // #0033ff这里有一个版本hexToRgb()它还解析了“#03F”这样的速记十六进制三重奏：function hexToRgb(hex) {&nbsp; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")&nbsp; var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;&nbsp; hex = hex.replace(shorthandRegex, function(m, r, g, b) {&nbsp; &nbsp; return r + r + g + g + b + b;&nbsp; });&nbsp; var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);&nbsp; return result ? {&nbsp; &nbsp; r: parseInt(result[1], 16),&nbsp; &nbsp; g: parseInt(result[2], 16),&nbsp; &nbsp; b: parseInt(result[3], 16)&nbsp; } : null;}alert(hexToRgb("#0033ff").g); // "51";alert(hexToRgb("#03f").g); // "51";

Answer 2

另一个版本的十六进制Rgb：function&nbsp;hexToRgb(hex)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bigint&nbsp;=&nbsp;parseInt(hex,&nbsp;16); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;r&nbsp;=&nbsp;(bigint&nbsp;>>&nbsp;16)&nbsp;&&nbsp;255; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;g&nbsp;=&nbsp;(bigint&nbsp;>>&nbsp;8)&nbsp;&&nbsp;255; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;b&nbsp;=&nbsp;bigint&nbsp;&&nbsp;255; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;r&nbsp;+&nbsp;","&nbsp;+&nbsp;g&nbsp;+&nbsp;","&nbsp;+&nbsp;b;}这里是另一种方法那似乎更快function&nbsp;hexToRgbNew(hex)&nbsp;{ &nbsp;&nbsp;var&nbsp;arrBuff&nbsp;=&nbsp;new&nbsp;ArrayBuffer(4); &nbsp;&nbsp;var&nbsp;vw&nbsp;=&nbsp;new&nbsp;DataView(arrBuff); &nbsp;&nbsp;vw.setUint32(0,parseInt(hex,&nbsp;16),false); &nbsp;&nbsp;var&nbsp;arrByte&nbsp;=&nbsp;new&nbsp;Uint8Array(arrBuff); &nbsp;&nbsp;return&nbsp;arrByte[1]&nbsp;+&nbsp;","&nbsp;+&nbsp;arrByte[2]&nbsp;+&nbsp;","&nbsp;+&nbsp;arrByte[3];}以上新方法经过更多的测试后不会更快：(虽然这是另一种有趣的方式。

Answer 3

这是我的版本：&nbsp;&nbsp;function&nbsp;rgb2hex(red,&nbsp;green,&nbsp;blue)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rgb&nbsp;=&nbsp;blue&nbsp;|&nbsp;(green&nbsp;<<&nbsp;8)&nbsp;|&nbsp;(red&nbsp;<<&nbsp;16); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'#'&nbsp;+&nbsp;(0x1000000&nbsp;+&nbsp;rgb).toString(16).slice(1) &nbsp;&nbsp;} &nbsp;&nbsp;function&nbsp;hex2rgb(hex)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;long&nbsp;version &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r&nbsp;=&nbsp;hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(r)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;r.slice(1,4).map(function(x)&nbsp;{&nbsp;return&nbsp;parseInt(x,&nbsp;16);&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;short&nbsp;version &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r&nbsp;=&nbsp;hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(r)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;r.slice(1,4).map(function(x)&nbsp;{&nbsp;return&nbsp;0x11&nbsp;*&nbsp;parseInt(x,&nbsp;16);&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;null; &nbsp;&nbsp;}