品牌色彩挑選指南:從色彩心理學到實務應用

品牌顏色挑選指南:從品牌需求與受眾任務建立候選,檢查版面角色、文字對比、跨裝置及印刷輸出,再整理色票、用途和版本規範。
本頁目錄
- 把顏色放進整體品牌識別
- 選色之前,先把品牌定位翻譯成色彩語言
- 色彩心理學的真相:沒有萬用解碼表,只有文化與情境
- 六組色系候選:用實際畫面檢查
- 五步驟品牌色挑選工作流
- 第一步:鎖定品牌關鍵字,寫成一句色彩宣言
- 第二步:產出可以比較的候選色組
- 第三步:把候選色實際貼到你的真實素材上
- 第四步:跨螢幕與跨情境測試
- 第五步:做競品盲測,確認它真的能被區分
- 主色、輔色、強調色:60-30-10 法則的實作比例
- 品牌色要過技術這關:對比度、可讀性與深色模式
- 競品色盤分析:比較整體識別與使用方式
- 品牌色落地的六個接觸點:從 Logo 到網站到 CTA 按鈕
- 品牌色規範文件:讓一致性不依賴任何人的記憶
- 三個最常見的品牌色地雷,與一份可複製的行動清單
品牌色要能在網站、Logo、社群與實體素材中使用。先釐清品牌希望傳達的感受、受眾的任務及輸出條件,再把候選色放進真實版面測試,最後整理成團隊可以查閱的規範。
快速重點整理:品牌色的本質,是選一組能被記住、能被正確顯示、能在同業裡被區分出來的顏色系統,而不僅是挑一個好看的顏色而已。它的源頭是你的品牌定位與目標受眾,它的終點是一份團隊與外包都能照著做的色彩規範。中間這段路,就是接下來要陪你走完的內容。
把顏色放進整體品牌識別
品牌色可以協助建立識別,但更換顏色可能連動網站元件、包裝、招牌與行銷素材。開始選色前,先盤點使用範圍、維護成本與已有的品牌資產,才能決定是微調還是重新設計。
把本站和直接競品的頁面並排,可觀察色彩、版面、字型與圖像的相似程度。這是尋找設計問題的起點;要評估辨識,還需讓熟悉目標市場的使用者參與。
以一個假設的室內設計品牌為例:若品牌以墨綠為主,但每個頁面都新增不同的裝飾色,團隊可以先檢查這些顏色各自的用途。統一重複角色、保留作品照片需要的色彩,通常比要求所有畫面只剩墨綠更實用。
品牌色的效果要和名稱、Logo、字型及使用經驗一起評估。可以觀察使用者是否容易辨認來源、區分競品,並在不同接觸點找到一致的線索。
選色之前,先把品牌定位翻譯成色彩語言
絕大多數的品牌色挑選之所以會卡關,是因為跳過了這一步:直接打開色票就開始選顏色。這就像還沒想清楚要煮什麼菜,就走進超市把看起來順眼的食材全部丟進購物車一樣。在碰任何色票之前,你得先把品牌定位翻譯成「色彩語言」。
實務上的做法是把品牌拆成三個維度,逐一轉換。你可以跟著這張表,把自己品牌的答案填進去:
左右捲動檢視完整表格
| 品牌維度 | 要回答的問題 | 如何用於選色 |
|---|---|---|
| 性格定位 | 希望使用者如何描述品牌? | 建立幾組不同色彩與版面假設,再收集回饋 |
| 受眾需求 | 在什麼裝置、環境及視覺條件下使用? | 安排可讀性、辨識與跨裝置測試 |
| 使用任務 | 使用者需要閱讀、比較、購買還是尋求協助? | 決定背景、資訊、狀態與操作色的角色 |
這三個維度背後其實就是 STP 分析(市場區隔、目標市場、品牌定位)跟 Persona 人物誌的色彩版延伸。如果你還沒做過這兩件事,強烈建議先回頭把品牌定位跟目標受眾輪廓理清楚,再來談選色,否則你等於是在沒有地圖的情況下選路。
把研究結果寫成可討論的關鍵字,例如「清楚、安定、保留作品照片的空間」。接著用不同的明度、彩度與色相組合探索這些方向;年齡、性別或產業名稱本身不足以決定配色。
色彩心理學的真相:沒有萬用解碼表,只有文化與情境
色彩聯想研究能幫助提出假設,但實際感受還會受文字、圖像、品牌經驗和文化背景影響。挑色時可把這些研究與目標市場的回饋一起使用。
理解色彩聯想時,可以先區分以下三件事:
- 聯想與效果不同。研究中把某色與某情緒連在一起,不等於該色會使網站使用者產生同樣情緒或購買。
- 配色要放進情境。背景、面積、明暗、文字與圖像會共同影響畫面呈現。
- 市場慣例要實際觀察。競品分析與使用者研究可協助判斷熟悉感及差異,而不是只套用產業對照表。
選色時,先記錄你想傳達的感受,再請目標使用者描述實際看到的印象;兩者有落差時,檢查整個版面而非只換色相。研究的用法可搭配色彩心理學設計攻略閱讀。
六組色系候選:用實際畫面檢查
以下六組是整理候選色的方便分類,並非產業使用率統計。每一組都應回到實際角色、對比與輸出條件判斷。
左右捲動檢視完整表格
| 候選色系 | 可比較的用途 | 主要檢查 |
|---|---|---|
| 藍色 | 品牌色、連結或背景 | 不同角色是否容易辨識,文字對比是否足夠 |
| 綠色 | 品牌色、圖像搭配或狀態 | 狀態需文字或圖示輔助 |
| 紅色 | 品牌、重點或錯誤狀態 | 重要訊息是否與裝飾用途混淆 |
| 橙/黃色 | 重點、背景或圖形 | 淺色版本在白底上的可見性 |
| 紫/粉色 | 品牌識別或內容配色 | 在不同明度、彩度及媒材上的呈現 |
| 黑/灰/深色 | 文字、表面或整體主題 | 前景、背景與互動狀態的層次 |
可以同時比較接近市場慣例與較有差異的兩種方向。辨識度還受到 Logo、名稱、版型與曝光經驗影響,應把候選放進完整素材測試。
競品分析能幫助你看見已有的選色方式,再決定哪些特徵值得延續、哪些可以改變。色相關係可搭配色相環配色手冊與色彩學完整指南理解,最後仍以品牌用途和實際畫面判斷。
五步驟品牌色挑選工作流
下面五步是一種可重複的工作順序。測試出現新問題時,可以回到前一步調整,並保留選擇理由。
第一步:鎖定品牌關鍵字,寫成一句色彩宣言
把品牌需求濃縮成一段簡短描述,例如「沉穩、自然,讓作品照片保持主角」。它可以協助比較候選,但仍要接受使用者回饋與技術測試的修正。
第二步:產出可以比較的候選色組
可以用配色工具從品牌主色或參考圖開始,建立幾組在明度、彩度或色相關係上有差異的候選。每組都要說明想解決的問題,讓比較有明確依據。
第三步:把候選色實際貼到你的真實素材上
這是最容易被跳過、卻最關鍵的一步。不要在色票網站上做決定,色票網站的背景是純白、是它自己的版面,跟你的真實使用情境完全不同。你必須把每一組候選色,實際貼到你的 logo、你的網站 hero 區、你的 CTA 按鈕、你的社群貼文模板上,用真實素材去檢驗。一個在色票上看起來很美的顏色,貼到你的產品照片上可能瞬間變濁,這種事只有實際套上去才看得出來。

