--- title: "HEX、RGB、HSL 與 CMYK：該用哪種顏色格式，什麼時候用" author: "Lubor Šimůnek" date: 2026-03-21 modified: 2026-08-26 language: "zh-Hant" url: "https://appstoryo.com/zh-hant/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use" publisher: "AppStoryo (lapnito.cz s.r.o.)" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" category: "設計" keywords: ["設計", "article", "AppStoryo"] --- # HEX、RGB、HSL 與 CMYK：該用哪種顏色格式，什麼時候用 > 四種顏色格式，四種不同的用途。本指南結合網頁設計、印刷、社群媒體與應用程式開發的真實案例，說清楚 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 | 網頁、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 | | 品牌規範文件 | 四種全都要 | 不同團隊需要不同的格式 | ## 它們之間可以互相轉換嗎？ 可以——但有前提。 - **HEX ↔ RGB**——無損，它們是同一份資料的不同寫法。 - **RGB ↔ HSL**——無損，只是一次數學轉換。 - **RGB → CMYK**——有損。某些 RGB 顏色（鮮亮的藍、霓虹色、明亮的綠）無法在 CMYK 中重現。轉換會把它們替換成最接近的可印刷顏色，結果往往顯得更黯淡。 - **CMYK → RGB**——技術上可行，但結果取決於所使用的 ICC 描述檔。同一組 CMYK 數值，不同的轉換工具可能給出略有差異的 RGB 值。 如果需要隨時隨地快速轉換，一款能同時顯示四種格式的手機取色應用程式就是最快的工作流程。**[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)** 做的正是這件事——把相機對準任何顏色，就能並排看到 HEX、RGB、HSL 與 CMYK。輕點一下即可複製任一數值。[iPhone](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 與 [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) 皆可使用。 ## 常見錯誤 ### 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](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 能從相機或照片中擷取顏色，並同時顯示 HEX、RGB、HSL 與 CMYK。輕點任一數值即可複製。它就像一台面向真實世界的顏色格式計算機——拍一次，四種格式全到手。 ## 結論 網頁與快速溝通用 **HEX**。應用程式開發與透明度用 **RGB**。設計系統與顏色調整用 **HSL**。印刷用 **CMYK**。 你不需要只選一種——你需要的是在每種情境下用對那一種。而當你需要在它們之間轉換，或者想把真實世界的顏色一次擷取成四種格式時，手機取色應用程式就是最快的工具。 [下載 iPhone 版 Color Picker Camera](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | [下載 Android 版](https://play.google.com/store/apps/details?id=com.tomas.color_picker) --- Source: License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) Cite as: Lubor Šimůnek (2026). HEX、RGB、HSL 與 CMYK：該用哪種顏色格式，什麼時候用. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/zh-hant/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use