品牌色怎麼定？網站、印刷、社群都用同一組色碼的方法

很多公司的品牌色，是當年設計 LOGO 時決定的，之後沒人整理。結果網站上的 LOGO 是一種藍綠色，名片印出來偏藍，DM 又偏灰，LINE 官方帳號的頭像是另一種綠。客人不一定說得出哪裡怪，但會覺得這家公司的東西看起來不太一致。

要讓品牌色到哪裡都一樣，第一步是了解：螢幕和印刷，用的是兩套不同的顏色系統。

螢幕色和印刷色不一樣

螢幕用 RGB。 手機、電腦螢幕用紅、綠、藍三種光混出顏色，網頁上常寫成 HEX 色碼，例如 #178080。

印刷用 CMYK。 印刷機用青、洋紅、黃、黑四種油墨疊出顏色，寫成「C80 M20 Y40 K10」這種數字。

螢幕能顯示的顏色範圍比印刷大。螢幕上很鮮豔的顏色，例如亮橘、螢光綠、飽和的藍紫，印出來常常變暗、變灰。所以同一個顏色，要分別找出它在螢幕上和印刷上最接近的數值，不能只用一組。

特別色：顏色一定要非常準的時候（例如 LOGO 的主色），印刷可以指定 Pantone 這類特別色油墨，每次印出來都一樣，但費用比較高。

整理一份品牌色票

把品牌會用到的顏色整理成一張表，交給網站、印刷廠、設計師都用同一份。每個顏色寫出：

• 用途：主色、輔助色、文字色、背景色、強調色（按鈕）。
• HEX 和 RGB：網站、社群圖片用。
• CMYK：印刷用；有指定特別色的話，也寫上色號。

顏色不用多，主色一到兩個、輔助色兩三個、文字和背景各一個就夠了。顏色越多，越難維持一致。

印刷前，先請印刷廠打樣，拿印出來的樣品和螢幕比對，確定之後把那一組 CMYK 記下來，下次直接用。

網站上要注意：文字和背景的對比

品牌色很漂亮，不代表適合拿來當文字的顏色。顏色太淺，字就不容易看清楚，對視力比較弱的人、或在太陽下看手機的人特別吃力。

國際的網頁無障礙標準 WCAG 規定：一般大小的文字和背景的對比至少要 4.5 比 1，大字至少 3 比 1。

舉個例子：品牌色 #20A0A0（明亮的藍綠色）放在白色背景上，對比只有約 3.2 比 1，拿來做大標題還可以，做內文、小字的連結就不夠。把它調深一點變成 #178080，對比提高到約 4.7 比 1，小字也看得清楚，看起來仍然是同一個色系。

做法是保留原本的品牌色用在大面積、大標題、圖示，另外訂一個「深一階」的版本，專門給小字、連結和按鈕文字用。

不要只用顏色傳達訊息

有一部分的人分不太出紅色和綠色。網站上如果只用顏色表示「有庫存」「已售完」，或圖表只靠顏色區分，這些人就看不懂。

狀態要加上文字或圖示，例如「✓ 有庫存」「已售完」；圖表的線條除了顏色，也可以用不同的形狀或直接標上名稱。

大面積黑色的印刷

DM、海報要印一大片黑底時，只用黑色油墨印，常常會偏灰、不夠黑，所以印刷時會再疊上其他顏色的油墨，讓黑色更深。但疊得太多，油墨不容易乾，紙張疊在一起時會沾到背面，顏色也容易不均。

大面積黑色要怎麼設定，每家印刷廠有自己的建議，送印前先問清楚。

社群頭像和圖片

LINE、Facebook、Instagram 會壓縮上傳的圖片，顏色可能有一點點偏差。社群用的圖片用 RGB 模式、存成 sRGB 色彩，壓縮後的偏差會比較小。印刷用的 CMYK 檔案不要直接上傳到網路上，顏色常常會跑掉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。網站設計時，我們會把品牌色整理成網站用的配色，並檢查文字的對比度，讓網站好看也好讀。

想整理品牌的顏色，或覺得網站的字不好讀？歡迎免費諮詢。