第四步:跨螢幕與跨情境測試
同一色碼在不同裝置上可能呈現差異,原因包括色域、校色、亮度、軟體色彩管理和環境光。依本站受眾挑選代表性裝置,檢查品牌辨識與可讀性;若差異明顯,先確認色彩描述檔和輸出流程,再決定是否調整色票。
第五步:做競品盲測,確認它真的能被區分
可將候選與競品素材交給目標使用者比較,記錄熟悉程度、是否看過品牌,以及是否出現混淆。新品牌尚未建立記憶時,單看色塊認不出名稱很常見;應結合完整識別與實際任務解讀回饋。
主色、輔色、強調色:60-30-10 法則的實作比例
60-30-10 可用來提醒自己分配主要、次要與強調角色,但各設計系統的計算範圍不同。例如 USWDS 的比例說明針對非 base 色彩。實作時先定義哪些畫面元素納入比較,再依內容和任務調整。
左右捲動檢視完整表格
| 角色 | 配置思路 | 典型用途 | 檢查重點 |
|---|---|---|---|
| 主導色 | 承接較大面積 | 背景、主要區塊 | 與內容及前景文字的關係 |
| 次要色 | 補充結構與區隔 | 卡片、區塊、圖像搭配 | 是否有明確角色及層級 |
| 強調色 | 保留給少數需要注意的元素 | 主要操作或重要資訊 | 與周圍元素及狀態的辨識 |
品牌代表色可以作為背景、文字、圖形或強調色,依媒材和用途採不同版本。Logo 主色不必與網頁背景相同;規範中應說明每種用法及可搭配的前景色。
主要動作要容易辨認,顏色之外也要配合位置、文字、形狀與狀態。強調色可以用於重要資訊,互動元件則應保持一致的操作線索;細節可看CTA 設計指南。
灰階預覽可協助檢查明暗層次,但還要搭配文字對比、色覺模擬與實際操作。若主次不清楚,可以比較字級、位置、留白或色差的調整,不必只靠增加顏色。
檢查配色時,先找出是否有太多元素爭奪注意力、相鄰區塊難以區分,或主要操作不易辨認。再分別調整面積、明暗、彩度和位置,並以真實任務測試改善。
品牌色要過技術這關:對比度、可讀性與深色模式
品牌色上線前,至少要檢查對比、色彩輸出,以及產品有提供的不同主題。每項檢查都應使用實際前景、背景和素材。
WCAG 2.2 AA 的一般文字對比至少為 4.5:1,大型文字至少為 3:1;大型文字通常指 18pt 一般字重、14pt 粗體或 CJK 等效尺寸,另有標誌文字、純裝飾及停用元件等例外。用工具測量實際組合,並檢查必要非文字資訊及狀態,才知道哪個用途需要改色。
螢幕與印刷的色彩呈現涉及不同設備、媒材與色域。品牌規範應記錄 RGB 色彩空間,以及特定印刷條件下的 CMYK 或特別色版本;和印廠確認 ICC 描述檔、紙材及打樣,不只保存兩組數字。原理可看RGB 與 CMYK 色彩模式解析。
若網站提供深色模式,就要在深色背景上檢查品牌、文字、操作與狀態色。先列出需要支援的主題與元件,再確認哪些色值可以共用、哪些需要調整。
深色背景可能改變色彩的相對觀感。調整明度、彩度或背景都是可比較的方式,最後以實際對比與可辨識性決定。將通過檢查的組合寫入主題規範,讓設計與開發使用相同版本。
品牌色也會出現在照片和社群素材中。處理網站圖片時,應在檔案大小、色彩與細節之間比較,搭配實際載入資料確認;web.dev 的速度說明可提供背景,工具可參考圖片壓縮工具實測。
競品色盤分析:比較整體識別與使用方式
競品色盤分析可記錄市場上既有的視覺方式,幫助討論差異及一致性。先選與目標客群和服務情境相關的品牌,再觀察完整素材。
收集具代表性的競品首頁,記錄品牌色、文字、背景與操作色的用途。滴管取得的是該截圖中的值,可能受壓縮與顯示設定影響;若需精確品牌色,優先查官方品牌規範。最後比較色彩之外的版面、字型和圖片。
例如,假設研究中的法律事務所多採深藍,你可以比較不同明度的藍色與另一組色相。兩組都應放進相同內容和版面,再請目標使用者評估清楚程度與品牌印象。
咖啡館也可以比較暖色與較冷的方案,觀察它們和店面、包裝及產品照片是否一致。把攝影、字型與文字一起納入測試,比只找一個競品沒用過的顏色更有依據。
若候選與競品接近,先判斷完整識別是否造成混淆,再考慮微調或重選。色相距離只是觀察項目之一,使用者對名稱、Logo 和服務的熟悉程度也會影響辨識。
品牌色落地的六個接觸點:從 Logo 到網站到 CTA 按鈕
下面六類接觸點可用來盤點品牌色。依品牌實際有使用的媒材安排檢查,並記錄允許的版本。
- Logo 與標準字。記錄網頁、深淺背景及印刷版本,核對清晰度與使用規範。可參考品牌 Logo 設計案例分析和Logo 標準字設計技巧。
- 網站主視覺。把標題、圖像與操作放在一起檢查主次,相關配置可搭配網頁配色實戰指南。
- CTA 按鈕。確認主要與次要動作、文字對比,以及鍵盤焦點、hover 等狀態。
- 社群模板。定義共用背景、文字與圖像用法,同時保留內容需要的變化。
- Email。在主要收件軟體與深淺模式下實測,確認內容和操作仍清楚。
- 印刷及實體素材。按紙材、墨水和製程確認色彩描述檔、特別色及打樣;名片完稿可對照名片送印檔案規格。
將各接觸點的規範整理在同一處,能減少團隊交接時的落差。整體識別可參考CIS 企業識別系統,理解色彩跟 Logo、標準字與版面如何配合。
品牌色規範文件:讓一致性不依賴任何人的記憶
很多品牌把前面這些功夫都做完了,卻在最後一步功虧一簣:選定了一組漂亮的品牌色,然後把它們留在設計師的腦袋跟某一份設計檔案裡。結果設計師離職、外包換人、半年後要出一批社群素材,沒有人記得當初那個 hex 值到底是哪一個,於是每個人憑印象挑一個「差不多」的顏色,一致性就這樣一點一滴漏光。一份寫下來的品牌色規範文件,就是防止這件事發生的保險。
規範可以從下列欄位開始,再依品牌媒材和協作方式補充:
左右捲動檢視完整表格
| 欄位 | 內容 | 用途 |
|---|---|---|
| 色票與角色 | 名稱、用途、色值與版本 | 讓團隊找到相同來源 |
| 輸出條件 | RGB 色彩空間;印刷用的 ICC 描述檔、CMYK 或特別色 | 保留色值的適用條件 |
| 配置示例 | 實際版面、主次與例外 | 說明角色,而非只列百分比 |
| 對比組合 | 背景、前景、字級、狀態與測試結果 | 避免把一組測試結果套到不同用途 |
| 變更流程 | 可調整範圍、審核與更新紀錄 | 維護多媒材及多主題的一致性 |
把常用規範放在容易查閱的位置,並標示版本與維護人。色票、Logo 和字體授權也可收進共同資產庫,例如用 Eagle 建立品牌庫;交接時再確認檔案是否仍是目前核准版本。

