RGB 與 CMYK 色彩模式解析：設計與網頁配色必懂

說不定你也遇過這種情況：在螢幕上把品牌主視覺調到滿意的鮮豔度，按下列印，印出來的成品卻整個暗了一階、濁了一層，那個反覆微調的螢光綠變成一塊說不上來的黃綠。假設一個同時經營電商網站與實體包裝的品牌，主視覺是一組飽和鮮藍配螢光綠；包裝打樣時，螢光綠很可能明顯收斂。這不一定是印刷廠印壞了，更常見的原因是 RGB 色彩超出指定 CMYK 印刷條件可再現的範圍。

一分鐘抓重點：RGB 是「光的加法」，紅綠藍加到最滿是白色；CMYK 是印刷常用的減色色彩模式。網頁、App 與多數螢幕內容以 sRGB 為相容基準，現代 CSS 也支援 Display P3 等其他色彩空間；紙本印刷通常依製程使用 CMYK，也可能搭配特別色。RGB 與 CMYK 的色域有重疊但不完全一致，所以「螢幕看得到的顏色，指定印刷條件不見得印得出來」是色域與媒材差異，不一定是誰出錯。

兩套三原色：先把「光的混色」與「墨的混色」分清楚

很多人把「色彩三原色」當成一組固定的答案。國小美術課學到的是紅黃藍，長大接觸設計聽到的是 RGB 與 CMYK，幾套講法湊在一起就亂了。其實三原色從來不是「一組」，而是兩套各自獨立的系統，差別在於那個顏色是怎麼被產生的。把這個前提弄對，後面所有色差問題都會變得合理。

光的三原色是紅、綠、藍（RGB）。它的邏輯是加法：沒有光是全黑，把紅光綠光藍光疊上去，疊到最滿就是白色。這套系統對應的是所有會自己發光的東西，包括螢幕、投影機、舞台燈。墨的三原色是青、洋紅、黃（CMY）。它的邏輯是減法：白紙本身已經反射全部的光，把青墨洋紅墨黃墨疊上去，每疊一層就吃掉一部分光，疊到最滿理論上是黑色，實際上會是一個混濁的深褐（這個問題後面會解釋為什麼要再加上一個 K）。這套系統對應的是所有靠油墨附著在材質上的東西，包括紙本印刷、布料印花、包裝。

比較項	光的三原色 RGB	墨的三原色 CMY（再配 K 即 CMYK）
顏色來源	自己發光	油墨附著、吸收光
混色邏輯	加法，越加越亮	減法，越疊越暗
三色全開	白色	理論黑色，實際深褐
主要載體	螢幕、投影、燈光	紙、布、包裝
在網頁裡	原生支援	沒有原生語法

把這兩套分開之後，你會發現「為什麼螢幕的顏色印不出來」這件事一點也不玄。你等於是拿一套「光」的語言，去要求一套「墨」的系統照樣呈現，中間一定有翻譯損耗。理解色彩三原色的價值，不在於背下紅綠藍或青洋紅黃這幾個字，而在於認清這兩套系統各自獨立、各自有極限。很多人以為換一台更貴的螢幕、或找一家更大的印刷廠就能消滅色差，但只要這個前提沒弄對，再多的預算也只是在症狀上打轉。

RGB 深入：光的加法、0 到 255，以及那些色彩空間的差別

一個頻道 0 到 255，這個數字是怎麼來的

螢幕上的每一個像素，由三個次像素組成：紅、綠、藍。在 8 位元色深下，每一個頻道有 256 階，從 0 到 255。三個頻道組合起來是 256 乘以 256 再乘以 256，大約 1,677 萬色，這就是你在網頁規格裡常看到的「全彩 24 位元」的由來。0 代表那個頻道完全關閉，255 代表完全開啟：(0, 0, 0) 是黑色、(255, 255, 255) 是白色、(255, 0, 0) 是純紅。把這個尺度記住，你就會理解為什麼色彩能被當成數字來計算、來做色階、來寫成設計系統的變數。

hex、rgb()、hsl() 其實都在講同一件事

