HEX vs RGB vs HSL vs CMYK：何時使用哪種顏色格式

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

看看這個珊瑚色。它是完全相同的顏色，但可以用四種不同的方式書寫：

每種格式都有其用途。選擇錯誤的格式不會破壞你的專案，但選擇正確的格式會節省時間、避免轉換錯誤，並在所有平台上保持品牌一致性。

本指南透過實例和快速參考表，準確說明何時使用每種格式。

HEX：網頁標準

是什麼： 一個6位十六進制代碼，表示紅、綠、藍值。始終以 # 開頭。例如：#FF6F61 表示紅色255、綠色111、藍艨97。

何時使用 HEX

• CSS 樣式表 — 這是大多數網頁開發者使用和期望的預設格式。
• 設計工具 — Figma、Sketch 和 Canva 在顏色選擇器中突出顯示 HEX。
• 品牌指南 — 大多數品牌指南以 HEX 列出顏色，因為它簡短且易於複製貼上。
• 溝通 — 當你需要在 Slack 或電子郵件中分享精確顏色時，HEX 被普遍理解。

何時不使用 HEX

• 需要透明度時 — HEX 不原生支援 alpha。8位 HEX（#FF6F6180）可以使用，但工具之間的支援不一致。
• 程式化顏色操作 — 加亮或加深 HEX 顏色需要先進行轉換。
• 印刷設計 — 印刷使用 CMYK。將 HEX 發送給印刷廠會保證顏色不匹配。

實例：CSS 變數

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB：螢幕顏色模型

是什麼： 三個數字（0–255）表示紅、綠、藍 — 螢幕發出的實際光色。例如：rgb(255, 111, 97)。

何時使用 RGB

• 透明度（RGBA） — rgba(255, 111, 97, 0.5) 可以精確控制不透明度。這是 CSS 中半透明顏色最廣泛支援的方法。
• 應用程式開發 — Swift、Kotlin 和 Flutter 內部使用 RGB 值。使用 RGB 工作可避免不必要的轉換。
• LED 照明和 IoT — LED 燈帶和智慧燈泡期望 RGB 值。
• 顏色數學 — 混合兩種顏色或在它們之間插值在 RGB 中是簡單的算術。

何時不使用 RGB

• 印刷設計 — RGB 值不直接對應油墨混合。發送到印刷廠前始終轉換為 CMYK。
• 調整飽和度或亮度 — 在 RGB 中改變飽和度需要複雜的公式。HSL 更簡單。

實例：React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL：設計師的格式

是什麼： 三個值 — 色相（0–360°，色輪上的位置）、飽和度（0–100%%，從灰色到鮮豔）和亮度（0–100%%，從黑到白）。例如：hsl(5, 100%%, 69%%)。

何時使用 HSL

• 設計系統 — 保持色相和飽和度不變，只改變亮度，即可建立完整的顏色譜。
• 深色模式 — 生成深色變體只需降低亮度。無需猜測，無需公式。
• 程式化顏色生成 — 需要12種等距顏色？保持飽和度和亮度不變，色相每次30°。
• 無障礙設計 — 能直接讀取亮度值，檢查對比度更直觀。

何時不使用 HSL

• 團隊溝通 — 大多數人不以色相/飽和度/亮度思考。對話中 HEX 或 RGB 更清晰。
• 印刷工作流 — HSL 在印刷中沒有直接等價物。先轉換為 CMYK。

實例：使用 Tailwind CSS 建立顏色譜

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK：印刷格式

是什麼： 四個值 — 青、品紅、黃和黑（Key）。與 RGB（加光）不同，CMYK 是減色的 — 描述多少油墨從白紙上吸收光線。例如：0, 56, 62, 0。

何時使用 CMYK

• 所有印刷品 — 名片、海報、包裝、雜誌。如果經過印刷廠，必須是 CMYK。
• InDesign 和印刷工作流 — 從一開始就用 CMYK 設計，避免色域外顏色的意外。
• 打樣 — 螢幕打樣模擬印表機輸出 — 這只有在來源顏色已經是 CMYK 時才有效。

何時不使用 CMYK

• 螢幕 — 顯示器使用光（RGB）。CMYK 值需要轉換，轉換始終是近似的。
• 照片編輯 — 編輯時用 RGB 工作。僅在印刷時作為最後一步轉換為 CMYK。

實例：從 Illustrator 匯出

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

快速參考表

速查表：專案類型 → 顏色格式

轉換：你需要知道的

• HEX ↔ RGB — 無損轉換。是同一顏色模型的不同表示。#FF6F61 完全等於 rgb(255, 111, 97)。
• RGB ↔ HSL — 無損轉換。是同一顏色集的不同數學表達。
• RGB → CMYK — 有損轉換。CMYK 的色域小於 RGB。螢幕上鮮豔的顏色在印刷時往往變暗淡。
• CMYK → RGB — 結果取決於使用的 ICC 設定檔。相同的 CMYK 值在不同設定檔下可能看起來不同。

Color Picker Camera 應用同時顯示四種格式 — 將手機對準現實世界的任何顏色，即時獲取 HEX、RGB、HSL 和 CMYK。無需手動轉換。

常見錯誤（以及如何避免）

1. 將 RGB 發送到印刷廠

印表機混合油墨，不是光。如果發送 RGB 檔案，印刷廠軟體會猜測 CMYK 轉換，結果很少與螢幕上看到的一致。始終從一開始就用 CMYK 設計印刷品。

2. 使用 HEX 實現透明度

8位 HEX（#FF6F6180）存在，但許多工具不識別它。使用 rgba() 或 hsla() 獲得可靠的透明度。

3. 僅用 HEX 建構設計系統

從 HEX 代碼生成淺色和深色色調需要反複試驗。HSL 允許直接改變亮度，使顏色譜可預測且一致。

4. CMYK → HEX 轉換時期望相同顏色

CMYK 的色域小於 RGB/HEX。轉回時顏色被近似，可能看起來暗淡或略有變化。始終進行視覺驗證。

常見問題

HEX 和 RGB 有什麼區別？

在可用顏色方面沒有區別。兩者都覆蓋相同的1670萬種顏色。HEX 只是用十六進制表示 RGB 值的更短方式。#FF6F61 = rgb(255, 111, 97)。唯一的實際區別是透明度支援：RGB 內建了 RGBA，而8位 HEX 支援有限。

什麼時候應該使用 CMYK？

當你的設計需要實際印刷時：名片、小冊子、海報、包裝。如果只在螢幕上查看，使用 HEX、RGB 或 HSL。

HSL 比 RGB 更好嗎？

不是更好，是對設計師來說更容易理解。如果需要建立配色方案、生成深色模式主題或檢查無障礙對比度，HSL 更直觀。對於框架期望 RGB 值的應用開發，使用 RGB。

有沒有同時顯示4種顏色格式的應用？

有。Color Picker Camera 讓你將手機對準現實世界的任何顏色，在一個螢幕上即時查看 HEX、RGB、HSL 和 CMYK 值。支援 iOS 和 Android。

總結

網頁用 HEX。應用和螢幕用 RGB。設計系統和主題用 HSL。印刷用 CMYK。

如果你處理現實世界的顏色 — 刷過漆的牆、布料樣本、招牌上的標誌 — Color Picker Camera 是你的現實世界顏色計算機。對準、擷取、即時獲取四種格式。

下載 iOS 版 下載 Android 版