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

カラーコードで透明度を指定する方法について解説します。

rgba()での指定

よく使われる方法として、rgba()関数を使用して透明度を指定する方法があります。

rgba(Red(赤), Green(緑), Blue(青), Alpha(透明度))の形式で指定します。

Alpha（透明度）は0から1の範囲で指定し、直感的に調整が可能です。
しかし、白（rgb(255, 255, 255)）や黒（rgb(0, 0, 0)）のような分かりやすい色以外では、カラーコードをRGB値に変換する手間が発生するため、やや面倒に感じる場合があります。

カラーコードでの指定

6桁（16進数）のカラーコード #RRGGBB に、2桁の透過率を足して8桁にすることで、透明度を指定することができます。

 

透過率一覧
RGBA形式の透明度をカラーコード形式で表現する場合、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()と8桁カラーコードを用いた背景色の指定方法を比較しています。

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.