RGBA ↔ HEX (8桁 #RRGGBBAA) 相互変換の計算方法と JS コード

1. オンライン RGBA ↔ HEX 相互変換ツール

カラーコードを入力すると、6桁HEX、8桁HEX、RGBA表記をリアルタイムで相互変換します。

---

2. Alpha（透明度）と 16進数（Hex）の速算表

Alpha 値（0.0 〜 1.0）を16進数2桁（00 〜 FF）に換算する計算式：

HexAlpha = Math.round(Alpha × 255).toString(16)

不透明度 (%)	Alpha (0.0〜1.0)	16進数 2桁 (HEX)	#3B82F6 に付加した例
100%	1.0	FF	#3B82F6FF (完全不透明)
90%	0.9	E6	#3B82F6E6
80%	0.8	CC	#3B82F6CC
50%	0.5	80	#3B82F680 (半透明)
20%	0.2	33	#3B82F633
0%	0.0	00	#3B82F600 (完全透明)

---

3. JavaScript での相互変換コード

① RGBA → 8桁 HEX 変換コード

function rgbaToHex(r, g, b, a = 1) {
  const toHex = n => Math.round(n).toString(16).padStart(2, '0');
  const alphaHex = toHex(a * 255);
  
  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alphaHex}`.toUpperCase();
}

console.log(rgbaToHex(59, 130, 246, 0.8)); // "#3B82F6CC"

② 8桁/6桁 HEX → RGBA 変換コード

function hexToRgba(hex) {
  let c = hex.replace('#', '');
  
  if (c.length === 3 || c.length === 4) {
    c = c.split('').map(char => char + char).join('');
  }

  const r = parseInt(c.substring(0, 2), 16);
  const g = parseInt(c.substring(2, 4), 16);
  const b = parseInt(c.substring(4, 6), 16);
  const a = c.length === 8 ? +(parseInt(c.substring(6, 8), 16) / 255).toFixed(2) : 1;

  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

console.log(hexToRgba("#3B82F6CC")); // "rgba(59, 130, 246, 0.8)"

---

4. 注意点（ハマりどころ）

1. 8 桁 HEX のアルファ位置（RGBA vs ARGB）
   • CSS の 8 桁 HEX は末尾がアルファ (#RRGGBBAA) ですが、Android / Flutter 等の一部のネイティブプラットフォームでは先頭がアルファ (#AARRGGBB) となる仕様が存在します。別言語へ移植する際は注意してください。