【JavaScript】HEX (カラーコード) とRGBを相互変換する

1. JavaScript
2024/08/16

カラーコード変換ツールのように、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'