CSS 顏色值

要在 CSS 中表示一種顏色，你必須找到一種方法，將“顏色”這個模擬概念轉換為計算機可以使用的數字形式。這通常是透過將顏色分解為其組成部分來完成的，例如混合不同原色的量，或者亮度和色相。已定義的顏色模型可確保無論顏色在何處渲染，其顯示效果都相同。

顏色模型是一種使用數值來表示顏色的數學模型。顏色模型描述瞭如何在色彩空間內建立可用的顏色。RGB 是 Web 的第一個顏色模型。RGB 顏色模型的 sRGB 色彩空間（即標準的紅、綠、藍色彩空間）創建於 1996 年，用於計算機顯示器和 Web。色彩空間是一種對顏色進行分組的系統，以便對任何給定顏色的描述都是一致的。如果在兩個不同的色彩空間之間轉換顏色，它在兩者中看起來應該是相同的。

最初，顯示器能渲染的顏色數量有限，CSS 顏色也受這些限制，隨著能力的提高而擴充套件。現代裝置不再侷限於 RGB，我們現在也有了基於人類感知的顏色模型，提供了更廣泛的色域。我們現在可以用多種方式在 CSS 中描述顏色，而且選擇越來越多。

本指南介紹了不同的 <color> 值型別。有關更詳細的討論，請參閱下面提供的參考連結。

關鍵詞

Web 定義了一組標準的顏色名稱，讓你可以使用關鍵字而不是數字表示法來描述顏色。這是一種更簡單但更有限的方法——可能沒有代表你想要使用的確切顏色的關鍵字。

顏色關鍵字包括標準的原色和二次色（如 red、blue 或 orange）、灰色調（從 black 到 white，包括 darkgray 和 lightgrey 等顏色），以及各種其他混合顏色，包括 lightseagreen、cornflowerblue 和 rebeccapurple。命名顏色使用 RGB 模型，並與 sRGB（srgb）色彩空間相關聯。

有超過 160 種命名顏色。有一些特別值得關注的命名顏色：transparent 設定一個透明的顏色值，而 currentColor 設定 CSS color 屬性的當前值。還有一些命名的 <system-color> 顏色，如 accentcolortext 和 buttonface，它們反映了使用者、瀏覽器或作業系統所做的預設顏色選擇。

所有顏色關鍵字都不區分大小寫。有關顏色關鍵字的更多資訊，請參閱 <named-color> 資料型別。

RGB 值

在 CSS 中，主要有兩種方法透過其紅、綠、藍分量來定義 RGB 顏色——十六進位制值和 rgb() 值。與命名顏色一樣，這些方法使用 RGB 模型，並與 sRGB（srgb）色彩空間相關聯。但是，它們允許指定更廣泛的顏色範圍。

十六進位制字串表示法

十六進位制（hex）字串表示法使用一個十六進位制值來表示 RGB 顏色的每個分量（紅、綠、藍）。它還可以包含第四個分量：alpha 通道（或不透明度）。

十六進位制字串表示法中的顏色總是以字元 "#" 開頭。之後是顏色程式碼的十六進位制數字。該字串不區分大小寫。

"#rrggbb": 指定一種完全不透明的顏色，其紅色分量是十六進位制數 0xrr，綠色分量是 0xgg，藍色分量是 0xbb。
"#rrggbbaa": 指定一種顏色，其紅色分量是十六進位制數 0xrr，綠色分量是 0xgg，藍色分量是 0xbb。Alpha 通道由 0xaa 指定；這個值越低，顏色就越半透明。
"#rgb": 指定一種顏色，其紅色分量是十六進位制數 0xrr，綠色分量是 0xgg，藍色分量是 0xbb。
"#rgba": 指定一種顏色，其紅色分量是十六進位制數 0xrr，綠色分量是 0xgg，藍色分量是 0xbb。Alpha 通道由 0xaa 指定；這個值越低，顏色就越半透明。

如上所示，紅、綠、藍顏色分量都可以表示為一個兩位數的十六進位制值，代表 0 (00) 和 255 (FF) 之間的一個數字，或者一個單位數的十六進位制值（一個 0 (0) 和 15 (F) 之間的數字）。

備註： 上述值中的前導 0x 表示一個十六進位制整數字面量。十六進位制整數可以包括數字（0 - 9）和字母 a – f 以及 A – F。字元的大小寫不改變其值。因此：0xa = 0xA = 10，0xf = 0xF = 15。

這兩個十六進位制顏色是等效的顏色值；它們都是紅色

css

color: #ff0000;
color: #f00;

