色碼完全指南：RGB、HEX、HSL 的轉換原理與設計應用

無論你是前端工程師、UI 設計師，還是偶爾需要在網頁上換個顏色的非技術人員，都免不了碰到 #FF6347、rgb(255,99,71)、hsl(9,100%,64%) 這類奇妙數字。它們都代表同一個顏色——番茄紅，卻用完全不同的方式描述。本文從光學物理出發，逐一解析每種色彩模型的設計邏輯、互相換算的方法，以及在設計與開發實務中如何選用。

一、色碼是什麼？為什麼需要多種色彩模型？

人眼可感知的可見光波長約在 380 nm（紫色端）到 700 nm（紅色端）之間，但這套連續光譜對電腦而言太難計算——電腦需要一套明確的數字語言。不同的色彩模型（Color Model）從不同切入點描述顏色：有些模仿光的物理疊加特性，有些考量印刷油墨的現實需求，有些則從人類的視覺感知與認知出發。每種模型都有其適用情境，選哪種取決於「你在為什麼媒介設計」。

簡單說：螢幕顯示用 RGB、HEX 或 HSL；印刷輸出用 CMYK；設計師調色時偏好 HSL；工程師寫 CSS 時最常貼 HEX。清楚這個大框架，後面的細節就容易上手了。

二、RGB：光的加法混色，數位世界的基礎

RGB 代表紅（Red）、綠（Green）、藍（Blue）三個顏色通道，每個通道的值從 0 到 255（8 位元 = 256 階），共可表達 256³ = 16,777,216 種顏色。RGB 屬於加法混色：三種光疊加在一起，最終得到白色；完全無光則是黑色。這與繪畫時混合顏料（越混越深）的直覺完全相反，但符合光的物理行為。

在 CSS 中，RGB 的常見寫法是 rgb(255, 99, 71)。若需要控制透明度，可使用 rgba(255, 99, 71, 0.5)，其中第四個參數 Alpha 介於 0（完全透明）至 1（完全不透明）之間。現代 CSS 也支援空格分隔語法：rgb(255 99 71 / 50%)，效果相同。

在硬體層面，幾乎所有螢幕技術——LCD、OLED、Micro-LED——都在驅動層面使用 RGB 三通道來控制每個像素的發光強度，RGB 是最接近底層物理現實的色彩語言。影像處理、電腦視覺、影片編碼等技術領域，同樣以 RGB 為基礎展開所有運算。

三、HEX：十六進位的色碼速記法

HEX 色碼（十六進位色碼）是 RGB 的另一種表示形式，格式為 #RRGGBB，其中每對字元代表一個 RGB 通道，以十六進位（0–9 + A–F）表示 0 到 255 的整數值。例如 #FF6347：

FF（紅）= 十進位 255
63（綠）= 十進位 99
47（藍）= 十進位 71

因此 #FF6347 與 rgb(255, 99, 71) 完全等價，只是書寫形式不同。若每個通道的兩位字元完全相同，可縮寫為三位：#F06 等同於 #FF0066；#FFF 等同於 #FFFFFF（純白）。

CSS 也支援八位 HEX，最後兩位代表 Alpha 透明度：#FF634780 代表 50% 透明的番茄紅（80 = 十進位 128，約等於 0.5 的 128/255）。HEX 格式的優點是簡潔、在程式碼中佔用字元少，且幾乎所有設計工具（Figma、Sketch、Adobe XD）都提供一鍵複製 HEX 的功能，使其成為前端開發與 CSS 的主流色碼格式。

四、HSL 與 HSB：以人類感知為中心的色彩描述

HSL 代表 Hue（色相）、Saturation（飽和度）、Lightness（亮度），設計上更貼近人類的視覺感知方式：

色相（Hue）：0 到 360°的角度值，對應色相環的位置。0° = 紅色、120° = 綠色、240° = 藍色、360° 又回到紅色。
飽和度（Saturation）：0% 為完全去飽和的灰階，100% 為最鮮豔的純色。
亮度（Lightness）：0% 為純黑，50% 為最自然的顯色亮度，100% 為純白。

