隨便挑一種顏色——比如一抹溫暖的珊瑚色。現在用四種方式來描述它：
這四種寫法描述的是完全相同的一種顏色。它們並非互相競爭的標準，而是針對不同情境最佳化的顏色表示方式。困惑的根源在於不清楚哪種情境該用哪種格式。
本指南以淺白的語言拆解每一種格式：它是什麼、如何運作、什麼時候該用、什麼時候是錯誤的選擇。只要你的工作會接觸到顏色——設計、開發、印刷、行銷——這篇文章都能幫你避免為專案選錯格式。
HEX（十六進位）是以井字號開頭的六位字元代碼：#E8635A。每兩位字元分別以十六進位記法（00 到 FF）表示紅、綠、藍三個通道。
它在功能上與 RGB 完全相同，只是寫法不同。#E8635A 就等於 rgb(232, 99, 90)。HEX 只是書寫 RGB 數值的一種更精簡的方式。
color: #E8635A; 是網頁上最常見的顏色指定方式。#E8635A80），可讀性更差，不如直接改用 RGBA。你正在為到達頁面撰寫 CSS。設計師給了你一份包含品牌色的風格指南，於是你寫下：
:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }
HEX 在這裡非常合適：精簡、易讀，而且到處都支援。
RGB 代表 Red（紅）、Green（綠）、Blue（藍）——螢幕用來混合出你所見一切顏色的三種光色。每個通道的數值範圍是 0 到 255。rgb(232, 99, 90) 表示 232 單位的紅、99 單位的綠與 90 單位的藍。
RGB 是所有數位顏色的基礎。HEX 只是 RGB 的另一種寫法，HSL 則是對 RGB 做了更貼近人類直覺的轉換。螢幕上的一切最終都會變成傳送給像素的 RGB 數值。
rgba(232, 99, 90, 0.5) 表示 50% 不透明度。這比八位 HEX 清楚得多，並且在 CSS、設計工具與程式語言中獲得廣泛支援。你正在開發一個 React Native 應用程式，需要一層半透明的遮罩：
backgroundColor: 'rgba(0, 0, 0, 0.6)'
帶透明通道的 RGB 是最自然的選擇——直接、易讀，而且是繪製引擎的原生格式。
HSL 代表 Hue（色相）、Saturation（飽和度）、Lightness（明度）：
hsl(4, 75%, 63%) 的意思是：偏紅的色相（4°）、非常鮮豔（飽和度 75%）、略偏亮（63%）。
hsl(4, 75%, 73%)，較暗的是 hsl(4, 75%, 43%)。你正在用 Tailwind CSS 建構設計系統，需要一套一致的色階：
--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);
相同的色相、相同的飽和度、不同的明度。30 秒就能得到完美的色階。換成 HEX 試試看。
CMYK 代表 Cyan（青）、Magenta（洋紅）、Yellow（黃）、Key（黑）。它把顏色描述為塗在白紙上的油墨混合。每個數值的範圍是 0% 到 100%：0, 57, 61, 9 表示 0% 青、57% 洋紅、61% 黃與 9% 黑。
與靠疊加光線來成色的 RGB 不同，CMYK 是從白紙上做減法。油墨越多，顏色越暗。這就是它被稱為減色顏色模型的原因。
你用 Illustrator 設計了一張海報。送去印刷廠之前，你把文件轉換為 CMYK 色彩模式（File → Document Color Mode → CMYK Color），檢查超出色域的警告，並調整那些變成混濁藍綠色的電光藍。最終的 PDF 以 CMYK 儲存，並附上印刷廠的 ICC 描述檔。
| 格式 | 最適合 | 數值範圍 | 支援透明度 | 人類可讀性 | 適合印刷 |
|---|---|---|---|---|---|
| HEX | 網頁、CSS、品牌手冊 | #000000 – #FFFFFF | 僅八位（#RRGGBBAA） | 中 | 否 |
| RGB | 螢幕、應用程式、漸層 | 每通道 0–255 | 是（RGBA） | 中 | 否 |
| HSL | 設計系統、主題 | 0°–360°、0%–100%、0%–100% | 是（HSLA） | 高 | 否 |
| CMYK | 印刷、包裝 | 每通道 0%–100% | 否 | 低 | 是 |
| 你的專案 | 使用格式 | 原因 |
|---|---|---|
| 網站 CSS | HEX 或 HSL | 求簡潔用 HEX；需要主題的設計系統用 HSL |
| 行動應用程式（iOS/Android） | RGB/RGBA | 原生框架內部使用 RGB |
| Figma / Sketch 設計檔 | HEX | 設計工具的標準輸入格式 |
| 設計系統 / 設計權杖 | HSL | 在 HSL 中產生色階與變體極為簡單 |
| 社群媒體圖片 | HEX 或 RGB | 純數位用途；Canva 與 Photoshop 都支援 |
| 名片 / 宣傳手冊 | CMYK | 要送到實體印刷機上 |
| 產品包裝 | CMYK + Pantone | 兼顧印刷與品牌色的一致性 |
| 電子郵件範本 | HEX | 郵件軟體對 HEX 的支援穩定可靠 |
| 智慧燈 / LED | RGB | LED 硬體原生使用 RGB |
| 品牌規範文件 | 四種全都要 | 不同團隊需要不同的格式 |
可以——但有前提。
如果需要隨時隨地快速轉換，一款能同時顯示四種格式的手機取色應用程式就是最快的工作流程。Color Picker Camera: HEX RGB 做的正是這件事——把相機對準任何顏色，就能並排看到 HEX、RGB、HSL 與 CMYK。輕點一下即可複製任一數值。iPhone 與 Android 皆可使用。
這是最典型的新手錯誤。你在 Photoshop 的 RGB 模式下做了一張色彩鮮豔的海報，送到印刷廠後成品卻灰濛濛的——綠色與藍色尤其明顯。輸出印刷檔案前務必轉換為 CMYK，並檢查色域警告。
如果你的設計需要半透明遮罩、陰影或毛玻璃效果，請改用 RGBA 或 HSLA。標準的六位 HEX 不帶有不透明度資訊，而八位 HEX 因為難以閱讀而很少被使用。
「#3B82F6 但要亮 20%」需要轉換、計算，再轉換回來。而在 HSL 裡：把明度加 20% 就行了。設計權杖、主題產生器與現代 CSS 自訂屬性在 HSL 下運作得好得多。
為印刷而以 CMYK 定義的品牌色，粗率地轉成 HEX 用於網頁時會看起來不一樣。正確的做法是：在螢幕上以視覺比對印刷成品的顏色，然後為數位用途單獨定義 HEX 值。品牌規範應當同時包含兩者。
顏色上毫無差別，只是寫法不同。HEX 用十六進位書寫同樣的紅/綠/藍數值。#FF0000 與 rgb(255, 0, 0) 完全相同。HEX 輸入較短；RGB 更方便以程式修改，而且支援透明通道（RGBA）。
當你的最終成品會印在實體材料上時——紙張、卡紙、織品、塑膠。如果它只停留在螢幕上，就用 RGB（或 HEX/HSL）；如果要付印，就在輸出階段切換到 CMYK。
就設計系統、主題與顏色調整而言，是的。就快速溝通與複製貼上到各種工具而言，HEX 更實用。它們描述的是同樣的顏色，HSL 只是把資訊組織成更貼近人類思考顏色的方式（色相 → 鮮豔度 → 明亮度）。
可以。Color Picker Camera: HEX RGB 能從相機或照片中擷取顏色，並同時顯示 HEX、RGB、HSL 與 CMYK。輕點任一數值即可複製。它就像一台面向真實世界的顏色格式計算機——拍一次，四種格式全到手。
網頁與快速溝通用 HEX。應用程式開發與透明度用 RGB。設計系統與顏色調整用 HSL。印刷用 CMYK。
你不需要只選一種——你需要的是在每種情境下用對那一種。而當你需要在它們之間轉換，或者想把真實世界的顏色一次擷取成四種格式時，手機取色應用程式就是最快的工具。
" }