RGB 與 CMYK 色彩模式完整解析:設計與網頁配色必懂的色彩三原色觀念
RGB 與 CMYK 的差別在於輸出媒介決定色彩模式:RGB 是給會發光的螢幕用的加法混色,以紅綠藍三色光、每個通道 0 到 255 疊加成色;CMYK 是給會吸光的印刷用的減法混…
RGB 與 CMYK 的差別在於輸出媒介決定色彩模式:RGB 是給會發光的螢幕用的加法混色,以紅綠藍三色光、每個通道 0 到 255 疊加成色;CMYK 是給會吸光的印刷用的減法混色,以青洋黃黑四色油墨、濃度 0 到 100% 疊印成色。關鍵差異在於 RGB 能表現的色域明顯大於 CMYK,當你把螢幕上的鮮綠、亮藍、螢光色送進印刷,這些超出 CMYK 範圍的顏色只能被軟體替換成最接近的可印刷色,成品因此變暗變濁。這正是 Adobe 等影像處理軟體在色彩管理文件裡反覆強調的「色域壓縮」現象。挑錯模式或事後硬轉,鮮豔的螢幕色就會在這一步被擠掉。
重點先看:判斷要用 RGB 還是 CMYK,準則只有一條,就是成品最後在哪被看見。螢幕看用 RGB、印刷看用 CMYK;由於 RGB 色域大於 CMYK,超過一定比例的高飽和色轉印刷時會被色域擠壓掉,這正是色差來源;國際色彩聯盟(ICC,International Color Consortium)的色域研究亦指出,不同媒介之間的重疊區才是轉換時能無損保留的顏色。
RGB 與 CMYK 的核心差別
把這兩個名詞背成並列的定義,反而會遮掉真正該記住的判斷依據:成品最後在哪被看見。把它們想成兩套為不同物理媒介設計的系統就好,兩者之間沒有升級關係,RGB 是加法混色,三色光全開到最大值(255,255,255)變白色;CMYK 是減法混色,四色油墨全疊到最厚變接近黑色。一個在加光、一個在吸光,方向剛好相反。而這組方向相反的系統之間,色域是不對等的:RGB 能表現的顏色多於 CMYK,這也是後續所有色差問題的源頭。新手最常踩的雷就是用 RGB 把作品做得很漂亮,交給印刷廠才發現顏色整個變暗變濁,這不是印表機壞掉,而是一開始就待錯了色域。把決策邏輯建立在色域與輸出媒介上,而非死記數值範圍,才能從根源避免色差。若你正在重新思考品牌整體的色彩計畫,可以先回到色彩學與對比色互補色配色技巧把基礎觀念架穩。
螢幕與紙張在出光方式上的差異,也常被忽略。螢幕是主動出光,每個像素自己發光,所以黑色只是「關掉像素」、白色只是「三色光全開」,明暗由光的強度直接決定;紙張是被動反射,光源打在紙上、油墨吸收掉部分光線、剩下的反射進眼睛,所以黑色的深淺取決於油墨堆疊的厚度與紙張的底色。這層物理差異直接衍生出兩個實作後果:第一,螢幕上的純黑(0,0,0)在印刷端永遠印不出同等深度,因為紙張與油墨都有物理上限;第二,螢幕色域裡的高明度鮮色,到了印刷端往往要靠疊印百分比與特別色才能勉強逼近。
RGB 是什麼:光的三原色與加法混色
RGB 是以紅綠藍三種色光為基礎的色彩模式,每個通道用 0 到 255 的數值表示強度,透過不同比例的色光相加來混出各種顏色,因此稱為加法混色,是所有發光螢幕預設使用的色彩模式。手機、電腦螢幕、電視這類主動發光的裝置,都是靠 RGB 顯示顏色。數值越高越飽和,三個通道同時拉到最大就是白色,全為 0 就是黑色。
舉幾個具體例子你就懂了。純紅是(255,0,0)、純綠是(0,255,0)、純藍是(0,0,255),這三個數字組合就是你在 CSS 入門語法與色彩寫法裡會反覆用到的 RGB 色碼。當你把三個通道調到(255,255,255),加法混色的結果就是純白;調到(0,0,0)就是全黑。比起死背「紅綠藍是三原色」,不如記住這條邏輯:光是相加的,越加越亮,所以叫加法混色。這個觀念會直接影響你在 Figma 完整 UIUX 設計教學裡取色與建色的精準度。
RGB 底下還有幾個分支概念會影響你的實作選擇。sRGB 是目前網頁與多數螢幕最通用的標準色域(即 IEC 61966-2-1 規範所定義的色域),你寫的網頁配色幾乎都預設在這個範圍內;Adobe RGB 則涵蓋更廣的綠色與青色,較常被攝影與印刷前置作業使用。RGBA 是 RGB 再加上一個 Alpha 透明度通道,數值 0 到 1,做半透明遮罩或疊層時會用到。而在 CSS 裡,無論你寫 rgb()、rgba() 還是 hex 色碼(像 #ff0000),底層通通都是 RGB 模式,只是表現形式不同,這點在 W3C CSS Color 規範中有明確定義。把這層理解套到 Figma 網格系統與排版設定與 Wireframe 線框圖與網站原型設計,配色就不會在進入開發階段時走樣。
近年還有一個不能不提的色域:Display P3 與 DCI-P3。Display P3 是蘋果在多數 iPhone、iPad、Mac 上採用的廣色域,它的紅綠色域比 sRGB 更寬,能顯示出更飽和的鮮紅與鮮綠;DCI-P3 則是數位電影院的標準色域。對網頁設計來說,這代表一個現實:你的頁面在廣色域螢幕上會比在一般 sRGB 螢幕上看起來更鮮豔,同一個 #ff0000 在兩種螢幕上的視覺感受可能落差明顯。CSS 現在已經支援 color() 函式與 display-p3 關鍵字,讓你能在廣色域環境裡指定超出 sRGB 的顏色,但前提是讀者的裝置支援,否則瀏覽器會自動降轉。做跨裝置一致的配色時,先把品牌主色定在 sRGB 安全範圍內,再視專案需求決定要不要往廣色域延伸,是比較穩妥的路線。
CMYK 是什麼:顏料四色與減法混色
CMYK 分別代表青色(Cyan)、洋紅色(Magenta)、黃色(Yellow)與黑色(Key plate),以濃度 0 到 100% 表示,靠油墨疊印來吸收光線產生顏色,屬於減法混色。因為印刷品不會發光,只能反射光進入人眼,所以全彩印刷幾乎都採用 CMYK。油墨是吸收光線而非發光,這是它與 RGB 最根本的物理差異。
很多人會問:K 為什麼是黑色?K 代表的是 Key plate,也就是定位套版色,印刷時用來標定套版位置的顏色,實務上就是黑色油墨,用來補強對比與細節。理論上青、洋紅、黃三色疊滿應該就能混出黑色,但實際印出來會偏濁偏褐,不夠純,所以才要再額外加一道黑色油墨。這個設計有其經濟考量:四色全疊的區域墨量極大,紙張容易反潮、透背、不易乾;用黑色取代部分三色疊印,既提升對比,又能控制總墨量、加快乾燥速度、降低成本。
這裡牽涉到一個印刷色彩管理的核心概念:總墨量上限(Total Ink Coverage,簡稱 TIC 或 TAC)。一般平版印刷的總墨量上限大約設在 280% 到 320% 之間,意思是同一個位置四色油墨百分比相加不得超過這個門檻,否則紙張會因吸墨過量而變形、沾黏、乾不透。舉例來說,一個看起來很深的深藍,如果寫成 C100 M90 Y40 K80,總墨量就是 310%,貼近上限;若再疊上去就會超標,印刷廠會強制用色彩描述檔重新分色,把多出來的墨量挪到黑色或其他通道。理解這個上限,你就能解釋為什麼螢幕上深邃的暗色印出來會被「壓扁」成較淺的色階。
實際偏色會受很多變數影響,這點必須先承認:色料配方、印刷技術、紙張吸墨程度、油墨品質都會左右最終成品。這也是商業印刷廠通常會要求設計師直接交付 CMYK 檔的原因,事後轉換造成的落差,廠商無法替你吸收。如果你同時要做名片、海報與餐廳菜單,建議一開檔就直接選 CMYK;搭配中文字體設計與字體推薦選好印刷用的字體,整體成色會更可控。
色差的根源:色域不對等與色域壓縮
色域(gamut)指一個色彩模式能表現的顏色總範圍,RGB 大、CMYK 小,兩者重疊的區塊才是轉換時能無損保留的顏色。落在重疊區之外的顏色,軟體會用「色域壓縮」把它們映射到最接近的可印刷色,結果就是變暗或偏濁。最容易失真的是高飽和的綠、藍、橘、洋紅,所以螢幕上看到的鮮豔電光藍,印出來往往變成一團灰撲撲的藍。色域從一開始就不對等,轉換注定是失真而非等價。
色域壓縮在軟體裡有幾種不同的演算策略,統稱為 rendering intent(演算用途),常見的有四種:相對色度(Relative Colorimetric)、絕對色度(Absolute Colorimetric)、感知(Perceptual)、飽和度(Saturation)。相對色度會把色域內的顏色精準保留、只把超出色域的顏色硬壓到邊界,最常用在已有大量色域內顏色的照片或插畫;感知模式則會把整個色域等比例壓縮,保留顏色之間的相對關係,適合色彩跨度大、大量落在色域外的鮮豔插畫;飽和度模式優先保留飽和度而不在意精準度,常用在商業圖表、簡報色塊。選錯演算用途,同一張圖轉出來的結果會天差地別,這也是「為什麼我轉出來比同事暗」的常見原因之一。
Photoshop 與 Illustrator 裡那個會跳出灰色驚嘆號的「色域警告」,就是在標示這些印不出來的顏色,顯示成灰色塊讓你一眼看到哪些色會被犧牲掉。實務上有兩種應對策略:一是乾脆一開始就在 CMYK 模式下設計,等於直接在可印刷範圍內調色,較少事後落差;二是用 Pantone 特別色,它不靠 CMYK 混出來,而是預先調好的單一油墨,色彩最穩定但成本較高,常用在品牌 Logo 與包裝(這也是 Pantone 配色系統在品牌辨識上的核心價值)。如果你對 Logo 配色特別講究,網站 Logo 設計與配色實戰有更細的討論。
| 項目 | RGB | CMYK |
|---|---|---|
| 輸出媒介 | 發光螢幕 | 印刷(吸光反射) |
| 混色原理 | 加法混色 | 減法混色 |
| 基本色 | 紅、綠、藍 | 青、洋紅、黃、黑 |
| 數值範圍 | 每通道 0 到 255 | 每色 0 到 100% |
| 色域大小 | 較大 | 較小(約為 RGB 的子集重疊區為主) |
| 總墨量/強度上限 | 無墨量概念,受面板亮度限制 | 總墨量上限約 280% 到 320% |
| 最飽和色表現 | 鮮綠、亮藍、螢光色皆可 | 高飽和綠藍橘洋紅易失真 |
| 典型用途 | 網頁、社群、電商圖 | 名片、海報、包裝、菜單 |
| 轉換方向 | 轉 CMYK 必失真 | 轉 RGB 影響較小 |
依輸出媒介選擇色彩模式
判斷準則只有一條,就是成品最終在哪被看。會在螢幕上呈現(網頁、社群、電商圖、數位照片)就用 RGB;會透過印刷輸出(名片、海報、包裝、菜單、書籍)就用 CMYK。若兩者都要,建議先以印刷端為主、用 CMYK 定色,再為螢幕版本另存 RGB,這樣才能避免螢幕很漂亮、印刷卻翻車的窘境。跨媒介的品牌色更要小心:先以 CMYK 打樣定色,確保印得出來,再回頭調螢幕版本的 RGB。同一份檔案要同時輸出兩種版本時,記得分別存 RGB 與 CMYK 兩個檔,不要一份檔硬用到底。委外印刷前,主動問廠商指定的色彩模式與出血值,比事後補救省事太多。如果你正在規劃整個品牌視覺,品牌色彩挑選與品牌色應用與CIS 企業識別系統與品牌設計能幫你把色彩規範一次寫清楚。
| 輸出情境 | 該用色彩模式 | 常見成品 |
|---|---|---|
| 螢幕顯示 | RGB | 網頁、社群貼文、電商圖、數位照片、影片縮圖 |
| 印刷輸出 | CMYK | 名片、海報、菜單、書籍、包裝、招牌 |
| 跨媒介品牌色 | 先 CMYK 定色,再存 RGB | 品牌 Logo、標準色、CIS 規範 |
| 特別色需求 | Pantone | 高端包裝、Logo 標準色、金銀色 |
| 廣色域螢幕專案 | RGB(Display P3) | 蘋果生態介面、高階攝影修圖 |
很多接案者會把同一份稿子同時用在網站和印刷品上,這時最務實的做法是建立兩組檔案:一組 RGB 給螢幕、一組 CMYK 給印刷。千萬不要存一份 RGB 然後指望印刷廠幫你轉,因為轉換那一刻色差就發生了,廠商也不知道你原本想要的是哪種綠。若你想把品牌色同時落地到網站與印刷,可以參考網頁設計配色與色彩計畫實戰的整合做法。
硬轉或硬選色彩模式的四種誤區
色彩模式不是「選了就一定對」這麼簡單,有幾種情境硬套規則反而會出問題。第一種是螢幕校色環境不穩定時,你以為自己看到的是正確的 RGB,其實是失準螢幕給你的假象;這時就算全程在 RGB 工作也沒有意義,因為源頭顏色本身就是錯的。第二種是把已經印好的成品照片回掃成數位檔,再硬把它從 CMYK 轉回 RGB 試圖「還原」原本的鮮豔度,這個動作徒勞無功,因為色域壓縮是不可逆的,被擠掉的顏色不會回來,只會在原地多出一層不自然的飽和。
第三種常見誤區是在網頁設計裡堅持匯入 CMYK 色票。有些設計師為了「確保印得出來」,把品牌規範裡的 CMYK 數值直接寫進 CSS 變數,但瀏覽器根本不認 CMYK,它只會把這組數值當作無效格式忽略,結果畫面上根本套不到顏色。正確做法是品牌規範同時維護 RGB 與 CMYK 兩組數值,網頁端用 RGB、印刷端用 CMYK,各自對應各自的媒介,不要跨界使用。第四種是把 Pantone 特別色當成日常配色萬靈丹,Pantone 成本高、需要印刷廠特別換墨,大量用在普通全彩海報上既浪費錢又拖慢製程,只該留給品牌標準色、金銀色、特殊材質色這類必須絕對精準的少量色。
| 情境 | 常見錯誤 | 正確做法 |
|---|---|---|
| 螢幕未校色 | 以為螢幕顯示就是正確 RGB | 先校正螢幕,再談配色判斷 |
| 掃描成品照片 | 硬把 CMYK 轉回 RGB 還原鮮豔 | 色域壓縮不可逆,重新從原檔處理 |
| 網頁品牌色 | 把 CMYK 數值寫進 CSS | 網頁用 RGB,CMYK 留給印刷端 |
| 普通全彩印刷 | 大量使用 Pantone 特別色 | Pantone 留給標準色與金銀,其餘用 CMYK |
| 跨檔案重複使用 | 一份 RGB 檔硬用到印刷 | 分存 RGB 與 CMYK 兩份各自對應 |
CSS 與網頁配色:為什麼網站一定要用 RGB
因為網站只會在會發光的螢幕上呈現,CSS 的所有色彩寫法(hex、rgb()、rgba()、hsl())底層都是 RGB 模式,所以網頁設計與配色一律使用 RGB,沒有改用 CMYK 的理由。要做更豐富的視覺層次,可用 RGBA 處理透明度,或用 HSL 直觀調整色相。
這裡有個新手常搞混的點:hex 色碼(例如 #1a73e8)和 rgb(26,115,232) 寫的是同一件事,兩者都屬於 RGB 模式,只是進位制不同。RGBA 多一個 Alpha 通道,0 到 1 控制透明度,做半透明遮罩、浮層背景時很實用。HSL 則用色相(Hue)、飽和度(Saturation)、亮度(Lightness)三個軸來描述顏色,對「我想把這個藍調亮一點」這類需求更直觀,但底層一樣是 RGB。RGB 色域較廣,能呈現比印刷更鮮豔的網頁配色,這也是為什麼網站視覺往往比印刷品更飽和搶眼。想更系統化地學 CSS 色彩,CSS Box Model 與版面間距設定與SASS SCSS 預處理器與色彩變數管理會帶你把色彩寫進變數裡重複使用;進階一點,響應式網頁設計 RWD 觀念也常用變數統一管理跨尺寸的配色。
品牌色定義在 CSS 變數裡時,直接用 RGB 或 hex 就好,不必轉成 CMYK,因為瀏覽器只認 RGB。不過要提醒一點:螢幕與螢幕之間也會有色差,校色過的螢幕能讓你在設計階段就看到接近最終的結果,沒校色的螢幕可能讓你誤判顏色。若你的專案同時涉及網頁與印刷,建議把品牌色同時準備好 RGB 與 CMYK 兩組數值,並記錄在品牌規範裡。輸出網頁用圖時,搭配圖片壓縮工具實測推薦能兼顧色彩與效能;要建立一套能跨媒介一致的品牌色,可延伸閱讀網頁配色工具與配色靈感網站。
再補一個常見的技術問法:「既然 Display P3 螢幕色域更廣,我能不能直接在 CSS 裡用 P3 寫品牌色?」可以,但有條件。你需要用 color(display-p3 0.9 0.2 0.2) 這類語法,並且接受不支援 P3 的舊瀏覽器會自動降轉成 sRGB 最接近的顏色。實務上更穩妥的做法是採「漸進增強」:品牌主色先用 sRGB 範圍內的 hex 寫進 :root 變數,再用 @supports 偵測 P3 支援度,疊上一層 P3 版本給能顯示的裝置。這樣舊裝置看得到品牌色、新裝置看得到更飽和的品牌色,兩邊都不會破版。
色彩管理與 ICC 描述檔:把轉換失真降到最低
光知道「RGB 大、CMYK 小」還不夠,真正決定轉換結果的,是夾在兩者之間的色彩管理。色彩管理的核心是一套叫 ICC profile(ICC 描述檔)的標準,它是一份記錄某個設備或某種色域如何對應人眼可見色光的對照表。當你把一個 RGB 顏色轉成 CMYK,軟體會先讀你指定的 RGB 描述檔(例如 sRGB IEC61966-2.1),把數值還原成人眼中的某個顏色,再讀目標 CMYK 描述檔(例如 Japan Color 2001 Coated),把這個顏色映射到四色油墨能表現的最接近位置。描述檔選錯,這個映射就會整套錯位,這也是很多人「明明都轉 CMYK 了,為什麼還是印不準」的關鍵原因。
選擇描述檔的原則是「對應你的實際輸出條件」。日本與台灣的平版印刷常用 Japan Color 2001 Coated 或 Coated FOGRA39(歐系)、SWOP(美系)等描述檔,差別在紙張塗布、油墨特性與網點擴張曲線。同一個 CMYK 數值套不同的描述檔,轉換出來的視覺結果會有落差。最務實的做法是直接問你的印刷廠用哪一組描述檔,拿到答案後在 Photoshop 或 Illustrator 的色彩設定裡把工作色域(Working Space)與轉換設定同步設成同一組,這樣你設計時看到的 CMYK 才會接近印出來的結果。若廠商自己也講不清楚,先以 Japan Color 2001 Coated 這類區域通用描述檔頂著用,至少不會偏離太遠。
還有一個關鍵動作叫嵌入描述檔(embed profile)。當你存檔交給印刷廠時,要把來源描述檔一起嵌進檔案裡,這樣廠商的軟體才知道「這組數值是在哪個色域下建立的」。很多色差爭議,追到最後都是因為檔案沒嵌描述檔,廠商的軟體於是套用預設值猜測,猜錯整套顏色就跑掉。在 Photoshop 裡,存檔時勾選「ICC 描述檔」選項就能嵌入;在 PDF 輸出對話框裡也有對應的色彩管理選項。把這個小動作變成你的交件標準流程,能省下大量事後爭論顏色的時間。
- 確認輸出條件:紙張、油墨、印刷方式、地區規範。
- 向印刷廠索取或確認目標 CMYK 描述檔名稱。
- 在設計軟體的色彩設定裡把工作色域與轉換設定同步成同一組描述檔。
- 轉檔時選擇合適的 rendering intent(照片用相對色度、鮮豔插畫用感知)。
- 存檔交件時勾選嵌入 ICC 描述檔,讓廠商端能正確讀取來源色域。
把螢幕與印刷色差壓到可控範圍
把色差控制住的關鍵,是從源頭就在對的色域裡工作:印刷用途一開始就開 CMYK 檔、把品牌主色用 Pantone 或 CMYK 數值先定下來、輸出前開色域警告檢查超出色域的顏色、並在正式大量印刷前先打樣一張實體校稿。這四步比任何事後補救都有效。
實務上有一套可以照著走的流程。一拿到需求,先問清楚「最後要印還是只放螢幕」。要印的,開檔那一刻就選 CMYK,連帶把工作環境的色彩描述檔(ICC profile)設成對應的印刷標準,例如 Japan Color 2001 Coated 這類常見的印刷描述檔。接著把品牌主色同時準備好 RGB 與 CMYK 兩組數值,寫進品牌規範文件,這樣以後不論誰接手都不會各自表述。設計過程中開啟軟體的色域警告,標出印不出來的高飽和色並主動替換成色域內的相近色。
設備也要顧。使用校色過的螢幕與標準光源看色,能減少設備造成的誤判;螢幕沒校色,你看的鮮豔可能根本不是真正的鮮豔。校色工具(如校色儀)會量測螢幕實際發出的光譜,產生一個專屬的螢幕描述檔,作業系統會套用這個描述檔修正顯示。螢幕大約每隔一到三個月要重新校色一次,因為面板亮度會隨時間衰減。最後、也是最貴但最有效的一步,是正式印刷前先打樣:用實體校稿確認顏色,再決定是否大量輸出。打樣要花錢,但比起印一千張海報才發現顏色全錯,這筆錢花得值得。若你常常需要輸出印刷素材,搭配WebP JPG PNG 圖片格式比較把素材端先管理好,後端色彩會更可控。
打樣還分成幾種層級,搞清楚差異才不會白花錢。軟式打樣(soft proof)是在校色過的螢幕上模擬印刷結果,免費但準確度受限於螢幕能力;噴墨打樣(inkjet proof,又稱數位打樣)用大型噴墨印表機配合認證紙張輸出,色彩接近正式印刷,是設計階段最常用的驗證方式;合約打樣(contract proof)則是經過色彩認證、廠商簽認的打樣件,色彩保證度最高,常用在大批量的正式印件。一般做名片或小量海報,噴墨打樣就足夠;做書籍或大批量包裝,建議走到合約打樣這一關,避免量產後整批出問題。
用一個常見的跨媒介品牌情境來把前面幾個觀念串起來看。假設是一個同時經營電商網站與實體包裝的品牌,主視覺採用飽和度偏高的鮮藍與鮮綠,這類站很常出現的狀況是:螢幕版本看起來鮮亮飽滿,但這組色落在 sRGB 色域邊緣、接近 Display P3 才能完整重現的範圍,一旦送進平版印刷,依典型表現幅度大約會有 15% 到 30% 的飽和度被色域壓縮擠掉,鮮藍容易偏灰濁、鮮綠則往濁黃綠偏移;若包裝採用塗布銅版紙,色域相對較寬、偏移幅度偏向區間下緣,若改用未塗布的模造紙或牛皮紙,吸墨量大、偏移則會往區間上緣靠。這時可行的決策路徑有兩條:第一是品牌主色先在 CMYK 模式下重新定色,挑選落在兩個色域重疊區的相近色,犧牲一點飽和度換取螢幕與印刷的一致;第二是只針對 Logo 與包裝核心色動用 Pantone 特別色,網頁與社群素材維持 RGB,用分流的策略各取所需。必須誠實點出來的限制是,這兩條路都沒辦法讓螢幕的鮮豔度在印刷上百分之百還原,跨媒介品牌色本來就會有一段肉眼可接受的合理落差,目標是把落差控制到一致、可預期,而不是追求兩端完全相同;若一開始就把主色定在色域重疊區、並堅持每次正式量產前打樣一張實體校稿,後續不論換印刷廠或換紙張,至少有共同的比對基準,不會每次都從零開始爭論顏色。
即便全程在 CMYK 工作也打樣了,色差仍不可能完全歸零:不同批油墨、不同紙張仍會有微小差異,目標是把誤差控制在可接受的範圍,追求的是一致到讓肉眼分不出來的程度,而非螢幕與印刷百分之百相同。設定合理預期,反而能少掉很多無謂的來回溝通。想建立一套能重複執行的設計流程,網頁設計完整入門指南可以當作起點;避開 網頁設計常見錯誤與地雷裡的配色誤區,能再少走一段冤枉路。
色差疑難排解:顏色印出來不對的成因排查
即便流程做對了,交件那一刻還是可能聽到客戶說「這不是我想要的顏色」。這時與其急著改圖,不如先照一張檢查表逐一排除原因。色彩問題的成因往往不是單一環節,把可能的原因拆開來看,反而能更快定位真正的出錯點。
| 症狀 | 可能原因 | 排查方向 |
|---|---|---|
| 整體變暗變濁 | RGB 直送印刷、色域壓縮 | 檢查檔案是否為 CMYK、重新用正確描述檔轉檔 |
| 高飽和色流失 | 鮮綠亮藍超出 CMYK 色域 | 開色域警告替換成相近色或改用 Pantone |
| 與同事螢幕看起來不同 | 兩端描述檔或螢幕未校色 | 確認雙方嵌入相同 ICC、螢幕定期校色 |
| 暗部糊成一團無階調 | 總墨量超標被強制分色 | 檢查四色總和是否超過 300%,調整暗部配色 |
| 打樣與正片不一致 | 紙張、油墨批次或印刷機不同 | 以合約打樣為準,與廠商確認輸出條件 |
| 同一檔案不同廠商結果不同 | 各家描述檔與分色設定不一 | 指定同一組 ICC 描述檔並要求嵌入 |
| 黑色印得不夠深 | 純 K 黑 vs 混色黑差異 | 確認使用單色黑(K100)或 rich black 的設定 |
表裡提到的「單色黑」與「混色黑」是另一個新手常踩的雷。單色黑是 K100、其他三色為 0,印出來是純粹的黑色油墨,適合文字與線條,邊緣銳利不暈墨;混色黑(rich black)則是四色疊加,例如 C60 M40 Y40 K100,視覺上更深更沉,適合大面積黑色色塊,但邊緣容易因套版誤差而出現色邊。把文字設成混色黑、把大色塊設成單色黑,是兩種最常見的用錯:文字會在邊緣暈出色邊影響閱讀,大色塊則會顯得不夠沉。設定時記得對應用途,文字走 K100、大色塊再考慮混色黑。
另一個常被忽略的點是網點擴張(dot gain)。油墨印到紙上會向外擴散,紙張越粗糙吸墨越多,擴張越明顯,這會讓中間調看起來比螢幕上更深。ICC 描述檔通常已經把網點擴張納入計算,但若你用的是未校正的通用描述檔、或紙張特殊,中間調就會出現系統性偏深。這時與其在螢幕上硬把顏色調淺補償,不如直接換一組更貼合紙張特性的描述檔,讓色彩管理幫你修正,而不是靠手感。
常見問題:RGB 與 CMYK 的快速答疑
RGB 與 CMYK 有什麼差別?
RGB 是給發光螢幕用的加法混色,以紅綠藍三色光、每通道 0 到 255 疊加成色;CMYK 是給印刷用的減法混色,以青洋黃黑四色油墨、濃度 0 到 100% 疊印成色。兩者差別在輸出媒介與色域大小,而非優劣。
網頁設計要用 RGB 還是 CMYK?
網頁只在發光螢幕上呈現,CSS 的 hex、rgb()、rgba()、hsl() 底層都是 RGB,所以網頁設計一律使用 RGB,沒有改用 CMYK 的理由。
為什麼 RGB 轉 CMYK 會有色差?
因為 RGB 能呈現的色域明顯大於 CMYK,那些飽和的綠、藍、螢光色在四色油墨的範圍裡根本沒有對應,軟體會把這些顏色挪到最接近的可印色上,顏色就這樣在這一步流失了。
RGB 色碼的數字代表什麼?
RGB 每個通道用 0 到 255 表示該色光的強度,數值越高越飽和。純紅是 255,0,0,純綠是 0,255,0,純藍是 0,0,255,三通道同為最大值就是白色。
如何避免螢幕與印刷的色差?
從源頭在對的色域工作:印刷用途一開始就開 CMYK 檔,品牌主色用 CMYK 或 Pantone 定色,輸出前開色域警告檢查,大量印刷前先打樣實體校稿。
回顧整個脈絡:RGB 與 CMYK 的差別,本質是輸出媒介決定色彩模式,會發光的螢幕用加法混色的 RGB,會吸光的印刷用減法混色的 CMYK。真正決定色差的因素是 RGB 色域明顯大於 CMYK,轉換注定失真。想從根源避開色差,就在對的色域裡工作、用 CMYK 或 Pantone 定品牌主色、輸出前開色域警告、大量印刷前先打樣。把這幾件事做扎實,不論是做品牌 Logo 設計案例分析還是規劃網頁版面設計與 RWD 排版,顏色都能站得穩。
色彩這件事沒有捷徑,但觀念站穩了,後面的選擇會具體很多。把 RGB 與 CMYK 的關係想成輸出媒介決定色彩模式、色域大小決定能還原多少顏色,後續判斷就不會再被色差追著跑。每個階段的成品都會回過頭來檢驗你對色彩模式的掌握,這套判斷邏輯從設計到架站都派得上用場。