HSL 最大的優勢是直覺性。對設計師來說，「把這個橘色調暗一點」，在 HSL 中只要降低 Lightness 即可；在 RGB 中則需要同時手動調整三個數值，且很難精準控制效果。CSS 原生支援 HSL 語法：hsl(9, 100%, 64%) 同樣代表番茄紅。

容易混淆的是 HSB（又稱 HSV）。HSB 的 B 代表 Brightness，與 Lightness 略有不同：HSB 的 100% Brightness 是「全亮純色」，而非白色；HSL 的 100% Lightness 則是純白，50% 才是最鮮豔的顯色。Photoshop、Illustrator 等 Adobe 工具傳統上使用 HSB，Figma 及 CSS 使用 HSL。

五、CMYK：印刷世界的四色減法混色

CMYK 代表青色（Cyan）、洋紅（Magenta）、黃色（Yellow）、黑色（Key/Black）。與 RGB 相反，油墨屬於減法混色：油墨吸收特定波長的光，混合越多顏料，反射回來的光越少，顏色越深。理論上 CMY 三色混合應可產生黑色，但實際上純 CMY 三色混合的「黑色」往往偏褐色且不夠飽和，加入獨立黑色通道 K 既可印出真正的黑色，也能減少大面積用黑時的油墨消耗。

CMYK 是平面設計印刷品（名片、海報、包裝盒）的標準色彩模型，但螢幕顯示並不適用。需要注意的是，RGB 的色域比 CMYK 更寬——螢幕上看到的某些高飽和電光色，在印刷上根本無法重現。若你在螢幕上設計後交付印刷廠，務必事先在設計軟體中做色域轉換與打樣確認，避免成品顏色嚴重偏差。

六、各色彩模型使用情境整理

模型	最適用情境	主要優點	主要限制
RGB	螢幕顯示、影像處理、程式計算	最接近物理底層、精確可計算	數值不直覺，調色困難
HEX	前端開發、CSS、設計稿標注	簡潔、複製方便、業界通用	無法直接「讀懂」顏色意義
HSL	UI 設計調色、CSS 動態主題、程式化調色盤	最符合人類視覺直覺	需轉換才能直接對應印刷
CMYK	印刷輸出、平面設計稿	與實體印刷流程吻合	不適用螢幕顯示，色域較窄

七、色彩換算的數學原理

HEX → RGB：將 HEX 字串的每兩位字元視為一個十六進位數轉換為十進位即可。例如 #1A2B3C：

R = 0x1A = 1×16 + 10 = 26
G = 0x2B = 2×16 + 11 = 43
B = 0x3C = 3×16 + 12 = 60

RGB → HSL（核心公式）：

將 R、G、B 各除以 255，正規化至 [0, 1] 區間。
找出三者中的最大值 max 與最小值 min，計算差值 delta = max − min。
Lightness L = (max + min) / 2。
若 delta = 0，飽和度 S = 0（灰階），色相 H = 0（無意義）；否則 S = delta / (1 − |2L − 1|)。
Hue 依最大值的通道計算角度：最大為 R 時 H = 60° × ((G−B)/delta mod 6)；最大為 G 時 H = 60° × ((B−R)/delta + 2)；最大為 B 時 H = 60° × ((R−G)/delta + 4)。

雖然手動推導這些公式很有教育價值，實際開發中只需使用色碼轉換工具即可即時完成任意格式互轉，不必每次自行計算。

八、WCAG 對比度規範與無障礙設計

WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引）規定了文字與背景顏色之間的最低對比比例，確保色弱、低視力使用者也能清楚識別畫面內容：

AA 等級（一般文字）：對比比例 ≥ 4.5:1
AA 等級（大型文字，≥ 18pt 或粗體 14pt）：對比比例 ≥ 3:1
AAA 等級（一般文字，最高標準）：對比比例 ≥ 7:1

