HEX、RGB、HSL 與 CMYK：該用哪種顏色格式，什麼時候用

同一種顏色，四種不同的語言

隨便挑一種顏色——比如一抹溫暖的珊瑚色。現在用四種方式來描述它：

• HEX： #E8635A
• RGB： rgb(232, 99, 90)
• HSL： hsl(4, 75%, 63%)
• CMYK： 0, 57, 61, 9

這四種寫法描述的是完全相同的一種顏色。它們並非互相競爭的標準，而是針對不同情境最佳化的顏色表示方式。困惑的根源在於不清楚哪種情境該用哪種格式。

本指南以淺白的語言拆解每一種格式：它是什麼、如何運作、什麼時候該用、什麼時候是錯誤的選擇。只要你的工作會接觸到顏色——設計、開發、印刷、行銷——這篇文章都能幫你避免為專案選錯格式。

HEX：網頁的標準

它是什麼

HEX（十六進位）是以井字號開頭的六位字元代碼：#E8635A。每兩位字元分別以十六進位記法（00 到 FF）表示紅、綠、藍三個通道。

它在功能上與 RGB 完全相同，只是寫法不同。#E8635A 就等於 rgb(232, 99, 90)。HEX 只是書寫 RGB 數值的一種更精簡的方式。

什麼時候用 HEX

• CSS 與網頁開發——HEX 是 CSS 中預設的顏色寫法，所有瀏覽器都能辨識。color: #E8635A; 是網頁上最常見的顏色指定方式。
• 設計工具——Figma、Sketch、Adobe XD 和 Canva 都以 HEX 作為主要輸入格式。設計師說「這個藍是 #3B82F6」，所有人都明白指的是什麼。
• 品牌規範——數位品牌手冊幾乎總會列出 HEX 值，因為它簡短、沒有歧義、方便複製貼上。
• 快速溝通——在 Slack 訊息裡說「用 #333」比說「用 rgb(51, 51, 51)」快得多。

什麼時候不該用 HEX

• 需要透明度時——標準的六位 HEX 不支援透明通道。你得用八位 HEX（#E8635A80），可讀性更差，不如直接改用 RGBA。
• 需要以程式方式調整顏色時——「把這個顏色調亮 20%」在 HEX 裡幾乎無法心算。這類需求 HSL 好用得多。
• 印刷製作——印刷廠從來不用 HEX，一次也沒有。

實際範例

你正在為到達頁面撰寫 CSS。設計師給了你一份包含品牌色的風格指南，於是你寫下：

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX 在這裡非常合適：精簡、易讀，而且到處都支援。

RGB：螢幕的顏色模型

它是什麼

RGB 代表 Red（紅）、Green（綠）、Blue（藍）——螢幕用來混合出你所見一切顏色的三種光色。每個通道的數值範圍是 0 到 255。rgb(232, 99, 90) 表示 232 單位的紅、99 單位的綠與 90 單位的藍。

RGB 是所有數位顏色的基礎。HEX 只是 RGB 的另一種寫法，HSL 則是對 RGB 做了更貼近人類直覺的轉換。螢幕上的一切最終都會變成傳送給像素的 RGB 數值。

什麼時候用 RGB

• 需要透明度時——RGBA 增加了一個透明通道：rgba(232, 99, 90, 0.5) 表示 50% 不透明度。這比八位 HEX 清楚得多，並且在 CSS、設計工具與程式語言中獲得廣泛支援。
• 程式開發與應用程式開發——Swift、Kotlin、Flutter、React Native 等應用程式框架內部通常直接使用 RGB/RGBA 數值。
• LED 與燈光——智慧燈具（Philips Hue、LED 燈條）使用 RGB 數值。如果你在為實體燈光裝置做設計，RGB 就是原生格式。
• 顏色運算——混合顏色、內插漸層或以程式產生顏色，在 RGB 中都非常直接。

什麼時候不該用 RGB

• 印刷——螢幕發出光（加色混合），紙張反射光（減色混合）。RGB 無法準確表達印刷機最終輸出的效果。
• 調整明度或飽和度——「把這個顏色的飽和度降低 30%」在 RGB 裡毫不直覺，你得先轉換成 HSL。

