rgb()

試してみましょう

background: rgb(31 120 50);

background: rgb(30% 20% 50%);

background: rgb(255 122 127 / 80%);

background: rgb(255 122 127 / 0.2);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

構文

/* 絶対値 */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* 相対値 */
rgb(from green r g b / 0.5)
rgb(from #0000FF calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

sRGB 色を表現するために、rgba() 関数も使用できます。これは rgb() と同じパラメーターを受け入れるエイリアスです。

値

以下は、絶対値および 相対色 の両方に対して許可される値の説明です。

絶対値構文

rgb(R G B[ / A])

パラメーターは以下の通りです：

R, G, B

各値は <number> で 0 から 255 の間、<percentage> で 0% から 100% の間、またはキーワード none（この場合は 0% と同等）として表されます。これらの値はそれぞれ赤、緑、青のチャネルを表します。

A 省略可

アルファチャネル値を表す <alpha-value> で、数値 0 は 0%（完全に透明）、1 は 100%（完全に不透明）に対応します。さらにキーワード none を使用して明示的にアルファチャネルを指定しないことも可能です。A チャネル値が明示的に指定されていない場合、デフォルトは 100% です。A チャネル値を含める場合は、値の前にスラッシュ（/）が付きます。

相対値構文

rgb(from <color> R G B[ / A])

パラメーターは以下の通りです：

from <color>

相対色を定義する場合は、キーワード from が常に含まれ、次に起点色を表す <color> が続きます。これは相対色のベースとなる起点の色です。起点色には、別の相対色を含む 任意 の有効な <color> 構文を使用できます。

R, G, B

各値は <number> で 0 から 255 の間、<percentage> で 0% から 100% の間、またはキーワード none（この場合は 0% と同等）として表されます。これらの値はそれぞれ赤、緑、青のチャネルを表します。

A 省略可

アルファチャネル値を表す <alpha-value> で、数値 0 は 0%（完全に透明）、1 は 100%（完全に不透明）に対応します。さらにキーワード none を使用して明示的にアルファチャネルを指定しないことも可能です。A チャネル値が明示的に指定されていない場合、デフォルトは 100% です。A チャネル値を含める場合は、値の前にスラッシュ（/）が付きます。

相対色出力チャネル成分の定義

rgb() 関数内で相対色構文を使用する場合、ブラウザーは起点色を等価のRGB色に変換します（すでにそのように指定されていない場合）。色は3つの異なる色チャネル値 - r（赤）、g（緑）、b（青）- およびアルファチャネル値（alpha）として定義されます。これらのチャネル値は、出力色チャネル値を定義する際に関数内で使用できます：

• r, g および b の値はそれぞれ 0 から 255 の <number> に解決されます。
• alpha チャネルは 0 から 1 の <number> に解決されます。

相対色を定義する際、出力色のさまざまなチャネルをいくつかの異なる方法で表現できます。以下では、これらを説明するためにいくつかの例を見ていきます。

以下の最初の 2 つの例では相対色構文を使用していますが、最初のものは起点色と同じ色を出力し、2 番目のものは起点色にまったく基づいていない色を出力します。これらは実際には相対色を作成していません！実際のコードベースでこれらを使用することはほとんどなく、代わりに絶対色値を使用することになるでしょう。これらの例は相対 rgb() 構文について学ぶための出発点として含まれています。

まず、hsl(0 100% 50%)（rgb(255 0 0) と同等）の起点色から始めましょう。次の関数は起点色と同じ色を出力します。この関数は、起点色の r、g、b チャネル値（255、0、0）を出力チャネル値として使用します：

rgb(from hsl(0 100% 50%) r g b)

この関数の出力は、rgb(255 0 0) の sRGB color() に相当します：color(srgb 1 0 0)。

次の関数は、出力色のチャネル値に絶対値を使用し、起点色に基づかないまったく異なる色を出力します：

rgb(from hsl(0 100% 50%) 132 132 224)

上記の場合、出力色は rgb(132 132 224) の sRGB color() に相当します：color(srgb 0.517647 0.517647 0.878431)。

次の関数は、起点色に基づいて相対色を作成します：

rgb(from hsl(0 100% 50%) r 80 80)

この例では、次のことが行われます：

• 起点色（hsl(0 100% 50%)）を同等の rgb() に変換します（rgb(255 0 0)）。
• 出力色の R チャネル値を起点色の rgb() 相当の R チャネル値（255）に設定します。
• 出力色の G および B チャネル値を、起点色に基づかない新しい値に設定します：それぞれ 80 および 80。

最終的な出力色は、sRGB 色空間の rgb(255 80 80) に相当します：color(srgb 1 0.313726 0.313726)。

これまでに見てきた例は、起点および出力において、アルファチャネルが明示的に指定されていません。出力色のアルファチャネルが指定されていない場合、起点色のアルファチャネルと同じ値になります。起点色のアルファチャネルが指定されていない場合（かつそれが相対色でない場合）、デフォルト値は 1 です。したがって、上記の例の起点色および出力色のアルファチャネル値は 1 です。

起点および出力のアルファチャネル値を指定する例を見てみましょう。最初の例では、出力アルファチャネル値を起点アルファチャネル値と同じ値に設定し、2 番目の例では、起点アルファチャネル値とは関係ない異なる出力アルファチャネル値を設定します。

rgb(from hsl(0 100% 50% / 0.8) r g b / alpha)
/* 計算された出力色: color(srgb 1 0 0 / 0.8) */

rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
/* 計算された出力色: color(srgb 1 0 0 / 0.5) */

次の例では、hsl() 起点色は再び rgb() 表現 - rgb(255 0 0)に変換されます。R、G、B、および A 値に calc() 計算が適用されます。計算後の R、G、B および A の値はそれぞれ 127.5、25、175、および 0.9 になります。最終的な出力色は、sRGB 色空間の rgb(127.5 25 175 / 0.9) に相当します：color(srgb 0.5 0.0980392 0.686275 / 0.9)。

rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))

