RGB 形式の色を 16 進形式に、またはその逆に変換するにはどうすればよいでしょうか?
たとえば、'#0080C0'
に変換します(0, 128, 192)
。
ベストアンサー1
注: の両方のバージョンでは、、およびrgbToHex
に整数値が想定されるため、非整数値がある場合は独自に丸めを行う必要があります。r
g
b
以下は、RGB から 16 進数への変換を実行し、必要なゼロ パディングを追加します。
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()
、@casablanca の回答@cwolves のコメントで提案された内容:
function rgbToHex(r, g, b) {
return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
2012年12月3日更新
hexToRgb()
以下は、「#03F」のような短縮形の 16 進数トリプレットも解析するのバージョンです。
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";