所有分量必須使用相同數量的數字指定。如果你使用單位數表示法，最終的顏色是透過將每個分量的數字使用兩次來計算的；也就是說，"#D" 在繪製時會變成 "#DD"。

要使值變為 25% 不透明，請如下所示新增 alpha 通道值

css

color: #ff000044;
color: #f004;

有關顏色的十六進位制字串表示法的更多資訊，請參閱 <hex-color> 資料型別。

HTML 顏色輸入型別

在許多情況下，你的網站可能需要讓使用者選擇一種顏色。也許你有一個可自定義的使用者介面，或者你正在實現一個繪圖應用。也許你有可編輯的文字，需要讓使用者選擇文字顏色。或者你的應用允許使用者為資料夾或專案分配顏色。對於這類用例，<input> 元素有一個 "color" type，它會渲染一個顏色選擇器控制元件。

這個例子允許你選擇一種顏色。一旦做出選擇，border-color 就會被設定為該顏色，並且該值會被顯示出來。

html

<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <output></output>
</div>

HTML 建立了一個包含顏色選擇器控制元件的盒子（帶有一個使用 <label> 元素建立的標籤）和一個空的 <output> 元素，我們將使用 JavaScript 將顏色值輸出到其中。顏色輸入的值總是一個十六進位制字串。

#box {
  width: 500px;
  height: 100px;
  border: 5px solid rgb(245 220 225);
  padding: 4px 6px;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

以下 JavaScript 會更新邊框的顏色以匹配顏色選擇器的初始值，然後為 <input type="color"> 元素新增兩個事件處理程式以響應其值的變化。

const colorPicker = document.querySelector("#colorPicker");
const box = document.querySelector("#box");
const output = document.querySelector("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", (event) => {
  box.style.borderColor = event.target.value;
});

colorPicker.addEventListener("change", (event) => {
  output.innerText = `${colorPicker.value}`;
});

input 事件在元素的值每次改變時都會發送；也就是說，每次使用者在顏色選擇器中調整顏色時。每次這個事件到達時，我們都會將盒子的邊框顏色設定為與顏色選擇器當前值匹配。

當顏色選擇器的值最終確定時，會接收到 change 事件。我們透過將 <output> 的內容設定為所選顏色的字串值來響應。

RGB 函式表示法

RGB（紅/綠/藍）函式表示法，與十六進位制字串表示法類似，使用其紅、綠、藍分量（以及可選的用於不透明度的 alpha 通道分量）來表示顏色。但是，顏色不是使用字串，而是使用 CSS 函式 rgb() 定義的。該函式接受 3 或 4 個輸入引數——紅、綠、藍分量值以及一個可選的 alpha 通道值。

這些引數的合法值為

red、green 和 blue: 每個值必須是 0 到 255（含）之間的 <number> 值，0% 到 100% 的 <percentage>，或者關鍵字 none，在這種情況下它等於 0。
alpha: Alpha 通道被指定為 0%（完全透明）和 100%（完全不透明）之間的百分比，或 0.0（等同於 0%）和 1.0（等同於 100%）之間的數字。

例如，一個 50% 不透明的亮紅色可以表示為 rgb(255 0 0 / 50%) 或 rgb(100% 0 0 / 0.5)。

有關 RGB 函式表示法的更多資訊，請參閱 rgb() 顏色函式。

帶色相分量的顏色函式

帶有 <hue> 分量（即來自該顏色模型色輪的 <angle>）的顏色函式包括 sRGB 顏色函式 hsl() 和 hwb()，CIELAB 的 lch() 函式，以及 OKLab 的 oklch() 顏色函式。這些顏色函式更直觀，因為色相讓我們能夠區分或識別紅、橙、黃、綠、藍等顏色之間的差異或相似性。

HSL 函式表示法

hsl() CSS 顏色函式是第一個在瀏覽器中支援的基於色相的顏色函式。hsl() 比 rgb() 更直觀——透過改變色相（h）、飽和度（s）和亮度（l）值來確定其效果，比透過紅、綠、藍通道值宣告特定顏色更容易。此外，HSL 類似於 Photoshop 中的 HSB（色相、飽和度、亮度）顏色選擇器，這使得它在首次支援時對許多人來說立即變得熟悉。

hsl() 和 hwb() sRGB 顏色函式都是圓柱形的。色相將顏色定義為圓形色輪上的一個<angle>。下圖顯示了一個 HSL 顏色圓柱體。飽和度是一個百分比，定義了顏色在完全灰度到具有給定色相最大可能量的範圍內的位置。隨著亮度值的增加，顏色從最暗的顏色過渡到最亮的可能顏色（從黑色到白色）。

