RGB 値から16進数カラーコードへの変換

RGB から16進数への変換は Web 開発に欠かせません。多くのツールや API はカラーを RGB の10進数トリプレットとして出力しますが、CSS スタイルシートやデザイントークンでは16進数表記がよく使われます。

ステップごとの例 --- rgb(65, 105, 225) を16進数に変換:

1. 各10進数チャンネル値を2桁の16進数文字列に変換:
   • Red: 65 / 16 = 4 余り 1 -> 41
   • Green: 105 / 16 = 6 余り 9 -> 69
   • Blue: 225 / 16 = 14 余り 1 -> E1
2. # プレフィックスを付けて連結: #4169E1

これは Royal Blue です。

重要な注意点 --- ゼロパディング:

チャンネル値が1桁の16進数（値 0-15）に変換される場合、先頭にゼロを追加する必要があります。例えば、rgb(0, 10, 255) は #000AFF であって #0AFF ではありません。このパディングを忘れることはバグの一般的な原因です。

JavaScript での実装:

function rgbToHex(r, g, b) {
  return "#" + [r, g, b]
    .map(v => v.toString(16).padStart(2, "0"))
    .join("")
    .toUpperCase();
}

よくある RGB から16進数への変換:

色	RGB	Hex
White	rgb(255,255,255)	#FFFFFF
Black	rgb(0,0,0)	#000000
Red	rgb(255,0,0)	#FF0000
Green	rgb(0,128,0)	#008000
Blue	rgb(0,0,255)	#0000FF

各フォーマットの使い分け:

16進数はよりコンパクトで（7文字 vs. rgb 表記の最大16文字）、デザインツール、スタイルガイド、設定ファイルで広く使われています。RGB は個々のチャンネルをプログラムで操作する場合や、rgba() でアルファ透明度を扱う場合に適しています。両方のフォーマットを理解し相互変換できることは、フロントエンド開発のコアスキルです。