RGB 是什麼?與 CMYK 差別在哪?色彩三原色的重要概念!

RGB 是什麼?與 CMYK 差別在哪?色彩三原色的重要概念!

不論你是平面設計師或 UIUX 設計師,都一定需要對色彩原理有一定程度的了解,才能確保設計所使用的顏色能正確顯示,不產生色差。更多 色相環教學

新手設計師在製作設計時,常遇到產生色差的原因之一就是色彩模式設定錯誤。你知道網頁設計的色彩模式該選哪一種嗎?常聽到的 RGB 和 CMYK 差別在哪裡呢?

今天犬哥就要帶大家來認識這兩種色彩模式,告訴你它們的概念&應用範圍,幫助你選擇適合的色彩模式。

那麼就開始吧:)


RGB 是什麼?

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 是什麼?

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 差別,幫助大家更好分辨這兩個色彩模式。

RGBCMYK
組成顏色紅、綠、藍青、洋紅、黃、黑色
色彩原理光的三原色印刷顏料三原色+黑色油墨
色彩總數共 16,777,216 色共 1,030,401 色
所有顏色混合後產生白色黑色
適用材質電腦螢幕等..數位顯示設備紙張等..印刷材料
使用時機網頁設計、網站 Banner、社群貼文、數位照片、影片等..製作名片、海報、菜單、廣告招牌、產品包裝等..印刷產品時
RGB 與 CMYK 差別

了解 RGB 和 CMYK 的差異,有助在製作不同的設計需求時,選擇合適的色彩模式,確保顏色的準確性。


CSS 網頁色彩該用哪一種?

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 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

幫你增加網路曝光,提高你的線上營收!

WordPress 高手架站課|一堂課讓你變架站高手!

資源二:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源三:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 流量研究室 – 犬哥網站(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

加入 FB 犬哥社團
加入 FB 犬哥社團(目前有超過 9000+ 團員)

另外這是送給剛起步經營自媒體的朋友們,不論是經營網站、各類社群等都適用,立即加入 Line 群 免費領取「 神級自媒體起號工具包 」。

如果你想學更多品牌設計、社群行銷知識,也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習,可關注 YouTube 頻道

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端