網頁上表達顏色的語法有很多種。傳統的十六進位 hex 寫法，例如 #FF0000，前兩碼是紅、中兩碼是綠、後兩碼是藍，每個頻道用 00 到 FF 表示 0 到 255；rgb() 直接寫出三個色彩頻道，hsl() 則用色相、飽和度、明度描述。這些舊有語法預設以 sRGB 解讀，CSS Color Level 4 另支援 Display P3、Lab、LCH、OKLab 與 OKLCH 等色彩空間。

這點很關鍵：hex、rgb() 與 hsl() 都屬於以 sRGB 為基準的舊有網頁色彩語法；需要廣色域時，可用 color(display-p3 ...) 或其他現代函數。CMYK 不是一般螢幕網頁的輸出空間，不能用 CSS 數值保證印刷成品色。CSS 入門語法的完整梳理，可以回頭看 CSS 入門全攻略。

同樣是 RGB，為什麼還分 sRGB、Adobe RGB、Display P3、ProPhoto

這是很多人卡關的地方。RGB 是一個「模式」，但模式底下還有不同的「色彩空間」，差別在於這個空間能裝下多少種顏色、以及能裝下哪些顏色。講同一個「紅綠藍」並不代表兩台設備看到的紅一樣鮮。

• sRGB：網頁的預設色彩空間，幾乎所有螢幕、瀏覽器、相機預設檔都假設是 sRGB。色域最小，但相容性最高，是絕大多數網頁配色的安全基準（W3C CSS Color Module 即將 sRGB 設為網頁的基準色彩空間）。
• Adobe RGB：色域比 sRGB 大，尤其在青綠色這一段更廣，攝影與印刷前期常用。
• Display P3：蘋果基於電影業的 DCI-P3 制定的廣色域空間，紅色與綠色段比 sRGB 更飽和。iPhone 7 之後的 iPhone、iPad Pro、2016 年之後的 MacBook Pro 陸續採用 Display P3 顯示器（依 Apple 產品規格）。
• ProPhoto RGB：色域最大，甚至包含一些肉眼看不到的顏色，專業攝影 RAW 檔才用得到，網頁幾乎不碰。

這裡的實務陷阱是：把 Adobe RGB 圖片當成 sRGB 解讀，或在匯出時直接丟棄描述檔，都可能造成明顯色偏。正確做法是用色彩管理軟體「轉換」到目標空間；以相容性為主的網頁圖通常轉成 sRGB 並保留正確標記，需要廣色域時則測試支援與退化版本。圖檔格式與描述檔的搭配，可以參考 WebP、JPG、PNG 圖片格式深度比較。

色深與漸層色帶：為什麼 8 位元有時候不夠用

前面講到 8 位元色深，每個頻道 256 階、三頻道合計約 1,677 萬色，聽起來很多。但在某些情境下，這個數字會不夠用，最明顯的症狀是漸層色帶（banding）：一片理論上應該平滑的天空或背景，看起來出現一條一條階梯狀的色階，像等高線一樣。這不是螢幕壞掉，是色階不夠細。

原因是這樣：當一個漸層涵蓋的亮度範圍很窄、變化很細微時，256 階之間的間隔就不夠細，肉眼會察覺到階與階之間的跳階。低光源場景、深色背景、大面積的單色漸層、經過強烈調色或反覆壓縮的影像，都特別容易出現色帶。婚紗照的天空、產品照的柔光漸層、深色模式的 Hero 背景，都是高危險區。

對應的方法有幾個層次。編輯階段可用較高位元深度，等到輸出再降回 8 位元，減少中間處理累積的截斷誤差；已經出現色帶時，可加入極少量 dithering 打散階梯感。輸出時則要實際比較壓縮設定與目標瀏覽器：JPG、WebP、AVIF 的表現會受編碼器、品質參數與內容影響，不能只看格式名稱判定漸層品質。

網頁實務上最容易踩到色帶的地方，是深色模式的大面積背景、Hero 區的漸層覆蓋、以及攝影感的全螢幕背景圖。這些畫面在設計稿裡看起來平滑，一上線、一經過 CDN 壓縮，就浮出等高線。如果你做的網站大量使用深色與漸層，把這件事列入設計 QA 清單：在幾台不同等級的螢幕、不同壓縮等級下重新看一次漸層區域，而不是只在自己的廣色域螢幕上簽核。

