このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

rgb()”関数

記事Feb.26th,2021
RGB値で色を表すCSSの関数、“rgb()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

rgb()”関数

rgb()”関数はRGB色空間の赤、緑、青の色成分で色を直接指定するための関数です。<color>”値として使用することができます。

RGB色空間のイメージ
RGB色空間のイメージ

最初の3個の引数は順番に赤、緑、青の色成分を表します。引数は<percentage>”値、もしくは<number>”値が使用できます。

<percentage>”値で引数を指定する場合
0%”が色成分の最低値を表し、“100%”が最大値を表します。
<number>”値で引数を指定する場合
0”が色成分の最低値を表します。最大値は“255”で表されます。

引数は半角スペース(“ ”)で区切って記述します。また、“CSS Color Module Level 3”までと同様にコンマ(“,”)で区切って記述する方法もあります。

白色
rgb(255 255 255)
rgb(255,255,255)
rgb(100% 100% 100%)
rgb(100%,100%,100%)
黒色
rgb(0 0 0)
rgb(0,0,0)
rgb(0% 0% 0%)
rgb(0%,0%,0%)

透明度の指定

rgb()”関数は任意で指定できる4個目の引数で色の透過度を示すアルファ値を指定することができます。アルファ値は<percentage>”値、もしくは<number>”値で指定できます。

<percentage>”値で引数を指定する場合
0%”は完全な透明、“100%”は不透明を表します。
<number>”値で引数を指定する場合
0”は完全な透明、不透明は“1”で表されます。

アルファ値を指定する引数を省略した場合は“100%”として扱われます。

不透明
rgb(0 0 0 100%)
rgb(0,0,0 100%)
rgb(0 0 0 1)
rgb(0,0,0 1)
rgb(0% 0% 0% 100%)
rgb(0%,0%,0% 100%)
rgb(0% 0% 0% 1)
rgb(0%,0%,0% 1)
半透明
rgb(0 0 0 50%)
rgb(0,0,0 50%)
rgb(0 0 0 0.5)
rgb(0,0,0 0.5)
rgb(0% 0% 0% 50%)
rgb(0%,0%,0% 50%)
rgb(0% 0% 0% 0.5)
rgb(0%,0%,0% 0.5)
透明
rgb(0 0 0 0%)
rgb(0,0,0 0%)
rgb(0 0 0 0)
rgb(0,0,0 0)
rgb(0% 0% 0% 0%)
rgb(0%,0%,0% 0%)
rgb(0% 0% 0% 0)
rgb(0%,0%,0% 0)

“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);}
<table>
<tr>
<td class="banana">バナナ</td>
<td class="apple">リンゴ</td>
<td class="peach">モモ</td>
</tr>
<tr>
<td class="kiwi">キウイ</td>
<td class="mangosteen">マンゴスチン</td>
<td class="melon">メロン</td>
</tr>
<tr>
<td class="orange">オレンジ</td>
<td class="grape">ブドウ</td>
<td class="durian">ドリアン</td>
</tr>
</table>
バナナ リンゴ モモ
キウイ マンゴスチン メロン
オレンジ ブドウ ドリアン

アルファ値を含む色

.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%);}
<table>
<tr>
<td class="purple-100p">100%</td>
<td class="purple-90p">90%</td>
<td class="purple-80p">80%</td>
</tr>
<tr>
<td class="purple-70p">70%</td>
<td class="purple-60p">60%</td>
<td class="purple-50p">50%</td>
</tr>
<tr>
<td class="purple-40p">40%</td>
<td class="purple-30p">30%</td>
<td class="purple-20p">20%</td>
</tr>
<tr>
<td class="purple-10p">10%</td>
<td class="purple-0p">0%</td>
</tr>
</table>
100% 90% 80%
70% 60% 50%
40% 30% 20%
10% 0%

仕様書

Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
rgb()
定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク