2026 iThome 鐵人賽

DAY 11

Modern Web

CSS 到底在幹嘛？30 天拯救你被 AI 爆改的網頁排版！系列第 11 篇

Day 11 - 色彩模型與配色建議

18th鐵人賽 day 11 css html 水果鮮奶油蛋糕

饅頭

團隊第二屆技術創作市集

2026-08-30 10:44:55

154 瀏覽

分享至

今天的封面是饅頭（我自己）。因為今天介紹的內容和色彩有關，而我剛好在下面畫了一小本色票，所以就用我自己當封面啦！

今天會介紹 CSS 中描述顏色的方式，也會分享一個我之前覺得滿不錯的配色方法，提供大家參考看看！٩(｡・ω・｡)و

進入今天的主題！

顏色是網頁設計中最直接影響視覺感受的元素之一，適當的顏色運用不僅能提升美感，更能增強使用者體驗、建立品牌識別度，並引導視覺焦點。CSS 提供多種設定顏色的方式，且許多屬性都支援顏色設定，包括文字顏色、邊框顏色、背景顏色、陰影顏色等。

色彩模型

CSS 提供多種顏色表示方式，你可以根據需求和使用情境選擇適合的色彩模型。

顏色關鍵字

CSS 預設多個顏色關鍵字，可以直接使用英文名稱來設定顏色。

.element {
  /* 文字顏色 */
  color: red;
  /* 背景顏色 */
  background-color: white;
  /* 邊框顏色 */
  border-color: black;
}

十六進位色碼（HEX Colors）

使用「井字號 #」開頭，後接 6 位十六進位數字（0-9, A-F）來表示顏色，這是網頁設計中最常見的顏色表示方式。

格式說明
- 完整格式：#RRGGBB 分別代表紅、綠、藍顏色通道的色碼，每個通道各有 2 位數字。
- 簡寫格式：#RGB 當每個色彩通道的兩位數字相同時可簡寫（例如 #FF0000 可簡寫為 #F00）。
- 透明度格式：#RRGGBBAA 可以在 6 位色碼後再加 2 位數字表示透明度（00 表示完全透明，FF 表示完全不透明）。
```
.element {
  color: #ff0000;   /* 紅色 */
  color: #00ff00;   /* 綠色 */
  color: #0000ff;   /* 藍色 */
  color: #000;      /* 黑色 */
  color: #fff;      /* 白色 */
  color: #00000055; /* 半透明黑色 */
}
```

RGB 與 RGBA

RGB 使用紅（Red）、綠（Green）、藍（Blue）三原色的數值來表示顏色，每個色彩通道的數值範圍為 0～255。RGBA 則是在 RGB 基礎上增加 Alpha 透明度通道。

格式說明
- 完整格式：rgb(R, G, B) 、 rgb(R G B) 分別代表紅、綠、藍顏色通道的色碼，每個通道的值範圍為 0～255（也可使用 0%～100% 表示）。
- 透明度格式：rgba(R, G, B, A) 、rgb(R G B / A) 其中 A 為透明度值，範圍為 0～1（0 表示完全透明，1 表示完全不透明）。
```
.element {
 color: rgba(255, 0, 0, 0.5); /* 50% 透明的紅色 */
 color: rgba(0, 0, 255, 0.8); /* 80% 不透明的藍色 */

 color: rgb(255 0 0 / 0.5);   /* 不寫逗號的寫法 */
 color: rgb(0 0 255 / 0.8);
}
```

HSL 與 HSLA

HSL 使用色相（Hue）、飽和度（Saturation）和明度（Lightness）來表示顏色。相較於 RGB 和十六進位色碼，HSL 更貼近人類感知色彩的方式，使色彩調整更直覺。HSLA 則在 HSL 基礎上加入透明度通道（Alpha），提供透明度控制。