HSL color cylinder

圖片由維基百科使用者 SharkD 提供，根據 CC BY-SA 3.0 許可證分發。

HSL（或 HWB）顏色的色相（H）分量的值是一個角度，從 0° 的紅色開始，然後經過黃色、綠色、青色、藍色和品紅色，最後在 360° 再次回到紅色。該值可以用 CSS 支援的任何<angle>單位指定，包括度（deg）、弧度（rad）、百分度（grad）或圈（turn）。色相值標識了顏色的基本色調，但它不控制顏色的鮮豔度或暗淡度，也不控制顏色的明暗。

顏色的飽和度（S）分量指定最終顏色中指定色相所佔的百分比，其中 100% 為完全飽和，0% 為完全沒有顏色（灰度）。亮度（L）分量指定顏色在完全黑色（0%）和完全白色（100%）之間的滑動刻度上的明亮程度。你還可以選擇性地包含一個 alpha 通道，前面加上斜槓（/），使顏色不完全不透明。

以下是一些 HSL 表示法的示例顏色

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0 0% 75%);
}

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

const colors = [
  "hsl(90deg 0% 50%)",
  "hsl(90 100% 50%)",
  "hsl(0.15turn 50% 75%)",
  "hsl(0.15turn 90% 75%)",
  "hsl(0.15turn 90% 50%)",
  "hsl(270deg 90% 50% / 50%)",
];

const tbody = document.querySelector("tbody");
for (const color of colors) {
  const tr = document.createElement("tr");
  const td1 = document.createElement("td");
  td1.appendChild(document.createElement("code")).textContent = color;
  const td2 = document.createElement("td");
  td2.style.backgroundColor = color;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

最後一個值是半透明的；它包含了可選的 alpha 值，前面有一個正斜槓。

備註： 當你省略色相的單位時，它被假定為度（deg）。

HWB 函式表示法

hwb() 顏色函式使用與 hsl() 相同的色相座標系，其中 0deg 是紅色。然而，hwb() 函式不是使用 hsl() 的亮度和飽和度，而是指定白度（W）和黑度（B）。這個函式也相當直觀——允許你選擇一個色相，然後混入一定量的白色和/或黑色以達到所需的顏色。

W 和 B 的值範圍從 0% 到 100%（或 0 到 1）。如果 W 和 B 的組合值大於或等於 100%（或 1），顏色將是灰色，類似於用 hsl() 將 s 設定為 0%。與 hsl() 一樣，可以包含一個可選的 alpha 值，前面加上一個正斜槓 /。

以下是一些使用 HWB 表示法的例子

css

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

在下面的例子中，我們設定了與 hsl() 例子中相同的色相，但我們透過 hwb() 為每個色相添加了白度和黑度，而不是飽和度和亮度

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hwb(0 75% 25%);
}

<table>
  <thead>
    <tr>
      <th scope="col">Color in HWB notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

const colors = [
  "hwb(90deg 50% 50%)",
  "hwb(90 0% 0%)",
  "hwb(0.15turn 25% 0%)",
  "hwb(0.15turn 10% 25%)",
  "hwb(1turn 10% 65%)",
  "hwb(270deg 75% 10%)",
];

