色彩模型解析：RGB、HSL、HEX 完整介紹
無論你是網頁設計師、UI 開發者還是數位藝術家，理解色彩模型是精準控制顏色的第一步。不同的色彩模型以不同的方式描述顏色，各有各的優勢與適用場景。本文將深入解析最常用的三種色彩模型：RGB、HSL 和 HEX，幫助你在工作中做出更好的色彩選擇。
什麼是色彩模型？
色彩模型（Color Model）是一種用數學方式描述顏色的系統。它定義了一組基本色彩分量，透過這些分量的不同組合來表示各種顏色。不同的色彩模型源自不同的需求：有些是為了螢幕顯示而設計，有些則是為了印刷，還有些是為了讓人類更直覺地理解顏色。
在數位設計與網頁開發中，最常接觸的色彩模型包括 RGB（加色模型）、HSL（人類直覺模型）和 HEX（十六進位表示法）。它們其實描述的是同一個色彩空間，只是表示方式不同。
RGB：螢幕顯示的基礎
RGB 代表 Red（紅）、Green（綠）、Blue（藍），是一種加色模型（Additive Color Model）。它模擬了螢幕發光的原理：螢幕上的每個像素都由紅、綠、藍三個子像素組成，透過控制每個子像素的亮度來混合出各種顏色。
RGB 的運作方式
每個色彩通道的值從 0 到 255，共有 256 個亮度等級。三個通道的組合可以產生 256 × 256 × 256 = 16,777,216 種不同的顏色。
- rgb(255, 0, 0) — 純紅色（紅色全開，其他關閉）
- rgb(0, 255, 0) — 純綠色
- rgb(0, 0, 255) — 純藍色
- rgb(255, 255, 255) — 白色（三色全開）
- rgb(0, 0, 0) — 黑色（三色全關）
重點摘要：RGB 是所有螢幕顯示的基礎，CSS 中使用 rgb() 或 rgba() 函數來指定顏色。RGBA 多了一個 Alpha 通道，用於控制透明度。
HEX：RGB 的簡寫形式
HEX（Hexadecimal，十六進位）本質上就是 RGB 的另一種寫法。它用六個十六進位字元來表示 RGB 的三個通道值，前面加上 # 號。
HEX 的格式
一個 HEX 色碼由六個字元組成，每兩個字元代表一個通道：
| 格式 | 說明 | 範例 |
|---|---|---|
| #RRGGBB | 標準六位格式 | #FF5733 |
| #RGB | 簡寫格式（每位重複） | #F00 = #FF0000 |
| #RRGGBBAA | 含透明度的八位格式 | #FF573380 |
HEX 是網頁開發中最常用的色彩格式，因為它簡潔且容易複製貼上。設計工具如 Figma、Sketch 預設都使用 HEX 格式。
HSL：更符合人類直覺的色彩模型
HSL 代表 Hue（色相）、Saturation（飽和度）、Lightness（亮度）。相較於 RGB 用三個色光的混合來描述顏色，HSL 更貼近人類描述顏色的方式。
HSL 的三個維度
- 色相（Hue） — 0° 到 360° 的角度值，對應色環上的位置。0° 是紅色，120° 是綠色，240° 是藍色。
- 飽和度（Saturation） — 0% 到 100%，控制顏色的鮮豔程度。0% 是灰色，100% 是最鮮豔的顏色。
- 亮度（Lightness） — 0% 到 100%，控制明暗。0% 是黑色，50% 是標準亮度，100% 是白色。
為什麼 HSL 對設計師很重要？當你需要調整一個顏色的深淺或鮮豔度時，在 HSL 中只需要改變一個數值。在 RGB 中，你可能需要同時調整三個數值才能達到同樣的效果。
三種模型的比較
| 特性 | RGB | HEX | HSL |
|---|---|---|---|
| 直覺性 | 低 | 低 | 高 |
| CSS 支援 | 完整 | 完整 | 完整 |
| 設計工具 | 常用 | 預設 | 輔助 |
| 調整深淺 | 困難 | 困難 | 容易 |
| 建立色階 | 困難 | 困難 | 容易 |
| 透明度支援 | RGBA | 八位格式 | HSLA |
其他重要的色彩模型
CMYK — 印刷用色彩模型
CMYK（Cyan、Magenta、Yellow、Key/Black）是減色模型，用於印刷。與 RGB 的加色原理相反，CMYK 是透過墨水吸收光線來呈現顏色。如果你的設計需要印刷，必須從 RGB 轉換為 CMYK。
CIE Lab — 設備無關的色彩模型
CIE Lab 色彩空間由國際照明委員會（CIE）定義，是一個與設備無關的色彩空間。它能更準確地描述人眼所能感知的所有顏色，常用於色彩管理與色彩科學。CSS Color Level 4 規範已經加入了 lab() 函數的支援。
實際應用建議
在日常設計與開發工作中，建議根據場景選擇合適的色彩模型：
- 寫 CSS 時：使用 HSL 建立色彩系統（如主色的不同深淺變體），用 HEX 指定固定顏色
- 與設計師溝通：使用 HEX，因為這是設計工具的共通語言
- 需要透明度時：使用 RGBA 或 HSLA
- 程式化產生顏色：使用 HSL，因為色相的線性變化能產生自然的色彩漸變
結語
RGB、HEX 和 HSL 是同一個色彩空間的三種不同表示方式。理解它們各自的特性和優勢，能讓你在設計與開發中更靈活地運用色彩。無論你使用哪種模型，最終呈現在螢幕上的顏色都是一樣的 — 重要的是選擇最適合當下工作流程的表示方式。
參考文獻
- W3C. "CSS Color Module Level 4." W3C Candidate Recommendation, 2022. https://www.w3.org/TR/css-color-4/
- CIE. "Colorimetry — Part 4: CIE 1976 L*a*b* Colour Space." CIE International Standard, 2007. https://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space
- Munsell, A.H. "A Color Notation." Geo. H. Ellis Co., 1905. Munsell Color System reference at https://munsell.com/about-munsell-color/
- Mozilla Developer Network. "CSS color value." MDN Web Docs, 2024. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value