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

rgb()”関数

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

rgb()”関数

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

RGBカラー・モデルのイメージ
RGBカラー・モデルのイメージ
色の例
RGB値 RGB値
  rgb(255,0,0)   rgb(0,255,255)
  rgb(255,51,0)   rgb(0,204,255)
  rgb(255,102,0)   rgb(0,153,255)
  rgb(255,153,0)   rgb(0,102,255)
  rgb(255,204,0)   rgb(0,51,255)
  rgb(255,255,0)   rgb(0,0,255)
  rgb(204,255,0)   rgb(51,0,255)
  rgb(153,255,0)   rgb(102,0,255)
  rgb(102,255,0)   rgb(153,0,255)
  rgb(51,255,0)   rgb(204,0,255)
  rgb(0,255,0)   rgb(255,0,255)
  rgb(0,255,51)   rgb(255,0,204)
  rgb(0,255,102)   rgb(255,0,153)
  rgb(0,255,153)   rgb(255,0,102)
  rgb(0,255,204)   rgb(255,0,51)

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%

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
rgb()
定義あり

定義あり

定義あり

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