[CSS] カラーコードで透明度を指定する方法

CSSで背景色やボックスの色に「透明度」を加えたいときには、rgba()関数や8桁のカラーコード（#RRGGBBAA）を使う方法があります。
この記事では、それぞれの記法の違いや使いどころを、初心者にもわかりやすく解説します。

rgba()での指定

もっともよく使われるのが、rgba()関数による指定方法です。

rgba(R, G, B, A) の形式で色と透明度を指定します。

– R, G, B：それぞれ赤・緑・青の値（0～255）
– A（Alpha）：透明度（0=完全に透明、1=完全に不透明）

例えば、rgba(0, 0, 0, 0.8) は「黒に20%透過（80%の不透明）を加えた色」です。

 
直感的に数値で調整できるのがメリットですが、RGB値が不明な場合、白（rgb(255, 255, 255)）や黒（rgb(0, 0, 0)）のような分かりやすい色以外では、カラーコードをRGB値に変換する手間が発生するため、やや面倒に感じる場合があります。

カラーコードでの指定

通常の6桁カラーコード（#RRGGBB）に、透明度を表す2桁（AA）を追加した8桁のカラーコード（#RRGGBBAA）でも、同様に透明度を指定できます。
たとえば #000000CC は、「黒に20%の透過（=80%の不透明）」を加えた色になります。

主な透明度とカラーコード対応表

8桁カラーコードの下2桁（AA）が「透明度」を表します。
以下は、よく使われる透明度と対応する16進数の一覧です。

すべてを覚える必要はありませんが、よく使う値だけでも把握しておくと便利です。

 

透過率	下2桁
0%	FF
5%	F2
10%	E6
15%	D9
20%	CC
25%	BF
30%	B3
35%	A6
40%	99
45%	8C
50%	80
55%	73
60%	66
65%	59
70%	4D
75%	40
80%	33
85%	26
90%	1A
95%	0D
100%	00

rgba() と #RRGGBBAA の比較デモ

以下のデモでは、rgba()と8桁のカラーコード（#RRGGBBAA）を使った背景色の違いを、実際の表示で比較できます。

See the Pen
カラーコードで透明度を指定 by mkl may (@mkl-may)
on CodePen.

rgba() と #RRGGBBAA の使い分けまとめ

記法	メリット・デメリット
rgba() 記法	メリット：透明度を 0～1 の範囲で直感的に指定できる デメリット：カラーコードしか分からない場合、RGBへの変換が必要
#RRGGBBAA 記法	メリット：カラーコードに透明度を追加するだけで指定可能 デメリット：透明度に対応する16進数（下2桁）を覚える必要がある