實際範例

你正在開發一個 React Native 應用程式，需要一層半透明的遮罩：

backgroundColor: 'rgba(0, 0, 0, 0.6)'

帶透明通道的 RGB 是最自然的選擇——直接、易讀，而且是繪製引擎的原生格式。

HSL：設計師的格式

它是什麼

HSL 代表 Hue（色相）、Saturation（飽和度）、Lightness（明度）：

• 色相（0°–360°）——顏色本身，也就是它在色相環上的位置。0° 是紅，120° 是綠，240° 是藍。
• 飽和度（0%–100%）——顏色有多鮮豔。0% 是灰色，100% 是該色相最純粹的形態。
• 明度（0%–100%）——顏色有多亮或多暗。0% 是黑，100% 是白，50% 才是這個顏色「原本」的樣子。

hsl(4, 75%, 63%) 的意思是：偏紅的色相（4°）、非常鮮豔（飽和度 75%）、略偏亮（63%）。

什麼時候用 HSL

• 設計系統與主題——HSL 是建立一致色階的最佳格式。想要主色的十個深淺層級嗎？保持色相不變，把明度從 10% 變到 95% 即可。想要低調一點的版本？把飽和度降下來。這在 HEX 或 RGB 中幾乎不可能憑直覺完成。
• 深色模式 / 淺色模式——切換主題本質上就是調整明度與飽和度，而這正好對應 HSL 的參數。Tailwind CSS、Radix Colors 以及許多現代設計系統都建立在 HSL 之上。
• 以程式產生顏色——從單一基礎色衍生出滑鼠停留狀態、停用狀態、背景色與框線色，在 HSL 中輕而易舉：較亮的變體是 hsl(4, 75%, 73%)，較暗的是 hsl(4, 75%, 43%)。
• 無障礙設計——當你能直接看到並調整明度時，對比度檢查會變得更加直覺。

什麼時候不該用 HSL

• 跨團隊溝通——大多數人不會用角度與百分比思考顏色。在設計交付時，說「按鈕是 hsl(4, 75%, 63%)」遠不如說「按鈕是 #E8635A」來得清楚。
• 印刷——和 RGB 一樣，HSL 也是螢幕顏色模型。

實際範例

你正在用 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：印刷的格式

它是什麼

CMYK 代表 Cyan（青）、Magenta（洋紅）、Yellow（黃）、Key（黑）。它把顏色描述為塗在白紙上的油墨混合。每個數值的範圍是 0% 到 100%：0, 57, 61, 9 表示 0% 青、57% 洋紅、61% 黃與 9% 黑。

與靠疊加光線來成色的 RGB 不同，CMYK 是從白紙上做減法。油墨越多，顏色越暗。這就是它被稱為減色顏色模型的原因。

什麼時候用 CMYK

• 印刷設計——名片、宣傳手冊、包裝、海報、雜誌。任何送去商業印刷廠的檔案都應當採用 CMYK 色彩模式。
• 在 InDesign、Illustrator 中準備印刷檔案——這些工具讓你在 CMYK 模式下工作，預覽顏色印在紙上的效果（永遠不如螢幕上鮮豔）。
• 色彩打樣——檢查你設計中的顏色能否用 CMYK 重現。某些鮮豔的 RGB 顏色（尤其是霓虹綠與電光藍）在物理上根本無法用 CMYK 印出來——它們「超出色域」。

什麼時候不該用 CMYK

• 任何顯示在螢幕上的東西——網站、應用程式、社群媒體、簡報、電子郵件。螢幕使用 RGB。為網站指定 CMYK，就像用海里來指路一樣——它確實是個距離單位，但對這段旅程毫無用處。
• 照片修圖——在 RGB 中修圖，只在最終為印刷輸出時才轉換為 CMYK。

實際範例

你用 Illustrator 設計了一張海報。送去印刷廠之前，你把文件轉換為 CMYK 色彩模式（File → Document Color Mode → CMYK Color），檢查超出色域的警告，並調整那些變成混濁藍綠色的電光藍。最終的 PDF 以 CMYK 儲存，並附上印刷廠的 ICC 描述檔。