const tbody = document.querySelector("tbody");
for (const color of colors) {
  const tr = document.createElement("tr");
  const td1 = document.createElement("td");
  td1.appendChild(document.createElement("code")).textContent = color;
  const td2 = document.createElement("td");
  td2.style.backgroundColor = color;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

LCH 和 OkLCh：CIELAB 和 Oklab 色彩空間

雖然 hsl() 和 hwb() 很直觀，但它們有一個主要缺點。在這些函式中，每個完全飽和的色相角度（hsl(<angle> 100% 50%) 或 hwb(<angle> 0% 0%)）都具有相同的亮度，但這與人類視覺或顯示器的工作方式不符。在完全飽和的藍色（hsl(240deg 100% 50%)）上放置白色文字是清晰可讀的，但在完全飽和的黃色（hsl(60deg 100% 50%)）上的相同文字不僅難以辨認，還可能傷害使用者的眼睛。在這些顏色函式中，顏色的亮度是相對於其他顏色的，而不是相對於人類感知的。實際上，並非所有色相都具有相同的最大飽和度。

如果你能簡單地改變網站上顏色的色相通道而不會讓文字變得難以辨認，那豈不是太棒了？你可以透過 CIELAB 和 Oklab 色彩空間中的顏色函式實現這一點。

CIELAB 和 Oklab 色彩空間代表了人類可以看到的全部顏色範圍。CIE Lab 顏色函式包括 lch() 和 lab()。Oklab 顏色函式包括 oklch() 和 oklab()。這些模型的主要目的是它們是均勻的，這樣在色彩空間中任何兩點之間的給定距離對觀察者來說應該顯得同樣不同。Oklab 是一個使用與 CIELAB 相同模型型別的色彩空間，但是透過額外的數值最佳化步驟構建的，因此其值被認為比 CIELAB 更準確。由於這種最佳化，色相在感知上更加均勻。

lch() 和 oklch() 函式使用亮度（L）、色度（C）和色相（H），本節將進一步討論。 lab() 和 oklab() 函式的工作方式不同，它們使用亮度（L）、紅/綠度（沿 a 軸）和黃/藍度（沿 b 軸）。這些軸被稱為直角座標。這些顏色函式的主要好處是，“亮度”是感知亮度；它是人眼感知的顏色亮度，而不是與其他顏色相比的亮度。

與 sRGB 色相顏色函式類似，lch() 和 oklch() 中的色相（h）值是一個數字、一個角度或關鍵字 none（等同於 0deg），代表顏色的 <hue> 角度。然而，每個角度值對應的顏色是不同的。在 sRGB、CIELAB（lch() 使用）和 Oklab（oklch() 使用）色彩空間中，與特定色相對應的角度是不同的。

下面的漸變展示了 sRGB、CIE Lab 和 OKlab 色彩空間中從 0deg 到 360deg 每個角度的色相顏色

<p>sRGB (<code>hsl()</code> and <code>hwb()</code>)</p>
<div id="srgb"></div>
<p>CIE Lab (<code>lch()</code>)</p>
<div id="lch"></div>
<p>OKLab (<code>oklch()</code>)</p>
<div id="oklch"></div>
<p>
  <label><input type="checkbox" /> Toggle greyscale</label>
</p>

div:has(~ p input:checked) {
  filter: grayscale(100%);
}
p {
  margin: 0;
}
div {
  height: 50px;
  margin-bottom: 10px;
}
#srgb {
  background: linear-gradient(
    to right,
    hsl(0deg 100% 50%),
    hsl(90deg 100% 50%),
    hsl(180deg 100% 50%),
    hsl(270deg 100% 50%),
    hsl(360deg 100% 50%)
  );
}
#lch {
  background: linear-gradient(
    to right,
    lch(50% 100% 0deg),
    lch(50% 100% 90deg),
    lch(50% 100% 180deg),
    lch(50% 100% 270deg),
    lch(50% 100% 360deg)
  );
}
#oklch {
  background: linear-gradient(
    to right,
    oklch(50% 100% 0deg),
    oklch(50% 100% 90deg),
    oklch(50% 100% 180deg),
    oklch(50% 100% 270deg),
    oklch(50% 100% 360deg)
  );
}

你可能會注意到，後兩個漸變的亮度在整個色譜中比 sRGB 漸變更均勻。在上面的示例中選中複選框，將色相漸變轉換為灰度，可以更明顯地看到這一點。

還要注意，CIE Lab 中藍色值的分佈比其他兩個更長。這就是 lch() 和 oklch() 之間的區別。lch() 的藍色分佈是由於一個 bug，它會改變 270deg 到 330deg 之間色相值的色度和亮度。這在 oklab 色彩空間中得到了解決，因此也解決了 oklch() 顏色表示法的問題。

如上所述，lch() 和 oklch() 中的色相（H）是一個 <angle>、number 或關鍵字 none。lightness 是一個 <percentage>，或者對於 lch() 是 0 到 100 之間的數字，對於 oklch() 是 0 到 1 之間的數字，其中 0 或 0% 表示完全沒有亮度，即黑色。

C 是一個 <number>、<percentage> 或關鍵字 none（等同於 0%），是顏色的色度，或“顏色量”。這類似於 hsl() 顏色函式的 S 飽和度值。值 0 表示完全沒有色度或飽和度；結果是介於白色和黑色之間的灰色，具體取決於亮度值。數值理論上是無界的，其中 100% 對於 lch() 等於 150，對於 oklch() 等於 0.4。

與其他顏色函式一樣，也有一個可選的 alpha 透明度值，前面有一個斜槓（/）。

下面的例子展示了在 lch() 和 oklch() 函式中改變亮度值的效果。

