不論你是平面設計師或 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。