透明度の16進数早見表｜8桁カラーコードの末尾2桁と%
8桁のカラーコード「#RRGGBBAA」は、末尾2桁が不透明度です。00で完全に透明、FFで不透明、50%なら80と書きます。不透明度5%刻みの早見表と、50%がちょうど50%にならない理由、4桁の書き方やAndroidの順番の違いをまとめました。
公開読了目安 約5分
この記事の要点
- 8桁のカラーコードは末尾2桁が不透明度で、00が完全に透明、FFが不透明
- 2桁は「不透明度% × 255 ÷ 100」を四捨五入して16進数にした値。50%なら80
- 255が奇数なので、50%ちょうどの2桁は無い。80は約50.2%、7Fは約49.8%
- Androidの「#AARRGGBB」は不透明度が先頭。CSSに貼ると別の色になる
- Officeの「透明度」は透けている割合なので、不透明度とは向きが逆
目次
8桁のカラーコード「#RRGGBBAA」は、最後の2桁が不透明度を表します。 00なら完全に透明、FFなら透けない色で、50%の半透明なら80と書きます。
たとえば黒の半透明は「#00000080」です。 前の6桁はふつうのカラーコードと同じで、色そのものを決めています。
この記事では、不透明度を5%刻みで2桁に直した早見表を載せます。 50%がちょうど50%にならない理由と、書き方の違いでつまずく場面もまとめました。
末尾2桁は0〜255を16進数で書いたもの
カラーコードの2桁は、0から255までの数を16進数で書いたものです。 赤・緑・青と同じく、不透明度も256段階で表します（W3C の CSS Color Module Level 4）。
不透明度の%から2桁を出す式は、次のとおりです。
- 不透明度% × 255 ÷ 100 を計算する
- 小数点以下を四捨五入する
- その整数を16進数に直す
50%なら、50 × 255 ÷ 100 = 127.5 で、四捨五入して128です。 128を16進数にすると80になります。
16進数への直し方に慣れていなければ、進数変換ツールに10進数の128を入れると80が出ます。
不透明度と16進数の早見表
不透明度を5%刻みで、2桁に直しました。 右の列は、その2桁を%に戻した値（小数第1位）です。
| 不透明度 | 16進数 | 戻すと |
|---|---|---|
| 100% | FF | 100.0% |
| 95% | F2 | 94.9% |
| 90% | E6 | 90.2% |
| 85% | D9 | 85.1% |
| 80% | CC | 80.0% |
| 75% | BF | 74.9% |
| 70% | B3 | 70.2% |
| 65% | A6 | 65.1% |
| 60% | 99 | 60.0% |
| 55% | 8C | 54.9% |
| 50% | 80 | 50.2% |
| 45% | 73 | 45.1% |
| 40% | 66 | 40.0% |
| 35% | 59 | 34.9% |
| 30% | 4D | 30.2% |
| 25% | 40 | 25.1% |
| 20% | 33 | 20.0% |
| 15% | 26 | 14.9% |
| 10% | 1A | 10.2% |
| 5% | 0D | 5.1% |
| 0% | 00 | 0.0% |
表は四捨五入で求めています。 切り捨てで求める道具や記事では、21行のうち10行で1小さい値（50%なら7F）になります。
どちらで書いても、違いは256段階のうちの1段階です。 チームで決めた書き方があれば、そちらにそろえます。
50%が「80」でちょうど50%にならない理由
255は奇数なので、半分の127.5は整数になりません。 そのため、2桁でちょうど50%を表すことはできません。
- 7F: 127 ÷ 255 = 約49.8%
- 80: 128 ÷ 255 = 約50.2%
整数の%のうち、ぴったり同じ値に戻るのは、% × 255 ÷ 100 が整数になる0・20・40・60・80・100%だけです。 ほかの整数の%は、戻した値がもとの%から最大で約0.2ずれます。
指定の上でちょうど50%と書きたいときは、16進数ではなく rgba(0, 0, 0, 0.5) のように小数で書きます。
CSS の rgba() や rgb(0 0 0 / 50%) の不透明度は、0〜1の小数か%で書けます。
4桁の「#RGBA」は1桁ずつ2回くり返す
カラーコードには、各色を1桁で書く短い形もあります。 「#RGB」の後ろに不透明度の1桁を足したのが、4桁の「#RGBA」です。
4桁は、1桁ずつ2回くり返した8桁と同じ意味です（CSS Color Module Level 4）。 「#F008」なら「#FF000088」になり、赤の不透明度は約53.3%です。
1桁で書けるのは、00・11・22…FFの16段階だけです。 50%に近いのは8（約53.3%）か7（約46.7%）で、50%そのものは選べません。
Androidの「#AARRGGBB」は順番が逆
同じ8桁でも、不透明度を先頭に置く書き方があります。
Android の色を読む関数 Color.parseColor は、「#RRGGBB」と「#AARRGGBB」を受け付けます。
この並びは Android Developers の説明に書かれています。
Android で半透明の赤を表す「#80FF0000」を CSS に貼ると、別の色として読まれます。 CSS は先頭から赤・緑・青・不透明度の順に読むので、不透明度は末尾の00、つまり完全に透明です。
Officeの「透明度」は向きが逆
Office の図形の「塗りつぶし」の設定には、「透明度」の欄があります。 Microsoft の案内では、透明度は0%が完全に不透明（既定）、100%が完全に透明です。
つまり Office の透明度は、透けている割合です。 透明度30%の図形を Web で再現するなら、不透明度は70%で、2桁はB3になります。
カラーコードの末尾2桁は、透けていない割合を表します。 「透明度」と「不透明度」のどちらの欄の数かを見てから、早見表を引きます。
半透明の色が背景に重なったときの見た目
半透明の色は、下にある色と混ざって見えます。 見た目の色は、色ごとに「前の色 × 不透明度 ＋ 背景の色 ×（1 − 不透明度）」で計算します。
白い背景に「#00000080」の黒を重ねると、見た目は灰色の「#7F7F7F」です。 同じ黒でも、背景の色が変われば見た目の色も変わります。
文字に半透明の色を使うと、読みやすさは背景しだいで変わります。 コントラスト比チェッカーは8桁の色も読み、背景と混ざったあとの色で比率を判定します。
文字色に「#00000080」、背景色に「#FFFFFF」を入れると、判定に使った色として「#7F7F7F」が表示されます。 不透明度の2桁を変えるたびに、混ざったあとの色と比率がその場で変わります。
関連記事
参考・出典
- CSS Color Module Level 4 §5.2 The RGB Hexadecimal Notations — W3C （2026-10-11 閲覧）
- Color.parseColor（Android Developers） — Google （2026-10-11 閲覧）
- オブジェクトの書式設定（[塗りつぶし] ウィンドウ） — Microsoft （2026-10-11 閲覧）
本記事は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。
あわせて読みたい
同じテーマ・関連ツールの記事です。