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

CSSで透明度付きの色を指定するには、rgba() を使う方法と、8桁のカラーコード（#RRGGBBAA）を使う方法の2種類があります。
それぞれの特徴と使い分けを分かりやすく解説します。

rgba() で透明度を指定する

rgba() は、赤（R）・緑（G）・青（B）に透明度（A）を加えた指定方法です。

透明度は0.0から1.0の範囲で指定し、0に近いほど透明になり、1で不透明になります。
例えば、0.5は50%の透過度（半透明）を表します。

透明度を直感的に調整できるのがメリットです。
ただし、カラーコードしか分からない場合、RGBへの変換が必要になるため、やや手間に感じる場合があります。

カラーコード（#RRGGBBAA）で透明度を指定する

6桁のカラーコード（#RRGGBB）に、透明度（AA）を表す2桁の16進数を加えた8桁のカラーコード（#RRGGBBAA）で指定します。

末尾の80が透明度で、50%の透過を意味します。

透明度と対応する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() と #RRGGBBAA の表示の違いを比較できます。

See the Pen 透過率　rgba / カラーコード比較 by mkl may (@mkl-may) on CodePen.

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

記法	メリット	デメリット
rgba() 記法	透明度を直感的に指定できる	カラーコードをRGBに変換する手間がかかる
#RRGGBBAA 記法	カラーコードに透明度を足すだけで使える	透明度の16進数（下2桁）を覚える必要がある