這裡的關鍵觀念是：色深決定「色階的細密程度」，色域決定「能涵蓋的顏色範圍」，兩者是不同的維度。一個色域很廣但色深很低的檔案，會出現「顏色很鮮、但漸層很跳」的怪現象；一個色深很高但色域很窄的檔案，漸層平滑但整體偏黯。把這兩個維度分開理解，你才會知道一張圖的問題到底是出在色域被裁切，還是出在色階不夠細，對症下藥。

CMYK 深入：墨的減法，以及為什麼要四色不是三色

理論上，青、洋紅、黃三色疊到最滿應該是黑色。實際上，油墨不是完美的濾鏡，三色疊印不易得到穩定、乾淨的黑色，也會增加總墨量與套印難度，所以印刷加入黑版 K（Key plate）。K 不是多餘的補充，它負責黑色、文字細節與灰階控制等重要工作。

K 不只是補黑，它還負責文字與輪廓

除了讓黑色更黑之外，K 還有兩個很實際的任務。第一，文字與細線條幾乎都只用單一個 K 印，避免四色套印時因為對位誤差產生彩色毛邊；想像一個 9 級的細字，如果用 C40 M30 Y30 K100 去印，只要其中一個色版偏了 0.1 公厘，邊緣就會出現紅藍殘影。第二，節省油墨，把暗部的灰階交給 K，省去用三色去疊，成本與穩定度都更好。

rich black 與 registration black，兩種黑不能混用

印刷檔裡的「黑」其實有好幾種，設計師最容易踩的就是把它們搞混：

• 套準黑（registration black）：供印刷對位標記使用，會讓所有分色版都印出。不要拿來做頁面內容，以免總墨量超出印刷條件。
• 豐富黑（rich black）：在黑墨之外加入其他色墨，常用於大面積暗部。配方與總墨量要依紙張、印刷方式及印刷廠規範決定，不能把網路上的固定數值直接套用。
• 純 K 黑（K100 only）：常用於小字與細線，可減少套印偏差造成的彩邊；實際設定仍應以輸出規範為準。

把這三種黑分清楚，可以省下很多「為什麼我的字邊緣有彩色光暈」「為什麼這塊黑印得這麼糊」的 debug 時間。

CMYK 也有自己的色彩描述檔

印刷用的 CMYK 不是單一標準，而要看紙張、機台、油墨與製程條件。市場上有 Japan Color、FOGRA、SWOP、GRACoL 等不同規範，但不能只因所在地區就假設印刷廠採用哪一套。送印前先詢問對方要求的 ICC 描述檔、總墨量與打樣標準，再用指定條件做軟式或實體打樣。

色域：為什麼螢幕上的螢光綠印不出來

這是整篇文章最該理解的一段。RGB 色域與 CMYK 色域是兩個不同形狀的集合，它們有重疊，但不互相包含。最常被拿出來舉例的，就是高飽和的綠與藍，這兩個極端的色域區域，CMYK 往往印不出來。反過來說，某些偏暗、偏濁的深色，CMYK 反而能表現得比一般螢幕更沉。

回到前面那個品牌案例：那組飽和度偏高的鮮藍配螢光綠，在螢光綠這一端正好踩在 CMYK 色域之外。螢幕（尤其是廣色域螢幕）能把那個綠推得很前面，但油墨的物理特性就是到不了那個座標。印刷廠沒有印錯，是這個顏色根本不在它能再現的範圍裡。當一個顏色落在色域外（out-of-gamut），轉換軟體會做色域裁切（gamut clipping），用最接近的可印顏色代替。這就是為什麼你的螢光綠會變成一個相對黯淡的黃綠。

知道原因之後，對應的方向其實很清楚，不要再去怪印刷廠：

• 把品牌主視覺的關鍵色，重新放到 CMYK 色域裡挑一次，挑一個兩個色域都能穩定再現的「安全色」。
• 用特別色（spot color，例如 Pantone 配對系統）指定那一個綠，印刷時直接調專屬油墨，不經過 CMYK 四色套印。代價是成本較高，而且只對紙本有效，網頁還是得用 RGB 近似。
• 接受螢幕與印刷本來就會有差異，把品牌規範寫成「螢幕色／印刷色」兩組數值，不要強求單一數值跨載體一致。

