rgb()
Baseline 廣泛可用 *
備註：rgba() 函式式表示法是 rgb() 的別名，兩者完全相同。建議使用 rgb()。
rgb() 函式式表示法根據紅、綠、藍三個分量，在 sRGB 色彩空間中表示一種顏色。一個可選的 alpha 分量表示顏色的透明度。
試一試
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%;
}
語法
/* Absolute values */
rgb(255 255 255)
rgb(255 255 255 / 50%)
/* Relative values */
rgb(from green r g b / 0.5)
rgb(from #123456 calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))
/* Legacy 'rgba()' alias */
rgba(0 255 255)
/* Legacy format */
rgb(0, 255, 255)
rgb(0, 255, 255, 50%)
備註：出於相容性原因，如果 alpha 通道的值正好為 1，Web API 序列化的顏色值會表示為 rgb() 顏色，否則表示為 rgba() 顏色。在這兩種情況下，都使用舊式語法，即以逗號作為分隔符（例如 rgb(255, 0, 0)）。
值
下面描述了絕對顏色和相對顏色的允許值。
絕對值語法
rgb(R G B[ / A])
引數如下：
R、G、B-
每個值都可以表示為
0到255之間的<number>，0%到100%之間的<percentage>，或者關鍵字none（在這種情況下等同於0%）。這些值分別代表紅色、綠色和藍色通道。 A可選-
一個
<alpha-value>，表示顏色的 alpha 通道值，其中數字0對應0%（完全透明），1對應100%（完全不透明）。此外，關鍵字none可用於明確指定無 alpha 通道。如果未明確指定A通道值，則預設為 100%。如果包含該值，則其前面需要有一個斜槓（/）。
備註：有關 none 的效果，請參閱缺失的顏色分量。
相對值語法
rgb(from <color> R G B[ / A])
引數如下：
from <color>-
在定義相對顏色時，總是包含關鍵字
from，其後跟著一個<color>值，表示源顏色：這是相對顏色所基於的原始顏色。源顏色可以是任何有效的<color>語法，包括另一個相對顏色。 R、G、B-
每個值都可以表示為
0到255之間的<number>，0%到100%之間的<percentage>，或者關鍵字none（在這種情況下等同於0%）。這些值分別代表輸出顏色的紅色、綠色和藍色通道的值。 A可選-
一個
<alpha-value>，表示輸出顏色的 alpha 通道值，其中數字0對應0%（完全透明），1對應100%（完全不透明）。此外，關鍵字none可用於明確指定無 alpha 通道。如果未明確指定A通道值，則預設為源顏色的 alpha 通道值。如果包含該值，則其前面需要有一個斜槓（/）。
備註：為了完全支援表示可見顏色的整個光譜，相對 rgb() 顏色函式的輸出被序列化為 color(srgb)。這意味著透過 HTMLElement.style 屬性或 CSSStyleDeclaration.getPropertyValue() 方法查詢輸出顏色值時，會返回一個 color(srgb ...) 格式的輸出顏色值。
定義相對顏色輸出通道分量
在 rgb() 函式內部使用相對顏色語法時，瀏覽器會將源顏色轉換為等效的 RGB 顏色（如果尚未指定為 RGB 顏色）。該顏色被定義為三個不同的顏色通道值——r（紅）、g（綠）和 b（藍）——外加一個 alpha 通道值（alpha）。這些通道值在函式內部可用，用於定義輸出顏色的通道值。
r、g和b的值都將被解析為0到255（含）之間的<number>。alpha通道值解析為一個介於0和1（含）之間的<number>。
在定義相對顏色時，輸出顏色的不同通道可以用幾種不同的方式表示。下面，我們將透過一些示例來說明這些方式。
在下面的前兩個示例中，我們使用了相對顏色語法。然而，第一個示例輸出的顏色與源顏色相同，而第二個示例輸出的顏色則完全不基於源顏色。它們並沒有真正建立相對顏色！你不太可能在實際的程式碼庫中使用這些，而可能會直接使用絕對顏色值。我們包含這些示例，是為了作為學習相對 rgb() 語法的起點。
讓我們從一個源顏色 hsl(0 100% 50%)（等同於 rgb(255 0 0)）開始。下面的函式輸出與源顏色相同的顏色——它使用源顏色的 r、g 和 b 通道值（255、0 和 0）作為輸出通道值。
rgb(from hsl(0 100% 50%) r g b)
該函式的輸出顏色是 sRGB 中 rgb(255 0 0) 的 color() 等效表示：color(srgb 1 0 0)。
下一個函式對輸出顏色的通道值使用絕對值，輸出了一個完全不同於源顏色的新顏色：
rgb(from hsl(0 100% 50%) 132 132 224)
在上述情況下，輸出顏色是 sRGB 中 rgb(132 132 224) 的 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)。
備註：如上所述，如果輸出顏色使用的顏色模型與源顏色不同，源顏色會在後臺被轉換為與輸出顏色相同的模型或空間，以便能以相容的方式（即使用相同的通道）表示。
在本節我們目前看到的示例中，源顏色和輸出顏色的 alpha 通道都沒有被明確指定。當未指定輸出顏色的 alpha 通道時，它預設為與源顏色 alpha 通道相同的值。當未指定源顏色的 alpha 通道時（且它不是相對顏色），它預設為 1。因此，上述示例中的源和輸出 alpha 通道值均為 1。
讓我們看一些指定源和輸出 alpha 通道值的示例。第一個示例將輸出 alpha 通道值指定為與源 alpha 通道值相同，而第二個示例則指定一個與源 alpha 通道值無關的不同輸出 alpha 通道值。
rgb(from hsl(0 100% 50% / 0.8) r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */
rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
/* Computed output color: 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))
備註：因為源顏色通道值被解析為 <number> 值，所以在使用它們進行計算時，你必須給它們加上數字，即使在通道通常接受 <percentage>、<angle> 或其他值型別的情況下也是如此。例如，將 <percentage> 新增到 <number> 是行不通的。
正式語法
<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>
示例
基本語法
在此示例中，我們有三個 <div> 元素，它們在條紋背景上顯示不同的背景顏色。
HTML
<div>
<div id="integer"></div>
<div id="percent"></div>
<div id="alpha"></div>
</div>
CSS
背景顏色使用 rgb() 顏色函式設定。這三種顏色是相同的。第三種是半透明的，因此我們在 <body> 上添加了一個 repeating-linear-gradient()，以更好地展示 alpha 通道的透明度。
body {
background: repeating-linear-gradient(-45deg, #eeeeee 0 2px, white 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() 中使用相對顏色
此示例為三個 <div> 元素設定了不同的背景顏色。左邊的元素被賦予了未經修改的 --base-color，而中間和右邊的元素則被賦予了 --base-color 的變體，這些變體依次從紅色通道中減去更多值，並向藍色通道中新增更多值。
這些變體是使用相對顏色定義的——將 --base-color 自定義屬性傳入 rgb() 函式，並透過 calc() 函式修改輸出顏色的紅色和藍色通道以達到預期效果，而綠色通道保持不變。
CSS
:root {
--base-color: orange;
/* equal to 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 is 30% of 255 */
}
#three {
background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
/* 153 is 60% of 255 */
}
/* Use @supports to add in support for old syntax that requires r g b values to
be specified as percentages (with units) in calculations. This is required
for 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 / 50%);
}
div.comma-separated {
background-color: rgb(255, 0, 0, 0.5);
}
結果
規範
| 規範 |
|---|
| CSS 顏色模組第五版 # 相對 RGB |
| CSS 顏色模組第四版 # rgb-functions |
瀏覽器相容性
載入中…