格式說明
- 格式：hsl(H, S, L) 、 hsl(H, S, L, A) 或是 hsl(H S L)、hsl(H S L / A) 。
- 色相：範圍為 0～360 度，代表色環上的角度。0°/360°= 紅色，120°= 綠色，240°= 藍色
- 飽和度：範圍為 0%～100%，代表顏色的純度。0% = 灰色，100% = 純色
- 明度：範圍為 0%～100%，代表顏色的明暗。0% = 黑色，50% = 正常，100% = 白色
- 透明度：範圍為 0～1（0 表示完全透明，1 表示完全不透明）。
```
.element {
  color: hsl(0, 100%, 50%);   /* 紅色 */
  color: hsl(120, 100%, 50%); /* 綠色 */
  color: hsl(240, 100%, 50%); /* 藍色 */

  color: hsla(0, 100%, 50%, 0.5);   /* 50% 透明的紅色 */
  color: hsla(240, 100%, 50%, 0.8); /* 80% 透明的藍色 */

  color: hsl(200 80% 50% / 0.8);    /* 不寫逗號的寫法 */
}
```

使用建議

最適合用於建立配色系統和主題變化。

調整同一色系的不同深淺時特別方便，只需改變明度或飽和度。

/* 使用 HSL 輕鬆建立同色系變化 */
.primary {
  background: hsl(200, 80%, 50%); /* 主要顏色 */
}
.primary-light {
  background: hsl(200, 80%, 70%); /* 淺色版本（提高明度）*/
}
.primary-dark {
  background: hsl(200, 80%, 30%); /* 深色版本（降低明度）*/
}
.primary-pale {
  background: hsl(200, 40%, 50%); /* 柔和版本（降低飽和度）*/
}

其他色彩模型

隨著現代顯示技術進步（如廣色域螢幕 Display P3）以及 CSS Color Module Level 4 規範的普及，CSS 引入了更先進、更符合人眼感知均勻度的色彩模型與表示法。

OKLCH 與 Oklab

HSL 雖然直覺，但存在「感知亮度不均」的缺點（例如：相同 50% 明度下，黃色看起來遠比藍色亮得多）。OKLCH 解決了這個問題，在調整色相時能保持一致的人眼感知明度，是現代 UI 設計系統（如 Tailwind CSS v4 等）極力推崇的模型。

格式說明
- 格式：oklch(L C H)、oklch(L C H / A)
- L（Lightness，感知明度）：0%～100%（或 0～1），0% 為黑，100% 為白。
- C（Chroma，彩度/純度）：0 到約 0.4（理論上無上限，數值越高色彩越鮮豔，0 為灰階）。
- H（Hue，色相環角度）：0～360（0 偏粉紅、140 偏綠、260 偏藍）。
```
.element {
  /* 基礎主色 */
  background: oklch(60% 0.15 250);

  /* 調整明度建立階層，感知亮度依然平滑自然 */
  background: oklch(85% 0.15 250); /* 淺色 */
  background: oklch(35% 0.15 250); /* 深色 */
}
```
詳細的色彩變化，可以到這個網站來實際體驗看看：https://oklch.com/

廣色域色彩 - Display P3 與 `color()` 函式

傳統的 Hex、RGB、HSL 都是基於幾十年前制定的 sRGB 色域標準。但現在我們手中的 iPhone、高階 Android 手機或 Mac 螢幕，大多已支援色彩涵蓋範圍多出約 25% 的 Display P3 廣色域。

目前市面上的手機很多開始採用 OLED 螢幕，可以讓每個像素都能獨立控制發光。黑色區域可以直接完全不發光達到純黑，彩色與亮部區域則能獨立大幅提升發光強度。這也是為什麼當我們在 Instagram 或 Threads 瀏覽開啟 HDR 的照片時，太陽光感特別強烈、夕陽與霓虹色彩特別立體鮮豔。這正是因為現代螢幕正在發揮廣色域與高動態顯示的能力！

.element {
  /* 傳統 sRGB 的極限紅色 */
  background: rgb(255 0 0);

  /* Display P3 廣色域的紅色（在支援的螢幕上會比上面明顯更鮮豔、更具衝擊力） */
  background: color(display-p3 1 0 0);

  /* 支援透明度語法 */
  background: color(display-p3 0 0.9 0.4 / 0.8);
}

動態色彩混合 - `color-mix()`

color-mix() 可以直接在 CSS 中按比例混合兩種顏色，非常適合用來製作 Hover 狀態、遮罩或半透明色調！

格式：color-mix(in <色彩空間>, <顏色1> <比例>, <顏色2> <比例>)

.button {
  background: hsl(200 80% 50%);
}