這段連到品牌色彩挑選的完整流程，我在 品牌色彩挑選指南 裡有更細的步驟拆解，重點就是把「能不能印出來」當成挑色的前置篩選條件，不要拖到事後才補救。

讓螢幕顏色可信：校色、ICC 描述檔與軟式打樣

要在螢幕上預測印刷結果，你需要做三件事：校色、嵌入描述檔、軟式打樣。這三件事是讓你的螢幕從「漂亮的參考」升級成「可以拿來做決策的工具」的關鍵。

校色儀是你的第一筆投資

螢幕出廠的顏色不一定準，用久了也可能偏移。可使用硬體校色儀定期校正，讓螢幕符合工作流程要求的白點、亮度與色調響應；螢幕校正後會產生對應的 ICC 描述檔。網頁與印刷軟式打樣的目標條件不同，應依交付規範設定，而不是套用同一組數值。

ICC 描述檔是顏色的翻譯規則

ICC（International Color Consortium）描述檔描述設備或色彩空間的色彩特性，作業系統與設計軟體靠它在不同空間之間轉換。缺少或指定錯誤的描述檔會增加誤讀風險；未標記的網頁影像在多數現代環境通常按 sRGB 解讀，但明確轉換並保留正確標記仍能減少工作流程中的歧義。印刷檔則應依印刷廠規格嵌入或指定相應描述檔。

軟式打樣在送印前先看結果

Photoshop、Affinity Photo 都有軟式打樣（soft proof）功能：指定一個 CMYK 描述檔，軟體會模擬印刷結果，並標出哪些顏色會被裁切。Figma 本身是 RGB 設計工具，沒有原生的 CMYK 模擬，但你可以匯出後在打樣軟體裡檢查；Figma 的完整操作與匯出設定可以參考 Figma 中文完整教學。把軟式打樣放在送印之前先做一遍，不要拖到送印之後，是專業與業餘的分水嶺。

用 Delta E 量化色差

Delta E（ΔE）把兩個量測色彩的差距轉成數值，但門檻會受公式版本、色彩、觀看條件與產品規範影響，不能把單一數值當成所有印刷品的通用及格線。打樣軟體只能模擬；要驗收實體印刷，應在約定光源與基材下用分光測色儀量測，再依雙方事先確認的 ΔE 公式與容差判定。

要誠實講一件事：再怎麼校色，螢幕永遠沒辦法百分之百等於印刷成品，因為一個是發光體、一個是反射體，觀看的環境光也不同。軟式打樣是降低風險，不是消除風險，真正重要的顏色還是要打實體樣。把這個極限記在心裡，你對色彩的期待會更務實。

別忘了觀察光源：同色異譜會讓同一個色變臉

色彩再現還有一個常被略過的變數：觀看環境的光源。同一張印好的包裝，在日光燈下、在暖黃的鎢絲燈下、在戶外陽光下，看起來會不一樣。這個現象有個名字，叫同色異譜（metamerism）：兩個在某一種光源下看起來一樣的顏色，換個光源就分家。原因是油墨的反射光譜跟光源的光譜交互作用，不同的光譜組合可以暫時「騙過」眼睛，但這個騙術只對某一個光源有效。

印刷品通常依 ISO 3664 的 D50 觀看條件比對，不要在辦公室任意燈光下判色。成品在店內暖光與標準光源下看起來不同，可能是光源造成的外觀差異；若兩個樣本在一種光源下相符、換一種光源卻分離，才是嚴格定義的同色異譜。把驗收光源、背景與觀看條件寫進發包規格，能減少雙方用不同環境判色的爭議。

廣色域網頁來了：Display P3、CSS color() 與 OKLCH

現代 CSS 已能表達 sRGB 之外的廣色域顏色，但是否採用仍要看品牌需求、裝置支援與退化設計。sRGB 依然是跨裝置相容性最高的基準。

你的讀者螢幕，可能比你設計的 sRGB 還要鮮

許多近年的手機與電腦支援廣色域顯示，但這不表示 sRGB 內容會自動變得更飽和；在正確的色彩管理下，sRGB 應維持原本外觀。只有在設計時刻意建立 Display P3 色值或影像，並在支援的裝置與瀏覽器顯示，才會用到超出 sRGB 的色彩。

