rgb()

rgb() 関数記法は、赤、緑、青の成分によって色を表現します。オプションのアルファ成分は、色の透明度を表します。

メモ: 古い rgba() 構文は rgb() の別名であり、同じ引数を受け入れ、同じように動作します。

試してみましょう

構文

css

rgb(255 255 255)
rgb(255 255 255 / .5)

この関数は、すべての値をカンマで区切った古い構文も受け入れます。

値

関数記法: rgb(R G B[ / A])
R, G, B
- : それぞれ <number> で 0 から 255 の間、 <percentage> で 0% から 100% の間、またはキーワード none で、赤、緑、青のチャンネルを表します。
A 省略可
- : <alpha-value> またはキーワード none です。 1 は 100% （完全に不透明）に対応します。

メモ: この関数記法は sRGB 値にシリアライズされます。赤、緑、青の成分の値はシリアライズ時に丸められる可能性があります。

メモ: none の効果については色成分の欠落を参照してください。

形式文法

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>

例

古い構文: カンマで区切った値

歴史的な理由から、 rgb() 関数はすべての値をカンマで使用する区切り文字による形式を受け入れます。

HTML

html

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

css

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 0.5);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

結果

古い構文: rgba()

古い rgba() の構文は rgb() の別名です。

HTML

html

<div class="rgb"></div>
<div class="rgba"></div>

CSS

css

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 0.5);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}

結果

仕様書

Specification
CSS Color Module Level 5 # relative-RGB
CSS Color Module Level 4 # rgb-functions

ブラウザーの互換性

BCD tables only load in the browser