CSS 合法顏色值
CSS 顏色
CSS 中的顏色可以通過以下方法指定：
- 十六進制顏色
- 帶透明度的十六進制顏色
- RGB 顏色
- RGBA 顏色
- HSL 顏色
- HSLA 顏色
- 預定義/跨瀏覽器的顏色名稱
- 使用
currentcolor關鍵字
十六進制顏色
用 #RRGGBB 規定十六進制顏色，其中 RR（紅色）、GG（綠色）和 BB（藍色）十六進制整數指定顏色的成分（分量）。所有值必須在 00 到 FF 之間。
例如，＃0000ff 值呈現為藍色，因為藍色分量設置為最高值（ff），其他分量設置為 00。
實例
定義不同的 HEX 顏色：
#p1 {background-color: #ff0000;} /* 紅色 */
#p2 {background-color: #00ff00;} /* 綠色 */
#p3 {background-color: #0000ff;} /* 藍色 */
帶透明度的十六進制顏色
用 #RRGGBB 規定十六進制顏色。如需增加透明度，請在 00 和 FF 之間添加兩個額外的數字。
實例
定義帶透明度的 HEX 顏色：
#p1a {background-color: #ff000080;} /* 帶透明度的紅色 */
#p2a {background-color: #00ff0080;} /* 帶透明度的綠色 */
#p3a {background-color: #0000ff80;} /* 帶透明度的藍色 */
RGB 顏色
RGB 顏色值由 rgb() 函數規定，語法如下：
rgb(red, green, blue)
每個參數（red, green, blue）定義顏色的強度，可以是 0 到 255 之間的整數或百分比值（從 0％ 到 100％）。
例如，值 rgb(0,0,255) 呈現為藍色，因為 blue 參數設置為其最高值（255），其他參數設置為 0。
此外，以下值定義相同的顏色：rgb(0,0,255) 和 rgb(0%,0%,100%)。
實例
定義不同的 RGB 顏色：
#p1 {background-color: rgb(255, 0, 0);} /* 紅色 */
#p2 {background-color: rgb(0, 255, 0);} /* 綠色 */
#p3 {background-color: rgb(0, 0, 255);} /* 藍色 */
RGBA 顏色
RGBA 顏色值是 RGB 顏色值的擴展，它帶有 Alpha 通道 - 指定對象的不透明度。
RGBA 顏色通過 rgba() 函數規定，語法如下：
rgba(red, green, blue, alpha)
alpha 參數是介于 0.0（完全透明）和 1.0（完全不透明）之間的數字。
實例
定義帶有不透明度的不同 RGB 顏色：
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 帶不透明度的紅色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 帶不透明度的綠色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 帶不透明度的藍色 */
HSL 顏色
HSL 指的是色相（hue）、飽和度（saturation）和亮度（lightness）- 代表顏色的圓柱坐標表示。
使用 hsl() 函數指定 HSL 顏色值，該函數的語法如下：
hsl(hue, saturation, lightness)
色相是色輪上的度數（從 0 到 360）- 0（或 360）是紅色，120 是綠色，240 是藍色。
飽和度是一個百分比值； 0％ 表示灰色陰影，而 100％ 是全彩色。
亮度也是一個百分比； 0％ 是黑色，100％ 是白色。
實例
定義不同的 HSL 顏色：
#p1 {background-color: hsl(120, 100%, 50%);} /* 綠色 */
#p2 {background-color: hsl(120, 100%, 75%);} /* 淺綠色 */
#p3 {background-color: hsl(120, 100%, 25%);} /* 深綠色 */
#p4 {background-color: hsl(120, 60%, 70%);} /* 柔和的綠色 */
HSLA 顏色
HSLA 顏色值是 HSL 顏色值的擴展，它帶有 Alpha 通道 - 指定對象的不透明度。
HSLA 顏色值由 hsla() 函數指定，該函數的語法如下：
hsla(hue, saturation, lightness, alpha)
alpha 參數是介于 0.0（完全透明）和 1.0（完全不透明）之間的數字。
實例
定義帶有不透明度的不同 HSL 顏色：
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* 帶不透明度的綠色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* 帶不透明度的淺綠色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* 帶不透明度的深綠色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* 帶不透明度的柔綠色 */
預定義/跨瀏覽器的顏色名稱
HTML 和 CSS 顏色規范中預定義了 140 個顏色名稱。
例如：blue、red、coral、brown 等：
實例
定義不同的顏色名：
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
所有預定義名稱的列表都可以在我們的 顏色名稱參考手冊 中找到。
currentcolor 關鍵字
currentcolor 關鍵字引用元素的 color 屬性值。
實例
以下 <div> 元素的邊框顏色將為藍色，因為 <div> 元素的文本顏色為藍色：
#myDIV {
color: blue; /* 藍色文本色 */
border: 10px solid currentcolor; /* 藍色邊框色 */
}