CSS Color Module Level 4 的 color() 讓你直接指定廣色域

W3C CSS Color Module Level 4 引入了 color() 函數，可以指定 P3 色域的顏色，例如 color(display-p3 0 1 0)。實務上可先宣告 sRGB fallback，再宣告 P3 值，讓不支援的瀏覽器忽略後者並保留前一個有效宣告；需要更細緻的能力偵測時再搭配 @supports。

OKLCH 讓配色在廣色域裡也能預測

OKLCH 是基於 OKLab 的極座標色彩表示，L 是明度、C 是彩度、H 是色相，它是一個「感知均勻」的色彩空間。白話講：在 OKLCH 裡，明度 0.5 的兩個顏色，肉眼看起來真的差不多亮。這在調整設計系統的色階時非常有用。如果你曾經被 HSL 的「同樣明度，不同色相，亮度看起來卻差很多」搞過（黃色與藍色在同樣 HSL 明度下，視覺亮度差一大截），OKLCH 就是為了解決這件事。CSS Color Level 4 也直接支援 oklch()。把配色變數化、整合進預處理器與設計系統時，這個觀念會是色彩的底層邏輯，讓你的色階與 token 命名更有條理，不會在不同明度之間產生意外的視覺落差。

色彩無障礙：對比、相對亮度與 WCAG

色彩模式講的是「顏色怎麼被產生與再現」，但網頁設計還有一個不能跳過的維度：這組顏色，讀者看不看得清楚。這就是色彩對比與無障礙的問題，也是很多人在配色時忽略、卻直接影響可用性、轉換率與整體使用者體驗的地方。

WCAG（Web Content Accessibility Guidelines）用「對比比（contrast ratio）」量化前景色與背景色的可讀性，數值從 1 到 21。它的計算基礎是相對亮度（relative luminance），不能直接拿 RGB 做算術平均。AA 等級要求正常文字對比至少 4.5 比 1、大字至少 3 比 1；AAA 的正常文字門檻是 7 比 1（依 W3C 的 WCAG 2.2）。

實務上要避免幾個常見陷阱。第一，只靠顏色傳達資訊，例如表單錯誤只用紅色邊框標示，對色弱使用者來說等於沒有提示，要同時搭配圖示或文字說明。第二，在鮮豔的背景上放低對比的彩色文字，視覺上很潮，但對比往往不到 3 比 1，在陽光下的手機螢幕直接看不到。第三，品牌色本身對比不足，卻被直接拿來當正文色或按鈕文字色，這是品牌網站最常見的可讀性地雷。

OKLCH 的 L 值比 HSL 明度更接近感知均勻，適合用來建立視覺上較平順的色階；但 L 值差距不能取代 WCAG 對比公式。品牌色仍要用符合 WCAG 定義的對比檢查工具，逐一測試實際前景與背景組合。色彩無障礙是讓配色在更多裝置與觀看環境下成立的工程要求。

影片與 HDR：另一套你遲早會遇到的色彩空間

如果你的品牌除了網站與印刷，還會做影片（產品影片、社群短影音、YouTube 廣告），你會撞上第三套色彩系統。影片用的是另一套色彩空間，不歸 sRGB 或 CMYK 管，而是一系列為動態影像與廣播制訂的標準。把它當成「第三種語言」理解，會少很多困惑。

最基本的兩個是 Rec.709 與 Rec.2020。Rec.709 是高畫質影片的標準色彩空間，色域大致與 sRGB 接近，是一般剪輯軟體的預設值。Rec.2020 是超高清（4K、8K）的標準，色域比 Rec.709 大得多，也是 HDR 內容的目標色域。換句話說，當你看到「HDR」這個詞，它背後牽涉的不只是更亮，還有一個更廣的色彩空間（依 ITU-R Recommendation BT.709 與 BT.2020 標準）。

