CSS 顏色值

有幾種方法可以在 CSS 中定義顏色值。

顏色關鍵字 color

顏色關鍵字 color 是不區分大小寫的識別符號，該識別符號表示特定的顏色，例如 red ， green ， blue ， yellow ， black 等。

h1 {
    color: red;
}
p {
    background-color: yellow;
}

警告： 顏色關鍵字的支援因瀏覽器而異，因此為了安全起見，最好使用十六進位制或功能表示法。

檢視顏色關鍵字的完整列表。

透明顏色關鍵字

transparent 關鍵字表示完全透明的顏色。

此關鍵字可以視為透明黑色的簡寫 rgba(0,0,0,0) ，也是其計算值。

h1 {
    color: transparent;
}
p {
    background-color: transparent;
}

注意： CSS 2.1 只允許兩個屬性 background-color 和 border-color 接受 transparent 關鍵字。但是，CSS3 擴充套件了顏色值以包含 transparent 關鍵字，以允許其與所有接受顏色值的屬性一起使用。

RGB 顏色值

RGB（Red-Green-Blue）顏色模型是在 CSS 中定義顏色值的最常用方法。可以使用 RGB 模型以兩種方式定義顏色：

十六進位制表示法

以十六進位制表示法表示的 RGB 值用一個 # 字元緊跟三個或六個十六進位制字元（0-9，af）。

當使用六位數表示法（#rrggbb）時，第一對（rr）表示紅色值，第二對（gg）表示綠色值，最後一對（bb）表示藍色值。

h1 {
    color: #f80;
}
p {
    background-color: #ff8800;
}

提示： 三位十六進位制表示法（#rgb）可以 #rrggbb 通過複製數字轉換為六位數形式（），但不能通過新增零來轉換。例如， #03f 可以擴充套件為 #0033ff ，但兩個值表示相同的顏色。

函式表示法

函式表示法中的 RGB 值用：指定 rgb(red, green, blue) 。其中，每個引數（red ， green 和 blue）定義顏色的強度，可以是整數值（從 0 到 255）或百分比值（從 0％到 100％）。

整數值 255 對應於 100% ，和 f 或 ff 在十六進位制符號：例如， rgb(0,255,255) = rgb(0%,100%,100%) = #0ff ，並且所有值代表相同的顏色是淺綠色。數值周圍允許有空格。

h1 {
    color: rgb(0,255,255);
}
p {
    background-color: rgb(0%,100%,100%);
}

0 或 0% 代表不存在的特定顏色成分的，而值 255 ， 100% 和 f 或 ff 表示顏色分量的全部存在。

注意： 有效範圍（0-255 或 0%-100%） 之外的值會自動剪裁或更改為落在裝置支援的範圍內。

檢視有關 CSS3 顏色 的教程，瞭解新的功能符號，例如 rgba() ， hsl() 以及 hsla() 定義顏色值。