<named-color>

語法

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

值

命名顏色由標準顏色、transparent 和 currentColor 關鍵字組成。

標準顏色

基本顏色有標準的、易於記憶的名稱。

除了這 16 種顏色外，還有大約 150 種其他顏色有關聯的關鍵字。

最初，在 CSS Level 1 中，只定義了 16 種基本顏色，orange 是在 CSS Level 2 中加入的。Web 設計師發現這個列表太短，瀏覽器廠商根據 X11 顏色名稱添加了許多顏色名稱。在 SVG 1 中，然後在 CSS 顏色 Level 3 中，這些名稱得到了標準化、正式定義和統一（有些名稱有不同的拼寫，現在是別名）。它們被稱為擴充套件顏色關鍵字、X11 顏色或 SVG 顏色。

在 CSS 顏色 Level 4 中，增加了一種顏色 rebeccapurple，以紀念網路先驅 Eric Meyer。

transparent

transparent 關鍵字表示一個完全透明的顏色。這使得著色專案後面的背景完全可見。技術上，transparent 是 rgb(0 0 0 / 0%) 的簡寫。

為防止意外行為（例如在 <gradient> 中），當前的 CSS 規範規定，transparent 應在預乘 alpha 顏色空間中計算。但是，請注意，舊版瀏覽器可能會將其視為 alpha 值為 0 的黑色。

在 CSS Level 2 (Revision 1) 中，transparent 關鍵字不是一個真正的顏色。它是一個特殊的關鍵字，可以在兩個 CSS 屬性 background 和 border 上代替常規的 <color> 值使用。它的新增主要是為了讓開發者能夠覆蓋繼承的純色。隨著 CSS 顏色 Level 3 中 alpha 通道的出現，transparent 被重新定義為一個真正的顏色。現在它可以在任何可以使用 <color> 值的地方使用。

描述

所有名稱都指定了 sRGB 顏色空間中的一種顏色。雖然這些名稱或多或少地描述了它們各自的顏色，但它們本質上是人為定義的，背後並沒有嚴格的術語原理。

顏色關鍵字都代表純粹的、不透明的實體顏色。

有幾個關鍵字互為別名：

• aqua / cyan
• fuchsia / magenta
• darkgray / darkgrey
• darkslategray / darkslategrey
• dimgray / dimgrey
• lightgray / lightgrey
• lightslategray / lightslategrey
• gray / grey
• slategray / slategrey

雖然許多關鍵字改編自 X11，但它們的 RGB 值可能與 X11 系統上相應的顏色有所不同，因為製造商有時會根據其特定的硬體調整 X11 顏色。

示例

使用命名顏色

HTML

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

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

結果

規範

瀏覽器相容性

另見

• <color>：<named-color> 是其定義的一部分的資料型別。