Feb.26th,2021
＃
＃
“rgb()”関数の構文
赤、緑、青の色成分を表す3個の引数をホワイトスペースで区切って記述します。また、“CSS Color Module Level 3”までと同様にコンマ(“,”)で区切って記述する方法もあります。
空白区切りの記法
rgb(〚赤〛 〚緑〛 〚青〛)
コンマ区切りの記法
rgb(〚赤〛,〚緑〛,〚青〛)
最初の3個の引数は順番に赤、緑、青の色成分を表します。引数は“<percentage>”値、もしくは“<number>”値が使用できます。
- “<percentage>”値で引数を指定する場合
- “0%”が色成分の最低値を表し、“100%”が最大値を表します。
- “<number>”値で引数を指定する場合
- “0”が色成分の最低値を表します。最大値は“255”で表されます。
＃
透明度の指定
“rgb()”関数は任意で指定できる4個目の引数で色の透明度を示すアルファ値を指定することができます。
アルファ値は“<alpha-value>”値で表します。ホワイトスペース区切りの記法ではスラッシュ(“/”)に続いて、コンマ区切りの記法ではコンマに続いて最後に記述します。
空白区切りの記法
rgb(〚赤〛 〚緑〛 〚青〛/〚アルファ値〛)
コンマ区切りの記法
rgb(〚赤〛,〚緑〛,〚青〛,〚アルファ値〛)
アルファ値を指定する引数を省略した場合は“100%”として扱われます。
“CSS Color Module Level 3”まではアルファ値を含む色は“rgba()”関数として区別されていましたが、“CSS Color Module Level 4”では“rgba()”関数を“rgb()”関数の別名として定義しており、それぞれ同じ働きをします。
＃
使用例
色を指定する
空白区切り
.banana { background-color: rgb(255 215 0);}
.apple { background-color: rgb(220 20 60);}
.peach { background-color: rgb(255 218 185);}
.kiwi { background-color: rgb(128 128 0);}
.mangosteen { background-color: rgb(219 112 147);}
.melon { background-color: rgb(152 251 152);}
.orange { background-color: rgb(255 165 0);}
.grape { background-color: rgb(72 61 139);}
.durian { background-color: rgb(238 232 170);}
| バナナ | リンゴ | モモ |
| キウイ | マンゴスチン | メロン |
| オレンジ | ブドウ | ドリアン |
コンマ区切り
.banana { background-color: rgb(255,215,0);}
.apple { background-color: rgb(220,20,60);}
.peach { background-color: rgb(255,218,185);}
.kiwi { background-color: rgb(128,128,0);}
.mangosteen { background-color: rgb(219,112,147);}
.melon { background-color: rgb(152,251,152);}
.orange { background-color: rgb(255,165,0);}
.grape { background-color: rgb(72,61,139);}
.durian { background-color: rgb(238,232,170);}
| バナナ | リンゴ | モモ |
| キウイ | マンゴスチン | メロン |
| オレンジ | ブドウ | ドリアン |
アルファ値を含む色
空白区切り
.purple-100p { background-color: rgb(198 111 170/100%);}
.purple-90p { background-color: rgb(198 111 170/90%);}
.purple-80p { background-color: rgb(198 111 170/80%);}
.purple-70p { background-color: rgb(198 111 170/70%);}
.purple-60p { background-color: rgb(198 111 170/60%);}
.purple-50p { background-color: rgb(198 111 170/50%);}
.purple-40p { background-color: rgb(198 111 170/40%);}
.purple-30p { background-color: rgb(198 111 170/30%);}
.purple-20p { background-color: rgb(198 111 170/20%);}
.purple-10p { background-color: rgb(198 111 170/10%);}
.purple-0p { background-color: rgb(198 111 170/0%);}
| 100% | 90% | 80% | 70% | 60% | 50% |
| 40% | 30% | 20% |
| 10% | 0% |
コンマ区切り
.purple-100p { background-color: rgb(198,111,170,100%);}
.purple-90p { background-color: rgb(198,111,170,90%);}
.purple-80p { background-color: rgb(198,111,170,80%);}
.purple-70p { background-color: rgb(198,111,170,70%);}
.purple-60p { background-color: rgb(198,111,170,60%);}
.purple-50p { background-color: rgb(198,111,170,50%);}
.purple-40p { background-color: rgb(198,111,170,40%);}
.purple-30p { background-color: rgb(198,111,170,30%);}
.purple-20p { background-color: rgb(198,111,170,20%);}
.purple-10p { background-color: rgb(198,111,170,10%);}
.purple-0p { background-color: rgb(198,111,170,0%);}
| 100% | 90% | 80% | 70% | 60% | 50% |
| 40% | 30% | 20% |
| 10% | 0% |
＃
