CSS 顏色值

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

顏色關鍵字 color

顏色關鍵字 color 是不區分大小寫的識別符號,該識別符號表示特定的顏色,例如 redgreenblueyellowblack 等。

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

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

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

透明顏色關鍵字

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

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

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

注意: CSS 2.1 只允許兩個屬性 background-colorborder-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) 。其中,每個引數(redgreenblue)定義顏色的強度,可以是整數值(從 0 到 255)或百分比值(從 0%到 100%)。

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

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

00% 代表不存在的特定顏色成分的,而值 255100%fff 表示顏色分量的全部存在。

注意: 有效範圍(0-2550%-100%) 之外的值會自動剪裁或更改為落在裝置支援的範圍內。

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