HDR 還多了一個維度：亮度。SDR（標準動態範圍）內容的亮度上限大致在 100 nits 上下，HDR 可以到 1000 甚至 4000 nits 以上，並用 PQ（Perceptual Quantizer）或 HLG（Hybrid Log-Gamma）這類傳遞函數描述亮度與色彩的關係。這意味著同一個「紅」，在 SDR 與 HDR 裡的編碼方式不同，轉檔時若沒有正確套用轉換曲線，顏色會整個跑掉，亮部還會爆掉成一片純白。

當品牌素材要跨網頁、印刷與影片三種載體時，不要假設同一個輸出檔可以走遍天下。保留一份未破壞、色彩管理完整且位元深度足夠的可編輯母檔，再依交付目標轉成網頁用 sRGB（需要時另做 P3）、印刷廠指定的 CMYK 條件，以及影片要求的 Rec.709 或 HDR 工作流程。母檔色彩空間應依來源素材與製作流程選擇，不必一律套用最大色域。

跨螢幕與印刷的品牌色一致性策略

一個品牌色，兩組數值

最實際的做法是：品牌規範裡，每一個關鍵色都給兩組數值，一組是螢幕用的 RGB（寫成 hex），一組是印刷用的 CMYK（最好附上對應的描述檔）。如果預算許可，再加一組 Pantone 特別色代碼，作為印刷的最高忠實度參考。不要幻想一個數值可以同時制服所有載體，那個數值不存在。把這個「兩組數值」的習慣內建進品牌手冊，是省下日後無數次打樣爭議的最便宜方法。

挑色階段就用色域當篩選條件

在品牌創立初期，就把「這個色能不能在目標印刷條件下穩定再現」納入挑色條件。可先建立色彩管理完整的候選色，再用印刷廠指定的描述檔軟式打樣並製作實體樣，從中選擇數位與印刷都可接受的平衡點。完整的色彩學基礎可以看 色彩學完整指南。

用特別色鎖住那一個不能妥協的色

如果品牌主視覺的某個顏色，像那個螢光綠，真的不能妥協，就用特別色。Pantone 配對系統（PMS）提供一組標準化的油墨配方，印刷廠直接調那一罐油墨，不經過四色套印，可以做出 CMYK 範圍外的飽和色，包含螢光、金屬。代價是成本較高、需要單獨開一個色版，而且只對紙本有效。網頁端你還是得給一個近似的 RGB，並接受它在螢幕上會比紙本更鮮。這就是「跨載體一致」的真實成本結構。

把色值包進企業識別系統

當色值固定下來，下一步是把它寫進 CIS（企業識別系統）文件，讓所有接手的人，包括設計師、印刷廠、外包廠商，都拿到同一份規格。CIS 不只是 logo 與字體的整理，色彩規格更是它的核心。完整的 CIS 建構流程可以看 CIS 企業識別系統，把色彩、logo、字體、應用規範一次寫進同一份文件，才是真的讓品牌色「可被執行」，而不只是留在設計師腦裡。

一張決策表加上色彩工作流程

觀念講完了，下面是一張可以直接使用的決策表，加上一組色彩專案流程，讓前面的理論落地成為動作。

載體或情境	建議模式	備註
網頁、登陸頁、Email、App UI	sRGB 為基準，按需增加 P3	先確保跨裝置相容，再測試廣色域版本
社群圖、社群頭貼、橫幅廣告	RGB	以螢幕觀看為主
影片字幕、縮圖、動態素材	RGB	影片是發光體顯示
名片、傳單、海報、包裝	CMYK	指定印刷廠描述檔
大圖輸出、旗幟、布旗	CMYK 或特別色	關鍵色可用特別色鎖
要被大量列印的 PDF 下載檔	CMYK	設計時就轉，不要交付時才轉

從設計到上線、從設計到印刷的六步流程

1. 鎖定交付條件：網頁以 sRGB 為相容基準，需要廣色域時另做 P3 測試；印刷則先取得印刷廠要求的描述檔、總墨量與打樣規格。
2. 挑色就考慮色域：品牌主色要同時在目標數位裝置與印刷條件下打樣，避免交付前才發現無法穩定再現。
3. 全程在校色過的螢幕上做，並定期用校色儀維護。螢幕不準，後面所有判斷都是假的。
4. 送印前做軟式打樣：指定 CMYK 描述檔，標出色域外的顏色，提前跟印刷廠或客戶溝通，不要等到成品出來才發現。
5. 真正重要的色才打實體樣，用 Delta E 比對；不重要的色就接受小差異，把預算留給關鍵視覺。
6. 把最終色值寫進品牌規範與 CIS，附上 RGB、CMYK、特別色三組數值與對應的描述檔，讓任何人接手都能重現同一個色。

