RGBAって?CSS3で任意の色を透明度と一緒に設定する方法

2020-03-30Color

RGBAとは

RGBAは、CSS3から追加されたプロパティで、「色と同時に透明度」を指定できます。

通常カラーコードは2種類のコードで指定できます。

  • 16進コード(#xxxxxx)
  • RGB(xxx(赤),xxx(緑),xxx(青))

RGBAでは、RGBのカラーコードに透明度を追加して記述します。

rgba(赤,緑,青,透明度)

 

RGBの色は0-255、または0%~100%で指定します。

透明度は、0(透明)~1(不透明)の数値で指定します。

 

透明度について

例:#ff0000
16進 RGB
#ff0000 rgb(255,0,0)

 

透明度100%(完全に不透明)であれば、RGBAにする必要はなく、RGBと同じ色になりますが、

100% = 1 (rgba(255,0,0,1))とし、

90% なら 0.9(rgba(255,0,0,0.9))、
30%なら 0.3 (rgba(255,0,0,0.3))と指定します。

 

RGBA値

100% rgba(255,0,0,1)
90% rgba(255,0,0,0.9)
80% rgba(255,0,0,0.8)
70% rgba(255,0,0,0.7)
60% rgba(255,0,0,0.6)
50% rgba(255,0,0,0.5)
40% rgba(255,0,0,0.4)
30% rgba(255,0,0,0.3)
20% rgba(255,0,0,0.2)
10% rgba(255,0,0,0.1)
0% rgba(255,0,0,0)

 

見た目には透明度によって薄い色になっていきますが、画像などに重ねた場合は半透明にする事が確認出来ます。

 

下図は、上記サンプルの20%を指定したものですが、

background:rgba(255,0,0,0.2);

RGBAサンプル

色の濃い画像の上では半透明になり、画像が透けていますが、白い画像の上に載せた場合は、ピンク色に見えます。

 

カラーコード変換


 

関連記事

Color

Posted by 綾糸