Color CSS

在這個單元中，我們完成了對 CSS 色彩系統的深入探討。以下為你學到的核心概念整理：

1. CSS 中的四種色彩表示法

(1) 命名顏色（Named Colors）

CSS 支援超過 140 種預設命名色彩（例如：red、blue、lightgreen）。

color: red;

(2) 十六進位色碼（Hex Colors）

• 使用 # 開頭，後接 6 位數或 3 位數的十六進位值。

• 每兩位表示紅、綠、藍 (RGB) 的強度。

• 範例：#23F41A 或簡寫為 #2F1（當每兩位相同時可縮寫）。

color: #FF9900;

(3) RGB 色彩（Red, Green, Blue）

• 使用 rgb() 函數，值域從 0 到 255。

• 範例：rgb(7, 210, 50) 表示一種亮綠色。

color: rgb(7, 210, 50);

(4) HSL 色彩（Hue, Saturation, Lightness）

• hsl()：色相（0–360）、飽和度與亮度為百分比。

• 範例：hsl(200, 20%, 50%)

color: hsl(120, 100%, 25%);

2. 透明度控制

rgba() 與 hsla()

• 可在 RGB 或 HSL 基礎上加上透明度（alpha 值），取值範圍為 0（完全透明）到 1（完全不透明）。

color: rgba(255, 0, 0, 0.5);   /* 半透明紅色 */
color: hsla(200, 50%, 50%, 0.7);

3. 顏色屬性使用方式

屬性名稱	說明
color	設定文字顏色
background-color	設定背景顏色
border-color	設定邊框顏色
outline-color	設定元素外框線顏色（若有）

---

透過靈活運用不同的 CSS 色彩表示法與透明度設定，你可以建立風格一致且視覺吸引人的網頁介面。