【JavaScript】HEX (カラーコード) とRGBを相互変換する
- カラーコード変換ツールのように、JavaScriptで HEX (16進数) とRGBを相互変換したい
#fff
←→rgb(255,255,255)
- HEXは3桁 (
#fff
)・6桁 (#ffffff
) の両方に対応したい
HEXからRGBへの変換
function hexToRgb(hex) { const hexValue = hex.replace('#', ''); const isOmit = hexValue.length === 3; // #fffなどの省略記法か
const [r, g, b] = hexValue .match(isOmit ? /./g : /.{2}/g) .map((s) => parseInt(isOmit ? s.repeat(2) : s, 16));
return { r, g, b };}
hexToRgb('#ffffff'); // {r: 255, g: 255, b: 255}hexToRgb('#fff'); // {r: 255, g: 255, b: 255}
RGBからHEXへの変換
function to16(num) { const hex = num.toString(16); return hex.length === 1 ? `0${hex}` : hex;}
function rgbToHex({ r, g, b }) { return `#${to16(r)}${to16(g)}${to16(b)}`;}
rgbToHex({r: 255, g: 255, b: 255}); // '#ffffff'