不論你是平面設計師或 UIUX 設計師，都一定需要對色彩原理有一定程度的了解，才能確保設計所使用的顏色能正確顯示，不產生色差。更多 色相環教學。
新手設計師在製作設計時，常遇到產生色差的原因之一就是色彩模式設定錯誤。你知道網頁設計的色彩模式該選哪一種嗎？常聽到的 RGB 和 CMYK 差別在哪裡呢？
今天犬哥就要帶大家來認識這兩種色彩模式，告訴你它們的概念＆應用範圍，幫助你選擇適合的色彩模式。
那麼就開始吧：）
RGB 是什麼？
RGB 又稱色彩三原色，R 代表紅色（Red）、G 為綠色（Green）、B 為藍色（Blue），這三種顏色是螢幕色彩模式中的基本色。
由於螢幕是透過「 發光 」顯示，所以當然就會使用 RGB，也就是光的三原色，作為色彩模式。
在 RGB 色彩模式中，顏色色碼使用 0 到 255 之間的數字來表示，數值越高顏色越飽和。
純紅色的數值為（255, 0, 0）、純綠色為（0, 255, 0）、純藍色為（0, 0, 255）。你可以透過調整其中一個顏色的數值來顯示你想要呈現的顏色，這稱為加法混色。
加法混色是透過將紅（R）、綠（G）、藍（B）三原色的色光，以不同的比例相加混色，就能混合出各種顏色。三種顏色相加到最大值就會變成白色（255, 255, 255）。
透過調整 RGB 數值，設計師們就能夠調出各式各樣精美的顏色，用在網頁、社群媒體等..各樣設計中。
RGB 使用時機
由於 RGB 屬於光的三原色，因此適合用在會發光的螢幕上的設計，像是網頁設計、社群貼文、電商圖等..螢幕用設計。
以下列出幾點常見使用 RGB 色彩模式的例子，讓各位有個概念：）
-
網頁設計
-
品牌 Logo（用於官網、社群時）
-
網站 Banner
-
社群貼文（Facebook、Instagram 等..）
-
電商圖文
-
數位照片、影片
簡單來說，如果設計內容將以數位螢幕呈現（例如：電腦、手機、平板、電視、相機等..），就會需要使用 RGB 色彩模式。
CMYK 是什麼？
CMYK 分別代表著青色（Cyan）、洋紅色（Magenta）、黃色（Yellow）、黑色（Key plate），通常用於印刷領域。
小備註：Key plate 是「 定位套版 」的意思，印刷時通常會使用黑色做為標定套版位置的顏色，因此定位套版色指的就是黑色。
由於印刷品不像螢幕會發光，而是透過「 反射光 」進入人眼，因此不適合使用 RGB 色彩模式。
且顏料是吸收光線，而不是增強光線，因此顏料的三原色會使用可以個別吸收光的三原色的顏色，也就是紅綠藍的補色：青、洋紅、黃。
有了顏料三原色後，再加上黑色油墨，就能形成所謂的「 全彩印刷 」，所以印刷品通常是使用 CMYK 色彩模式。
CMYK 以濃度 0 到 100% 來表示，當不同顏色的墨水重疊在一起時，就會降低顏色的亮度。當所有顏色疊印到最厚時，就會變成黑色。
CMYK 實際偏色程度依不同廠牌色料配方會有不同差異，此外，印刷技術、紙張和黑色油墨的品質也都會影響成品顏色。
CMYK 使用時機
CMYK 通常會用於海報、名片等..印刷輸出物，印刷廠商通常也會要求設計師提供 CMYK 色彩模式的印刷檔。
這邊也列出幾點使用 CMYK 色彩模式的例子，讓大家更有概念：）
-
名片
-
海報傳單
-
餐廳菜單
-
書籍、雜誌
-
廣告招牌
-
產品包裝
簡單來說，當設計最終會透過印刷的方式產出，那在開始設計時，你就應該設定使用 CMYK 色彩模式，確保印出來的色彩符合預期。
RGB 與 CMYK 差別？
RGB 和 CMYK 都是專業設計師常接觸的色彩模式，但兩者之間有著許多差異。若是一開始用了 RGB 來設計，最後轉成 CMYK 也會產生色差。
以下整理幾點 RGB 與 CMYK 差別，幫助大家更好分辨這兩個色彩模式。
| RGB | CMYK | |
|---|---|---|
| 組成顏色 | 紅、綠、藍 | 青、洋紅、黃、黑色 |
| 色彩原理 | 光的三原色 | 印刷顏料三原色＋黑色油墨 |
| 色彩總數 | 共 16,777,216 色 | 共 1,030,401 色 |
| 所有顏色混合後產生 | 白色 | 黑色 |
| 適用材質 | 電腦螢幕等..數位顯示設備 | 紙張等..印刷材料 |
| 使用時機 | 網頁設計、網站 Banner、社群貼文、數位照片、影片等.. | 製作名片、海報、菜單、廣告招牌、產品包裝等..印刷產品時 |
了解 RGB 和 CMYK 的差異，有助在製作不同的設計需求時，選擇合適的色彩模式，確保顏色的準確性。
CSS 網頁色彩該用哪一種？
那麼在 設計網頁 時，該使用 RGB 還是 CMYK 呢？
由於網站主要是以電腦、平板、手機等..螢幕呈現在用戶眼前，螢幕屬於「 發光 」的數位顯示設備，因此在進行網頁設計時，須以 RGB 色彩模式為主。
包含網站文字、背景色、Logo、Icons 等..，都建議在 RGB 色彩模式下進行設計。
且 RGB 模式有更廣泛的色域，能夠呈現出更多樣、更豐富的顏色，因此更適合讓設計師用來搭配多樣的配色。更多 配色靈感網站。
此外，RGB 模式還提供 RGBA（紅、綠、藍、透明度）的顏色模式，可以輕鬆為色彩加上透明度，創造更豐富、質感的視覺效果。
總而言之，適合螢幕使用的 RGB 色彩模式，就是 CSS 網頁設計的最佳選擇：）
常見問題
RGB 是什麼？
RGB 又稱色彩三原色，R 代表紅色（Red）、G 為綠色（Green）、B 為藍色（Blue），這三種顏色是螢幕色彩模式中的基本色。透過調整 RGB 數值，設計師們就能夠調出各式各樣精美的顏色，用在網頁、社群媒體等..各樣設計中。
CMYK 是什麼？
CMYK 分別代表著青色（Cyan）、洋紅色（Magenta）、黃色（Yellow）、黑色（Key plate），通常用於印刷領域，像是名片、產品包裝、廣告招牌等..設計。
RGB 和 CMYK 差異？
RGB 和 CMYK 不論是在色彩原理、顏色總數、適用時機上，都有相當不同的特性。簡單來說，RGB 適用於數位顯示設備（電腦、手機等..），CMYK 則適用於印刷物品（名片、廣告招牌等..）。
WordPress 學習資源
學習網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 3 項實用資源，可有效幫助大家做學習。
資源一：WP 高手架站課（線上課程）
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！
點擊下面了解課程，立馬擁有自己的品牌網站，並增加網路曝光度！
資源二：SEO 排名飆升課（線上課程）
網站建立完畢後，但卻沒有流量怎麼辦？或是只能靠花錢投廣告才會有訂單？
這門 SEO 排名飆升課，教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..，大幅提升行銷能力。
點擊下面了解課程，帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
資源三：犬哥數位（專業 WordPress 網頁設計公司）
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！
資源四：更多犬哥教學資源
如果你在操作過程中遇到問題，可以加入 犬哥研討社（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。
如果你想學更多網頁設計、數位行銷知識，可關注 YouTube 頻道，或是歡迎追蹤 犬哥網站 IG。