對比比例的計算公式為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 ≥ L2，L1、L2 分別是兩種顏色的相對亮度（Relative Luminance）。相對亮度的計算需先對 sRGB 值做 Gamma 校正（線性化），再以加權公式 L = 0.2126R + 0.7152G + 0.0722B 合成。

實際例子：純黑色（#000000，L=0）與純白色（#FFFFFF，L=1）的對比比例為 (1 + 0.05) / (0 + 0.05) = 21:1，是能達到的最大值。常見的「淺灰色背景 + 中灰色文字」組合往往不達 4.5:1，導致部分使用者難以閱讀。全球約有 8% 的男性存在某種程度的色覺辨識障礙（最常見為紅綠色弱），達到 WCAG AA 等級是現代 UI 設計的基本門檻，而非可選項。

快速確認你的配色是否無障礙

使用對比度檢查工具輸入前景色與背景色的 HEX 值，工具會立即計算對比比例並告訴你是否符合 AA / AAA 等級。設計稿提交前養成這個習慣，比事後修改更有效率。

九、配色實戰：如何選出協調且可用的顏色組合

從主色出發，用 HSL 快速建立調色盤：確定一個品牌主色後，固定色相（H 值），調整飽和度與亮度，即可快速衍生出深色版（適合文字或邊框）、主色版（主要 CTA 按鈕）、淺色版（背景或 hover 狀態）。例如主色 hsl(211, 80%, 45%)，可衍生：

深色版：hsl(211, 80%, 25%)（降低 Lightness）
淺色版：hsl(211, 80%, 92%)（大幅提升 Lightness）
去飽和版：hsl(211, 15%, 45%)（降低 Saturation）

利用色相環決定配色關係：

互補色（Complementary）：色相差 180°，對比強烈，適合強調重點按鈕或視覺焦點。
類比色（Analogous）：色相差 30–60°，視覺和諧，適合背景層次和輔助色搭配。
三角配色（Triadic）：三色均勻分佈在色相環（相差 120°），活潑有層次，適合需要豐富色彩的介面。
分裂互補（Split-Complementary）：主色加上互補色兩側的色相，比直接互補更柔和而不失對比。

絕對不要單靠顏色傳遞資訊：大約 8% 的男性有色覺辨識障礙，若只以紅色代表「錯誤」、綠色代表「成功」，色弱使用者將無法分辨狀態。務必同時加入圖示（✓/✗）或文字說明，才符合無障礙友善設計原則。

十、色碼在現代 CSS 中的新語法

CSS Color Level 4 引入了新的色彩語法，讓前端開發更靈活：

color(display-p3 0.5 0.2 0.8)：支援 Display P3 廣色域，可表現比 sRGB 更鮮豔的顏色（需裝置與瀏覽器支援）。
oklch(60% 0.18 255)：基於感知亮度均勻的 OKLCH 色彩空間，色相旋轉時亮度更一致，是近年設計師社群討論最熱烈的新格式。
color-mix(in hsl, #FF6347 40%, #1E90FF)：直接在 CSS 中混合兩個顏色，無需 JavaScript 計算。

雖然這些新語法尚未全面普及，了解它們的方向有助於設計系統的長期規劃，尤其是正在採用 CSS Custom Properties 管理主題的專案。

結語

色碼不只是一串符號，背後承載著光學物理、人類感知心理學、印刷工藝、數位無障礙設計等多個領域的知識體系。了解 RGB 的加法混色本質，能讓你理解為什麼三個螢幕通道可以重現自然界的億萬色彩；掌握 HSL 的直覺邏輯，能讓你在設計調色時更快速且精準；熟知 WCAG 對比度規範，能讓你的作品真正做到人人可用。把這些原理內化後，色碼工具就不只是一個「輸入換算」的黑盒子，而是你手中真正理解的設計語言。