CSS3

CSS関数

rgb()、rgba()

[Edge]○。→●、mdn

RGB色指定。

rgb() 関数は、［red、green、blue］チャンネルを直に指定して sRGB 色を定義する。その構文は次で与えられる。

旧来の理由から、rgba() 関数も存在する ― その文法とふるまいは rgb() と同じである。

<percentage>{3} ○

色の［red、green、blue］チャンネルを指定する。

0% は、sRGB 色域においてその色チャンネルの最小値を表現し、100% は最大値を表現する。

<SPAN style="color:rgb(100% 0% 0%);">■テスト</SPAN><BR>
<SPAN style="color:rgb(0% 100% 0%);">■テスト</SPAN><BR>
<SPAN style="color:rgb(0% 0% 100%);">■テスト</SPAN><BR>

<number>{3} ○

色の［red、green、blue］チャンネルを指定する。

0 は色チャンネルの最小値を表現するが、最大値は 255 が表現する。

<SPAN style="color:rgb(255 0 0);">■テスト</SPAN><BR>
<SPAN style="color:rgb(0 255 0);">■テスト</SPAN><BR>
<SPAN style="color:rgb(0 0 255);">■テスト</SPAN><BR>

<alpha-value>

＝<number> | <percentage>

色の alpha を指定する。省略時の既定は 100% になる。

<number> 値の有用な範囲は、0（全透明な色を表現する）～1（全不透明な色を表現する）である。

<percentage> 値の範囲は、0%（全透明な色を表現する）～100%（全不透明な色を表現する）である。

<SPAN style="color:rgb(255 0 0/80%); background-color:#ddd;">■テスト</SPAN><BR>
<SPAN style="color:rgb(255 0 0/50%); background-color:#ddd;">■テスト</SPAN><BR>
<SPAN style="color:rgb(255 0 0/20%); background-color:#ddd;">■テスト</SPAN><BR>

<SPAN style="color:rgb(255 0 0/0.8); background-color:#ddd;">■テスト</SPAN><BR>
<SPAN style="color:rgb(255 0 0/0.5); background-color:#ddd;">■テスト</SPAN><BR>
<SPAN style="color:rgb(255 0 0/0.2); background-color:#ddd;">■テスト</SPAN><BR>

これらの範囲外の値も無効ではないが、算出値の時点で ここで定義した範囲に切り詰められる。

旧来の理由から、rgb() は、すべての引数をカンマで分離する代替構文もサポートする：

<SPAN style="color:rgb(255, 0, 0, 50%);">■テスト</SPAN><BR>
<SPAN style="color:rgb(255, 0, 0, 0.5);">■テスト</SPAN><BR>

テスト