三個我會建議你馬上檢查的點

• 你的網站圖檔有沒有嵌入 sRGB 描述檔？沒有的話，在廣色域螢幕上可能被誤判色域而變色，把原本鮮豔的圖吃掉一圈彩度。
• 你的品牌主色，有沒有同時附上 CMYK 數值？只給 hex 的話，印刷那一天會很痛。這件事跟網站整體的配色計畫一起規劃最有效率，可以參考 網頁設計配色實戰指南。
• 你有沒有把色彩描述檔寫進發包文件？這往往是有沒有色差的關鍵變數，也是多數人最常漏掉的一項。

色彩問題疑難排解：五個最常被問的為什麼

觀念與流程都講完了，這裡把實務上最常被問到的五個「為什麼」集中回答，讓你在問題發生時能快速定位是哪一環出錯。

為什麼我的圖從 Photoshop 匯成 JPG 之後變色

最常見的原因是描述檔被剝掉或被錯誤轉換。Photoshop 的「轉換為描述檔」與「指定描述檔」是兩件不同的事：轉換會把顏色依描述檔對應到新空間、視覺上盡量不變；指定只是貼一個標籤、不改數值，貼錯標籤顏色就會跑掉。匯出網頁用圖時，確認來源是 sRGB、或先轉換到 sRGB 再匯出，並勾選嵌入描述檔，可以擋掉大多數的「匯出後變色」。

為什麼手機上看起來比電腦螢幕鮮豔

原因可能是螢幕校正、亮度、顯示模式、環境光或色彩管理不同。正確管理下，同一張 sRGB 圖不應只因螢幕支援 P3 就被任意拉高飽和度；若差異明顯，先確認檔案描述檔、瀏覽器、作業系統顯示設定與螢幕模式，再用已校正設備比對。

為什麼印刷成品比螢幕暗、而且霧霧的

兩個原因疊加。第一，螢幕是發光體、紙是反射體，同樣的色值，發光體看起來本來就比反射體亮。第二，CMYK 色域比 RGB 小，高飽和與高亮度的顏色被裁切後，整體會看起來更暗、更濁。這是色域與物理介面的雙重結果，軟式打樣可以提前預測差距，但不能完全消除。

為什麼 CSS 裡寫的顏色，在不同瀏覽器看起來略有差異

差異常來自螢幕校正、作業系統色彩管理、瀏覽器版本與顯示設定。現代瀏覽器通常依規範把傳統 CSS 顏色視為 sRGB，不能把所有差異都歸因於瀏覽器「猜」未標記影像。做法是把素材正確轉換到目標空間、保留一致標記，並在實際支援矩陣與裝置上測試；需要廣色域時再用 color() 明確指定。

為什麼品牌色選了 Pantone，網站上還是對不上

因為 Pantone 是印刷油墨的標準，它對應的是反射式、特別色的世界；網站是發光式、RGB 的世界。Pantone 官方的 color bridge 會給你一個 sRGB 近似值，但那是近似，不是等號。螢光、金屬類的 Pantone 尤其沒有可信的 RGB 對應。正確的期待是：Pantone 在紙本上忠實，sRGB 近似值在螢幕上盡量接近，兩者一致是目標，無法成為保證。把這個期待校準了，你對跨載體色彩的判斷會務實很多。

色彩模式不是一個學術觀念，它會影響設計在輸出時是否走樣。把 RGB 與 CMYK 當成兩套語言，把色域差異視為轉換時要管理的限制，色彩決策會清楚很多。下一次開新專案，先問自己：這個顏色主要要出現在螢幕，還是紙上？再依輸出條件選工作空間、描述檔與打樣流程。

如果你正在重整品牌視覺，把這篇的觀念先吸收進去，再回頭看 21 個配色工具網站，會有一張更完整的色彩決策地圖：從色彩模式、色域、到實際的配色工具，一路串起來。