三個最常見的品牌色地雷,與一份可複製的行動清單
以下三種維護問題,可以一起納入規範檢查。
第一,新增顏色卻沒有說明用途。先檢查是否能沿用既有角色,再依內容和語意需要增加,避免相同用途散落多個近似色。
第二,改色前沒有盤點影響。品牌定位、可讀性或媒材需求都可能需要調整色票;每次變更應記錄原因、更新範圍與轉換安排,讓新舊素材能有序交接。
第三,只用單一裝置作決定。Statista 的全球行動流量資料可作市場背景,測試仍應由本站的裝置與使用情境決定,涵蓋重要的螢幕及實體輸出。
把上面這些全部整進來,下面是一份你今天就能開始執行的品牌色挑選行動清單。它對應的就是前面五步驟工作流加上三個地雷的防呆:
- 寫下品牌需求、受眾任務和實際使用媒材。
- 建立具有差異的候選色組,說明各自探索的方向。
- 把候選套入 Logo、頁面、操作與行銷素材。
- 用目標裝置檢查色彩、文字與互動狀態。
- 結合競品觀察和使用者回饋,確認是否有混淆。
- 驗證文字及必要非文字資訊的適用對比要求。
- 依產品支援的主題與印刷需求,確認版本和打樣。
- 整理規範、檔案與變更紀錄,指定維護方式。
一套可用的品牌色規範,應能說明每個顏色的用途、通過哪些測試,以及如何在不同素材中重現。從一個實際頁面開始驗證,再把確認過的做法擴展到其他接觸點。
常見問題
品牌顏色怎麼挑?
一定要用 60-30-10 嗎?
螢幕和印刷如何保持一致?
CTA 要用哪個顏色?
操作步驟
- 盤點需求記錄品牌方向、目標使用者的任務、裝置與媒材。
- 建立候選選幾組具有可比較差異的配色,說明各自目的。
- 套用真實素材在 Logo、頁面、按鈕與行銷素材中觀察主次和辨識。
- 驗證呈現測試文字對比、狀態、目標裝置,以及需要支援的印刷和深色版本。
- 整理規範保存角色、色值、輸出條件、測試與變更紀錄,指定維護方式。