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)
每個引數（紅、綠、藍）定義顏色的強度，可以是 0 到 255 之間的整數，也可以是百分比值（從 0% 到 100%）。
例如，rgb(0,0,255) 的值渲染為藍色，因為藍色引數被設定為最高值 (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; /* 藍色邊框顏色 */
}
自己動手試一試 »
