RGBAとは
RGBAは、CSS3から追加されたプロパティで、「色と同時に透明度」を指定できます。
通常カラーコードは２種類のコードで指定できます。
- １６進コード（#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);
色の濃い画像の上では半透明になり、画像が透けていますが、白い画像の上に載せた場合は、ピンク色に見えます。
カラーコード一覧（色別・ブランドカラー・鉄道・野球・オリンピックなど）
当サイトでご紹介しているカラーコードのまとめです。 ブランドカラーコード SNS・企業など SNS等 企業 ネットショップ 鉄道 JR 新幹線 関東の私鉄・モノレール 地方の私鉄 全国の地下鉄 スポーツ プロ野球（NPB) メジャーリーグ（...
ayaito.net
コメント