/* Varying shades of pink */
.container {
  display: grid;
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.dark-text {
  color: lch(1% 40 0deg);
}

.container div {
  border-radius: 8px;
  padding: 8px 4px;
}

<div class="container"></div>

const container = document.querySelector(".container");
for (let l = 0; l <= 100; l += 10) {
  const div = document.createElement("div");
  const usedL = l === 0 ? 1 : l === 100 ? 99 : l;
  div.textContent = div.style.backgroundColor = `lch(${usedL}% 40 0)`;
  if (usedL >= 80) div.classList.add("dark-text");
  container.appendChild(div);
}
container.appendChild(document.createElement("div"));
for (let l = 0; l <= 100; l += 10) {
  const div = document.createElement("div");
  const usedL = l === 0 ? 1 : l === 100 ? 99 : l;
  div.textContent = div.style.backgroundColor = `oklch(${usedL}% 0.12 0)`;
  if (usedL >= 80) div.classList.add("dark-text");
  container.appendChild(div);
}

Lab 和 OKLab

lab() 函式表示法在 CIE L*a*b* 色彩空間中表達給定的顏色。oklab() 函式在 OKLab 色彩空間中定義顏色。這些函式透過指定顏色的亮度（L）、紅/綠軸值（a）、藍/黃軸值（b）以及一個可選的 alpha 透明度值來表示人類可以看到的全部顏色範圍。

與 lch() 和 oklch() 類似，lightness 是

一個 <percentage>，其中 0% 是完全黑色，100% 是完全白色。
對於 lab() 是一個 0 到 100 之間的數字，對於 oklab() 是 0 到 1 之間的數字，其中 0 是完全黑色，1/100 是完全白色。

a 值是一個介於 -125 和 125 之間的 <number>（對於 lab()）或介於 -0.4 和 0.4 之間的 <number>（對於 oklab()），一個介於 -100% 和 100% 之間的 <percentage>，或者是關鍵字 none（在這種情況下等同於 0%）。這個值指定了顏色在色彩空間中沿 a 軸的距離，定義了顏色是偏綠（朝向 -100%）還是偏紅（朝向 +100%）。

請注意，這些值是有符號的（允許正值和負值），並且理論上是無界的，這意味著你可以設定超出 ±125 或 ±0.4 (±100%) 限制的值。實際上，值分別不能超過 ±160 或 ±0.5。

b 值有相同的限制。它指定了顏色在色彩空間中沿 b 軸的距離，定義了顏色是偏藍（朝向 -100%）還是偏黃（朝向 +100%）。

下面的例子演示了透過 lab() 函式改變 a 軸和透過 oklab() 函式改變 b 軸的效果。

<div class="container"></div>

/* Varying shades of pink */
.container {
  display: grid;
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.container div {
  border-radius: 8px;
  padding: 8px 4px;
}

const container = document.querySelector(".container");

for (let a = -100; a <= 100; a += 25) {
  const div = document.createElement("div");
  div.textContent = div.style.backgroundColor = `lab(50% ${a}% 0)`;
  container.appendChild(div);
}
container.appendChild(document.createElement("div"));
for (let b = -4; b <= 4; b++) {
  const div = document.createElement("div");
  div.textContent = div.style.backgroundColor = `oklab(50% 0 ${b / 10})`;
  container.appendChild(div);
}

其他顏色函式表示法

`color()` 函式

如果你想在定義顏色時對色彩空間進行明確的控制，可以使用 color() 函式。

這對於為具有更寬顏色色域的高畫質裝置描述顏色很有用。例如，如果你想顯示 display-p3 0 0 1 顏色，它在 sRGB 色域之外，你可以使用 @media color-gamut at-rule 來檢測客戶端硬體是否支援此範圍內的顏色，然後再嘗試使用它

css

.vibrant {
  background-color: color(srgb 0 0 1);
}

@media (color-gamut: p3) {
  .vibrant {
    background-color: color(display-p3 0 0 1);
    /* Equivalent to out-of-gamut color(srgb 0 0 1.042) */
  }
}

理解 color() 在接下來討論的相對顏色方面非常重要。上面討論的舊的 sRGB 顏色表示法——hsl()、hwb() 和 rgb()——不能表達所有可見顏色的全部光譜，而 color() 函式支援更廣泛的色域。因此，當使用舊的函式型別定義相對顏色時，透過查詢 HTMLElement.style 屬性或 CSSStyleDeclaration.getPropertyValue() 方法返回的輸出顏色將是一個 color(srgb ...) 值。

要檢視轉換 rgb()、hsl()、hwb() 和其他顏色格式的示例，請檢視我們的顏色格式轉換器工具。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 10 月 13 日⁩，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題