<color>

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<color> CSS 資料型別表示一種顏色。<color> 還可以包含Alpha 通道的透明度值，表示顏色應如何與其背景混合。

備註：儘管 <color> 值有精確的定義，但它們在不同裝置上的實際外觀可能會有所不同（有時會非常明顯）。這是因為大多數裝置沒有經過校準，而且一些瀏覽器不支援輸出裝置的顏色配置檔案。

語法

css

/* Named colors */
rebeccapurple
aliceblue

/* RGB Hexadecimal */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* Lab (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* OkLCh (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* Relative CSS colors */
/* HSL hue change */
hsl(from red 240deg s l)
/* HWB alpha channel change */
hwb(from green h w b / 0.5)
/* LCH lightness change */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

<color> 值可以使用下面列出的方法之一來指定：

透過關鍵字：<named-color>（例如 blue 或 pink）、<system-color> 和 currentColor。
透過十六進位制表示法：<hex-color>（例如 #ff0000）。
透過 <color-function>，使用函式表示法在顏色空間中指定引數：
- sRGB 顏色空間：hsl()、hwb() 和 rgb()。
- CIELAB 顏色空間：lab() 和 lch()。
- Oklab 顏色空間：oklab() 和 oklch()。
- 其他顏色空間：color()、device-cmyk()。
透過使用相對顏色語法，基於現有顏色輸出新顏色。上述任何顏色函式都可以接受一個源顏色，其前有 from 關鍵字，後跟新輸出顏色的通道值定義。
透過混合兩種顏色：color-mix()。
透過指定一種顏色，為其返回一種對比色：contrast-color()。
透過指定兩種顏色，第一種用於淺色方案，第二種用於深色方案：light-dark()。

`currentColor` 關鍵字

currentColor 關鍵字代表元素 color 屬性的值。這允許你在預設情況下不接收 color 值的屬性上使用該值。

如果 currentColor 被用作 color 屬性的值，它將取自 color 屬性的繼承值。

html

<div class="container">
  The color of this text is blue.
  <div class="child"></div>
  This block is surrounded by a blue border.
</div>

css

.container {
  color: blue;
  border: 1px dashed currentColor;
}
.child {
  background: currentColor;
  height: 9px;
}

缺失的顏色分量

除了使用舊式逗號分隔語法的顏色函式外，任何 CSS 顏色函式的每個分量都可以指定為關鍵字 none，表示該分量缺失。

在顏色插值中顯式指定缺失的分量對於你希望插值某些顏色分量而不插值其他分量的情況很有用。對於所有其他目的，缺失分量將有效地具有一個適當單位的零值：0、0% 或 0deg。例如，在插值之外使用時，以下顏色是等效的：

css

/* These are equivalent */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* These are equivalent */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

插值

顏色插值發生在漸變、過渡和動畫中。

在插值 <color> 值時，它們首先被轉換到給定的顏色空間，然後計算值的每個分量進行線性插值，插值的速度由過渡和動畫中的緩動函式決定。插值顏色空間預設為 Oklab，但可以透過某些顏色相關的函式表示法中的 <color-interpolation-method> 來覆蓋。

帶缺失分量的插值

在同一空間中插值顏色

當插值的顏色正好在插值顏色空間中時，一種顏色中缺失的分量將被另一種顏色中相同分量的現有值替換。例如，以下兩個表示式是等效的：

css

color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

備註：如果一個分量在兩種顏色中都缺失，那麼該分量在插值後也將缺失。

插值不同空間的顏色：相似分量

如果要插值的任何顏色不在插值顏色空間中，其缺失的分量將根據下表中描述的同一類別的相似分量轉移到轉換後的顏色中：

類別	相似分量
紅色	`R`, `X`
綠色	`G`, `Y`
藍色	`B`, `Z`
亮度	`L`
色彩度	`C`, `S`
色相	`H`
a	`a`
b	`b`

例如

color(xyz 0.2 0.1 0.6) 中的 X (0.2) 類似於 rgb(50% 70% 30%) 中的 R (50%)。
hsl(0deg 100% 80%) 中的 H (0deg) 類似於 oklch(80% 0.1 140) 中的 H (140)。

以 OkLCh 作為插值顏色空間，並以下面兩種顏色為例：

css

lch(80% 30 none)
color(display-p3 0.7 0.5 none)

預處理過程是：

將兩種顏色中缺失的分量替換為零值。
css
```
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```

將兩種顏色都轉換為插值顏色空間。

css

oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)

如果轉換後顏色的任何分量與相應原始顏色中的缺失分量相似，則將其重置為缺失分量。
css
```
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```
將任何缺失的分量替換為另一個轉換後顏色中的相同分量。
css
```
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

無障礙

有些人難以區分顏色。WCAG 2.2 建議強烈反對僅使用顏色來傳達特定訊息、操作或結果。更多資訊請參見顏色與顏色對比度。

正式語法

<color> = 
  <color-base>        |
  currentColor        |
  <system-color>      |
  <contrast-color()>  |
  <device-cmyk()>     |
  <light-dark()>      

<color-base> = 
  <hex-color>       |
  <color-function>  |
  <named-color>     |
  <color-mix()>     |
  transparent       

<contrast-color()> = 
  contrast-color( [ [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast>? ] | [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast> , <color># ] ] )  

<device-cmyk()> = 
  <legacy-device-cmyk-syntax>  |
  <modern-device-cmyk-syntax>  

<light-dark()> = 
  light-dark( <color> , <color> )  

<color-function> = 
  <rgb()>     |
  <rgba()>    |
  <hsl()>     |
  <hsla()>    |
  <hwb()>     |
  <lab()>     |
  <lch()>     |
  <oklab()>   |
  <oklch()>   |
  <ictcp()>   |
  <jzazbz()>  |
  <jzczhz()>  |
  <alpha()>   |
  <color()>   

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<target-contrast> = 
  <wcag2>  

<legacy-device-cmyk-syntax> = 
  device-cmyk( <number>#{4} )  

<modern-device-cmyk-syntax> = 
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )  

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

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

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

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

<hwb()> = 
  hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<ictcp()> = 
  ictcp( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzazbz()> = 
  jzazbz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzczhz()> = 
  jzczhz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha()> = 
  alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<wcag2> = 
  wcag2                                           |
  wcag2( [ <number> | [ aa | aaa ] && large? ] )  

<cmyk-component> = 
  <number>      |
  <percentage>  |
  none          

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

<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 ] ]? )  

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

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

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear

示例

探索顏色值

在此示例中，我們提供了一個 <div> 和一個文字輸入框。在輸入框中輸入一個有效的顏色值，<div> 就會採用該顏色，從而讓你測試我們的顏色值。

HTML

html

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});

結果

生成完全飽和的 sRGB 顏色

此示例展示了 sRGB 顏色空間中完全飽和的 sRGB 顏色。

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}

結果

建立不同色調的紅色

此示例展示了 sRGB 顏色空間中不同色調的紅色。

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}

結果

建立不同飽和度的紅色

此示例展示了 sRGB 顏色空間中不同飽和度的紅色。

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}

結果

規範

規範
CSS 顏色模組第四版 # color-syntax

瀏覽器相容性

另見

opacity：在元素級別定義透明度的屬性
<hue>：表示顏色色相角的資料型別
color、background-color、border-color、box-shadow、outline-color、text-shadow：使用 <color> 的常見屬性
color() 函式
使用 CSS 將顏色應用於 HTML 元素
使用相對顏色
MDN 部落格上的CSS 顏色（第 4 級）中的新函式、漸變和色相（2023）

幫助改進 MDN

瞭解如何貢獻

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

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