速查表

對照表：什麼工作用什麼格式

它們之間可以互相轉換嗎？

可以——但有前提。

• HEX ↔ RGB——無損，它們是同一份資料的不同寫法。
• RGB ↔ HSL——無損，只是一次數學轉換。
• RGB → CMYK——有損。某些 RGB 顏色（鮮亮的藍、霓虹色、明亮的綠）無法在 CMYK 中重現。轉換會把它們替換成最接近的可印刷顏色，結果往往顯得更黯淡。
• CMYK → RGB——技術上可行，但結果取決於所使用的 ICC 描述檔。同一組 CMYK 數值，不同的轉換工具可能給出略有差異的 RGB 值。

如果需要隨時隨地快速轉換，一款能同時顯示四種格式的手機取色應用程式就是最快的工作流程。Color Picker Camera: HEX RGB 做的正是這件事——把相機對準任何顏色，就能並排看到 HEX、RGB、HSL 與 CMYK。輕點一下即可複製任一數值。iPhone 與 Android 皆可使用。

常見錯誤

1. 用 RGB 做印刷設計

這是最典型的新手錯誤。你在 Photoshop 的 RGB 模式下做了一張色彩鮮豔的海報，送到印刷廠後成品卻灰濛濛的——綠色與藍色尤其明顯。輸出印刷檔案前務必轉換為 CMYK，並檢查色域警告。

2. 需要透明度時卻用 HEX

如果你的設計需要半透明遮罩、陰影或毛玻璃效果，請改用 RGBA 或 HSLA。標準的六位 HEX 不帶有不透明度資訊，而八位 HEX 因為難以閱讀而很少被使用。

3. 用 HEX 建構設計系統

「#3B82F6 但要亮 20%」需要轉換、計算，再轉換回來。而在 HSL 裡：把明度加 20% 就行了。設計權杖、主題產生器與現代 CSS 自訂屬性在 HSL 下運作得好得多。

4. 把 CMYK 轉成 HEX 用於網頁，還期待顏色一樣

為印刷而以 CMYK 定義的品牌色，粗率地轉成 HEX 用於網頁時會看起來不一樣。正確的做法是：在螢幕上以視覺比對印刷成品的顏色，然後為數位用途單獨定義 HEX 值。品牌規範應當同時包含兩者。

常見問題

HEX 和 RGB 有什麼差別？

顏色上毫無差別，只是寫法不同。HEX 用十六進位書寫同樣的紅/綠/藍數值。#FF0000 與 rgb(255, 0, 0) 完全相同。HEX 輸入較短；RGB 更方便以程式修改，而且支援透明通道（RGBA）。

什麼時候該用 CMYK 而不是 RGB？

當你的最終成品會印在實體材料上時——紙張、卡紙、織品、塑膠。如果它只停留在螢幕上，就用 RGB（或 HEX/HSL）；如果要付印，就在輸出階段切換到 CMYK。

HSL 比 HEX 更好嗎？

就設計系統、主題與顏色調整而言，是的。就快速溝通與複製貼上到各種工具而言，HEX 更實用。它們描述的是同樣的顏色，HSL 只是把資訊組織成更貼近人類思考顏色的方式（色相 → 鮮豔度 → 明亮度）。

我的手機能同時顯示四種格式嗎？

可以。Color Picker Camera: HEX RGB 能從相機或照片中擷取顏色，並同時顯示 HEX、RGB、HSL 與 CMYK。輕點任一數值即可複製。它就像一台面向真實世界的顏色格式計算機——拍一次，四種格式全到手。

結論

網頁與快速溝通用 HEX。應用程式開發與透明度用 RGB。設計系統與顏色調整用 HSL。印刷用 CMYK。

你不需要只選一種——你需要的是在每種情境下用對那一種。而當你需要在它們之間轉換，或者想把真實世界的顏色一次擷取成四種格式時，手機取色應用程式就是最快的工具。

下載 iPhone 版 Color Picker Camera | 下載 Android 版

下載 PDF

其他格式: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

授權條款: CC BY 4.0