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

rgba()での指定

よく使う方法として、rgba()での指定があります

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

Alpha(透明度)の調整は直感的にできますが、白((255,255,255)や黒(0,0,0)等の覚えやすいものを除いて、
カラーコードをRGBに変換する作業が少し面倒です。

カラーコードでの指定

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

 

透過率一覧

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

カラーコードをRGBに変換するのも面倒ですが、
透過率の2桁のコードを覚えるのもそれはそれで面倒…
ひとまず使用頻度の高いものだけでも覚えておくといいかもしれません。

rgba()で指定した場合、カラーコード8桁で指定した場合のサンプル

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