.button:hover {
  /* 將主色與 20% 的白色混合，快速產生 Hover 淺色效果 */
  background: color-mix(in oklch, hsl(200 80% 50%), white 20%);
}

.button:active {
  /* 與黑色混合產生點擊深色效果 */
  background: color-mix(in oklch, hsl(200 80% 50%), black 15%);
}

介面配色建議

在規劃 UI 介面時，許多人常面臨配色的難題：「文字該多黑？底色該多亮？要怎麼抓出足夠且舒適的閱讀對比度？」。除了依循 WCAG 的 AA 與 AAA 對比度標準檢查工具外（例如 Figma 的選色工具，就有提供檢測按鈕讓我們參考），還有沒有什麼其他方法呢？

這邊推薦一個比較簡單的配色方法，分享給大家試試看。這個方法是我從設計師勞哥的直播中學到的！我覺得這個方法很適合推薦給對於介面配色比較沒有概念的人！方法很簡單，主要是利用 HSL 模型建立一套直覺且具系統性的調色流程。

為什麼要使用 HSL 呢？因為比起 RGB 或 HEX 格式，HSL 將「色相 (H)」、「飽和度 (S)」與「明度 (L)」拆開，能讓我們更專注透過控制明度 (L) 來精準掌控介面的層次。實際該怎麼做，主要有四個步驟：

建立明暗基準：繪製純黑～純白的灰階軸
- 介面設計的核心在於「明暗階層」。色彩雖然能帶來視覺吸引力，但決定排版易讀性與功能劃分的關鍵在於「明度對比」。
- 在開始加入任何品牌色彩前，先以一條由純黑（0%）到純白（100%）的漸層光譜作為整體介面的明暗基準線。
使用 HSL 調色：固定色相 (H)、飽和度 (S)，調整明度 (L)

以「灰階」的狀況為例，將色相 (H) 與飽和度 (S) 皆固定為 0%，就可以專注調整明度值 (L) 。如果是「其他顏色」也一樣，選定色相 (H) 與飽和度 (S) 後就固定，只調整明度值 (L) 即可。

透過直接量化 (L) 的百分比，我們能有條理地分配背景、邊框、次要元素與文字的視覺重量。
```
/* HSL 灰階基礎：固定 H=0, S=0%，僅調動 L 即可精準掌控明暗 */
color: hsl(0 0% L);
color: hsl(0 0% 0);
color: hsl(0 0% 20);
color: hsl(0 0% 40);
color: hsl(0 0% 60);
color: hsl(0 0% 80);
color: hsl(0 0% 100);
```
定義灰階層次與品牌主色
- 介面基礎灰階（以深色模式為例）
  - 背景底色 (Background)：L: 0% ～ 5%（最底層容器與頁面背景）
  - 柔和區塊 (Muted / Surface)：L: 10%（卡片底色、輸入框背景）
  - 次要邊框 / 分隔線 (Border / Secondary)：L: 15%（元件邊界、分割線）
  - 次要文字 (Muted Text)：L: 50% ～ 75%（說明文字、Placeholder、次要標籤）
  - 主要文字 (Main Text)：L: 95% ～ 100%（標題、內文主字）
  - 淺色模式切換：若要切換為淺色模式，只需將明度值反轉（例如：背景取 95% ～ 100%、文字取 5% ～ 15%）。
- 設定品牌色與強調色
  - 確定了灰階階層後，挑選一組品牌色相 (H) 與飽和度 (S)，套用標準明度！
  - 主要色 (Primary)：L: 50%（最平衡的品牌主色調，適合按鈕與焦點）
  - 強調/深層色 (Accent / Dark)：L: 15%（適合文字連結反白底、Hover 強化區）
自然化微調：模擬真實光影效果

如果僅單純固定飽和度 (S) 並拉動明度 (L)，產生的階層色有時會顯得呆板或帶有灰濁感。為了讓介面更具生動與和諧感，可以結合自然界的色彩光影規律進行微調：
- 淺色 / 高光區域（L 提高）：受到強光照射時，色彩純度會被光線稀釋，建議**適度降低飽和度 (S) **，呈現輕盈透亮感。
- 深色 / 陰影區域（L 降低）：陰影處通常伴隨色彩的濃縮沉澱，建議**適度提高飽和度 (S) **，避免暗部顏色看起來髒或發灰。