形式文法

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

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

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

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

例

基本構文

この例では、ストライプ模様の背景の上に、異なる背景色を持つ 3 つの <div> 要素を表示しています。

HTML

<div>
  <div id="integer"></div>
  <div id="percent"></div>
  <div id="alpha"></div>
</div>

CSS

背景色は rgb() 関数を使用して設定されています。3 つの色は同じです。3 番目は半透明であり、アルファチャンネルの透明性をよりよく示すため、<body> 上に repeating-linear-gradient() を含めています。

div {
  display: flex;
  gap: 20px;
  height: 50px;
  flex: 1;
}
body {
  height: calc(100vh - 20px);
}

body {
  background: repeating-linear-gradient(-45deg, #eee 0 2px, #fff 2px 6px);
  padding: 10px;
}

#integer {
  background-color: rgb(189 85 218);
}

#percent {
  background-color: rgb(74% 33% 85%);
}

#alpha {
  background-color: rgb(189 85 218 / 0.25);
}

結果

rgb() を使用した相対色

この例では、3 つの <div> 要素を異なる背景色でスタイルします。左側のものには変更されていない --base-color が与えられ、中央と右のものにはそれぞれ赤チャネルをさらに減らし、青チャネルをさらに増やした、もとの --base-color のバリアントが与えられます。

これらのバリアントは相対色を使用して定義されます - --base-color カスタムプロパティは rgb() 関数に渡され、赤と青の出力色のチャネルは calc() 関数によって目的の効果を達成するために変更され、緑のチャネルは変更されません。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
  /* rgb(255 165 0) に等しい */
}

#one {
  background-color: var(--base-color);
}

#two {
  background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
  /* 76.5 は 255 の 30% */
}

#three {
  background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
  /* 153 は 255 の 60% */
}

/* 計算で r g b 値をパーセンテージ (単位付き) として指定する必要がある古い構文をサポートするために @supports を使用します。これは Safari 16.4 以降で必要です */
@supports (color: rgb(from red r g calc(b + 30%))) {
  #two {
    background-color: rgb(from var(--base-color) calc(r - 30%) g calc(b + 30%));
  }

  #three {
    background-color: rgb(from var(--base-color) calc(r - 60%) g calc(b + 60%));
  }
}

結果

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

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

HTML

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

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

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

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);
}

結果

仕様書

ブラウザーの互換性

関連情報

• <color> データ型: すべての色記法の一覧
• 色選択ツール
• 相対色の使用
• CSS 色