重點整理
HEX 和 RGB 是螢幕用的色碼，兩者完全等值，可以用公式精準互換，例如 #E87722 就是 rgb(232, 119, 34)。CMYK 是印刷用的油墨比例，從 RGB 換算只能求接近，實際數字要依印刷廠指定的色彩描述檔決定。想知道某個網頁用了什麼顏色，在 Chrome 按右鍵選「檢查」，3 個步驟就能查到色碼。
跟設計師、印刷廠或架站的工程師溝通時，常會收到一串像 #E87722、rgb(232, 119, 34) 或 C0 M49 Y85 K9 的文字，問「這個顏色可以嗎？」。看不懂這些色碼，就很難確認名片、網站和招牌用的是不是同一個品牌色。這篇用同一個橘色當例子，說明 HEX、RGB、HSL、CMYK 各是什麼、怎麼互相換算、為什麼印出來的顏色總是跟螢幕不一樣，最後示範用 Chrome 內建的開發者工具查出任何網頁上的色碼。
色碼是什麼？四種常見寫法一次看
色碼就是「用數字描述顏色」的方法。同一個顏色可以有好幾種寫法，就像同一個地點可以用地址或經緯度表示。下面是鵠崙設計品牌橘色的四種寫法：
| 色碼 | 代表什麼 | 主要用途 |
|---|---|---|
| HEX | 紅、綠、藍的強度，用十六進位寫成 6 碼 | 網頁、CSS、WordPress 主題與 Elementor 的顏色欄位 |
| RGB | 紅、綠、藍的強度，各 0–255 | 螢幕顯示、Photoshop 等設計軟體 |
| HSL | 色相（0–360 度）、飽和度、亮度 | CSS 調色，方便做同色系深淺 |
| CMYK | 青、洋紅、黃、黑四色油墨的比例（0–100%） | 名片、DM、包裝等印刷品 |
要記住的重點只有一個：HEX、RGB、HSL 都是螢幕的顏色，只是寫法不同，彼此可以精準換算；CMYK 是油墨的顏色，跟前三者是不同的系統。
HEX 色碼怎麼看？
HEX 色碼由「#」加上 6 個字元組成，每兩碼一組，依序代表紅（R）、綠（G）、藍（B）。每組的範圍是 00 到 FF，00 代表完全沒有這個顏色的光，FF 代表最強。所以：
#000000三色都沒有，是黑色；#FFFFFF三色全開，是白色。#FF0000只有紅色全開，是純紅。- 三組數字一樣時（例如
#808080）就是灰色，數字越大越淺。
另外兩種常見變化：
- 3 碼縮寫：每組兩碼相同時可以縮寫，
#FFCC00可以寫成#FC0。 - 8 碼含透明度：最後多兩碼代表透明度，
#E8772280是約 50% 透明的同一個橘色。
英文字母大小寫沒有差別，#e87722 和 #E87722 是同一個顏色。
HEX 和 RGB 怎麼互相換算？
HEX 和 RGB 是同一組數字的兩種寫法：RGB 用十進位（0–255），HEX 用十六進位（00–FF）。十六進位裡，0–9 照舊，A 到 F 分別代表 10 到 15。
HEX 轉 RGB：第一碼 × 16 + 第二碼
把 6 碼切成三組，每組的第一碼乘以 16，再加上第二碼：
以 #E87722 為例：E8 = 14 × 16 + 8 = 232；77 = 7 × 16 + 7 = 119；22 = 2 × 16 + 2 = 34。所以答案是 rgb(232, 119, 34)。
RGB 轉 HEX：除以 16，看商和餘數
反過來，把 RGB 每個數字除以 16，商是第一碼、餘數是第二碼，超過 9 的換成英文字母：
- 232 ÷ 16 = 14 餘 8 → 14 是 E，得到
E8。 - 119 ÷ 16 = 7 餘 7 →
77。 - 34 ÷ 16 = 2 餘 2 →
22。
平常不需要手算，設計軟體和線上工具都會自動換算；但看得懂原理，收到色碼時就能大概判斷顏色偏哪個方向，例如紅那組最大、藍那組最小，就知道是偏橘紅的暖色。
HSL 是什麼？什麼時候用得到？
HSL 把顏色拆成三個人比較好理解的數值：色相（H，0–360 度，0 是紅、120 是綠、240 是藍）、飽和度（S，0% 是灰、100% 最鮮豔）、亮度（L，0% 是黑、100% 是白）。
它最好用的地方是做同色系：品牌橘 hsl(26 81% 52%) 只要把亮度改成 40% 就是按鈕滑過時的深橘，改成 92% 就是很淡的背景色，色相和飽和度不動，整體看起來就很協調。現在的 CSS 可以直接寫 HSL，不用先換成 HEX。
RGB 怎麼轉成 CMYK？公式與限制
網路上常見的換算公式如下，先把 RGB 各除以 255 變成 0–1 之間的數（記為 R’、G’、B’）：
- K（黑）= 1 − 三者中最大的值
- C（青）=（1 − R’ − K）÷（1 − K）
- M（洋紅）=（1 − G’ − K）÷（1 − K）
- Y（黃）=（1 − B’ − K）÷（1 − K）
套用到 rgb(232, 119, 34)：R’ ≈ 0.910、G’ ≈ 0.467、B’ ≈ 0.133，K = 1 − 0.910 ≈ 0.09；C = 0、M ≈ 0.49、Y ≈ 0.85。換成百分比就是 C0 M49 Y85 K9。
不過這個公式只適合拿來估算。實際印刷時，同一個 RGB 顏色會依照指定的色彩描述檔（例如印刷廠常用的 Japan Color 或 FOGRA 系列）換算出不同的 CMYK 數值。要交給印刷廠的檔案，建議在 Illustrator 或 Photoshop 裡用印刷廠指定的描述檔轉換，或直接請印刷廠提供建議色值。如果需要更精準的特別色，可以參考用 CMYK 找出 Pantone 接近色的做法。
為什麼印刷出來的顏色跟螢幕不一樣？
這是最常見的抱怨：螢幕上鮮豔的橘色，印成 DM 卻變得暗暗的。原因是螢幕和印刷用的是兩種完全相反的混色方式：
- 色域不同：螢幕是發光的，紅綠藍光疊加可以做出很亮的螢光色；油墨是吸收光線，能呈現的顏色範圍比較小。超出範圍的顏色印刷時只能換成最接近的顏色，通常會變暗、變灰。
- 紙張不同：亮面銅版紙和吸墨的模造紙，印同一組 CMYK 的深淺和鮮豔度也會不一樣。
- 螢幕本身沒校色：每台螢幕、手機的亮度與色溫不同，你在螢幕上看到的顏色本來就不一定準。
- 轉換方式不同：RGB 轉 CMYK 時選用的色彩描述檔不同，結果就會偏色。
實務建議：品牌色一開始就同時定好「網頁用的 HEX」和「印刷用的 CMYK」兩組數值，寫進品牌規範，而不是每次都從 RGB 臨時換算；重要的印刷品先請印刷廠打樣確認。
怎麼查出網頁上用的色碼？用 Chrome 開發者工具
看到別的網站顏色很好看，或想確認自己網站的按鈕到底是哪個色碼，不用裝任何軟體，Chrome 內建的開發者工具就能查。
步驟一：在要查的地方按右鍵，選「檢查」
在按鈕、標題或背景上按滑鼠右鍵，選單最下方點「檢查」。也可以用快速鍵：Windows 按 F12 或 Ctrl + Shift + I，Mac 按 Cmd + Option + I。
步驟二：在「樣式」分頁找到顏色屬性
開發者工具會在畫面右側或下方打開，上方「元素」分頁會自動選取你按右鍵的那個元素。下方「樣式」分頁列出它的 CSS，找 color（文字顏色）、background-color 或 background（背景色）、border-color（框線顏色），後面就是色碼，前面還有一個小色塊。
步驟三：點小色塊打開調色盤
點色碼前面的小色塊，會跳出調色盤，顯示目前的顏色與色碼。
調色盤裡有幾個實用功能：
- 切換色碼格式：點色碼欄位右側的上下箭頭，可以在 HEX、RGB、HSL 等格式之間切換，直接看到換算後的數值。
- 滴管：點左邊的滴管圖示，再到網頁上任何位置點一下，就能吸取那個像素的顏色，連圖片裡的顏色也可以。
- 即時試色：在調色盤裡拖曳改色，網頁會立即跟著變化，方便先試看看再決定要不要改。這裡的修改只存在你的瀏覽器，重新整理就會還原，不會動到網站。
如果常常需要取色，也可以安裝擴充功能，例如鵠學苑介紹過的 ColorZilla，點一下就能吸取畫面顏色並保留歷史紀錄。
常見問題
HEX 跟 RGB 哪一個比較準？
兩者一樣準，只是寫法不同。#E87722 和 rgb(232, 119, 34) 代表完全相同的顏色，可以依使用的軟體或欄位選擇方便的寫法；網站設定多半用 HEX。
給印刷廠的檔案要用 RGB 還是 CMYK？
原則上用 CMYK，並先跟印刷廠確認他們使用的色彩描述檔。有些數位印刷或輸出店接受 RGB 檔案並自行轉換，但轉換結果你看不到，重要的印刷品建議自己轉成 CMYK 並要求打樣。
品牌只有 CMYK 色碼，怎麼換成網站用的 HEX？
可以用 Illustrator 或 Photoshop 輸入 CMYK 數值後查看對應的 HEX，再到螢幕上目視微調。因為 CMYK 換成 RGB 也會依描述檔而不同，最好把確認後的 HEX 寫進品牌規範，之後網站、社群圖片都用同一組，避免每個人換算出不同的顏色。
結語
看懂色碼只要記住兩件事：HEX、RGB、HSL 是螢幕的顏色，可以用公式精準互換；CMYK 是油墨的顏色，從螢幕換算過去只能求接近，實際數值要依印刷廠的色彩描述檔決定。品牌色最好一開始就同時定好網頁用與印刷用兩組色碼，平常想查網頁顏色時，用 Chrome 的「檢查」功能點一下色塊就能找到。配色方向還沒定的話，可以先參考網站配色工具推薦，找到喜歡的組合再回頭整理成色碼。