16進カラーコードと2進ビットの読み替え

#RRGGBB の中身

Webの色は #RRGGBB の形式で、頭2桁が赤の強さ、次2桁が緑、最後2桁が青の強さを表します。各色は16進数2桁＝00〜FF（10進で0〜255）の256段階です。

たとえば #FF6600 は「赤=FF（=255、最大）/ 緑=66（=102）/ 青=00（=0）」というオレンジ色になります。

なぜ16進なのか

色の強さは内部的には2進数8桁（8ビット＝1バイト）で表されています。Wikipedia「十六進法」によれば、16は2の4乗なので、2進4桁＝16進1桁。つまり2進8桁＝16進2桁にきれいに対応します。

赤=255 = 1111 1111 (2進) = FF (16進)
緑=102 = 0110 0110 (2進) = 66 (16進)
青= 0  = 0000 0000 (2進) = 00 (16進)

10進だと「255, 102, 0」と桁が揃わずバラバラですが、16進だと常に2桁。CSSが16進数を採用しているのはこの「桁が揃って短い」のが理由です。

2進⇔16進が一瞬な理由

2進数を16進数に直すときは、右から4桁ずつ区切って、それぞれを16進1桁に置き換えるだけです。割り算は不要。

2進: 1010 1101
       ↓    ↓
16進:  A    D
→ AD

逆方向（16進→2進）も同様に、各桁を2進4桁に展開するだけ。これが情報処理試験で「2進・16進は事実上ペア」と扱われる理由です。

短縮形 #RGB と #RRGGBB

CSSでは #FFF や #F60 のような3桁形式も使えます。これは #FFFFFF や #FF6600 の省略形で、1桁を2回繰り返した形と等価です。

• ・#000 = #000000（黒）
• ・#FFF = #FFFFFF（白）
• ・#F60 = #FF6600（オレンジ）
• ・#0F8 = #00FF88（緑系）

短縮形では表現できる色が4096色に減りますが、コードが短く読みやすくなります。

透明度（#RRGGBBAA）

モダンブラウザではアルファチャンネル（透明度）も追加した8桁形式が使えます。末尾2桁が透明度（00=完全透明、FF=不透明）です。

• ・#FF000080 = 赤・半透明（80 = 128 ≒ 50%）
• ・#000000CC = 黒・濃いめ半透明

実際に色を確認するには

16進コードから実際の色を見るにはカラーコード変換が便利です。10進RGB（255, 102, 0）と16進（#FF6600）の相互変換と、色のプレビューを同時に表示します。

16進→2進の計算を確認するなら本体の2進数・16進数変換で「4桁ずつ対応」表示を見ると関係が一目で分かります。