whoops.

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

品牌色由定位條件出發,經實際套用與測試後寫入使用規範。
品牌色由定位條件出發,經實際套用與測試後寫入使用規範。

品牌顏色挑選指南:從品牌需求與受眾任務建立候選,檢查版面角色、文字對比、跨裝置及印刷輸出,再整理色票、用途和版本規範。

本頁目錄

品牌色要能在網站、Logo、社群與實體素材中使用。先釐清品牌希望傳達的感受、受眾的任務及輸出條件,再把候選色放進真實版面測試,最後整理成團隊可以查閱的規範。

快速重點整理:品牌色的本質,是選一組能被記住、能被正確顯示、能在同業裡被區分出來的顏色系統,而不僅是挑一個好看的顏色而已。它的源頭是你的品牌定位與目標受眾,它的終點是一份團隊與外包都能照著做的色彩規範。中間這段路,就是接下來要陪你走完的內容。

把顏色放進整體品牌識別

品牌色可以協助建立識別,但更換顏色可能連動網站元件、包裝、招牌與行銷素材。開始選色前,先盤點使用範圍、維護成本與已有的品牌資產,才能決定是微調還是重新設計。

把本站和直接競品的頁面並排,可觀察色彩、版面、字型與圖像的相似程度。這是尋找設計問題的起點;要評估辨識,還需讓熟悉目標市場的使用者參與。

以一個假設的室內設計品牌為例:若品牌以墨綠為主,但每個頁面都新增不同的裝飾色,團隊可以先檢查這些顏色各自的用途。統一重複角色、保留作品照片需要的色彩,通常比要求所有畫面只剩墨綠更實用。

品牌色的效果要和名稱、Logo、字型及使用經驗一起評估。可以觀察使用者是否容易辨認來源、區分競品,並在不同接觸點找到一致的線索。

選色之前,先把品牌定位翻譯成色彩語言

絕大多數的品牌色挑選之所以會卡關,是因為跳過了這一步:直接打開色票就開始選顏色。這就像還沒想清楚要煮什麼菜,就走進超市把看起來順眼的食材全部丟進購物車一樣。在碰任何色票之前,你得先把品牌定位翻譯成「色彩語言」。

實務上的做法是把品牌拆成三個維度,逐一轉換。你可以跟著這張表,把自己品牌的答案填進去:

左右捲動檢視完整表格

品牌維度要回答的問題如何用於選色
性格定位希望使用者如何描述品牌?建立幾組不同色彩與版面假設,再收集回饋
受眾需求在什麼裝置、環境及視覺條件下使用?安排可讀性、辨識與跨裝置測試
使用任務使用者需要閱讀、比較、購買還是尋求協助?決定背景、資訊、狀態與操作色的角色

這三個維度背後其實就是 STP 分析(市場區隔、目標市場、品牌定位)跟 Persona 人物誌的色彩版延伸。如果你還沒做過這兩件事,強烈建議先回頭把品牌定位跟目標受眾輪廓理清楚,再來談選色,否則你等於是在沒有地圖的情況下選路。

把研究結果寫成可討論的關鍵字,例如「清楚、安定、保留作品照片的空間」。接著用不同的明度、彩度與色相組合探索這些方向;年齡、性別或產業名稱本身不足以決定配色。

色彩心理學的真相:沒有萬用解碼表,只有文化與情境

色彩聯想研究能幫助提出假設,但實際感受還會受文字、圖像、品牌經驗和文化背景影響。挑色時可把這些研究與目標市場的回饋一起使用。

理解色彩聯想時,可以先區分以下三件事:

  • 聯想與效果不同。研究中把某色與某情緒連在一起,不等於該色會使網站使用者產生同樣情緒或購買。
  • 配色要放進情境。背景、面積、明暗、文字與圖像會共同影響畫面呈現。
  • 市場慣例要實際觀察。競品分析與使用者研究可協助判斷熟悉感及差異,而不是只套用產業對照表。

選色時,先記錄你想傳達的感受,再請目標使用者描述實際看到的印象;兩者有落差時,檢查整個版面而非只換色相。研究的用法可搭配色彩心理學設計攻略閱讀。

六組色系候選:用實際畫面檢查

以下六組是整理候選色的方便分類,並非產業使用率統計。每一組都應回到實際角色、對比與輸出條件判斷。

左右捲動檢視完整表格

候選色系可比較的用途主要檢查
藍色品牌色、連結或背景不同角色是否容易辨識,文字對比是否足夠
綠色品牌色、圖像搭配或狀態狀態需文字或圖示輔助
紅色品牌、重點或錯誤狀態重要訊息是否與裝飾用途混淆
橙/黃色重點、背景或圖形淺色版本在白底上的可見性
紫/粉色品牌識別或內容配色在不同明度、彩度及媒材上的呈現
黑/灰/深色文字、表面或整體主題前景、背景與互動狀態的層次

可以同時比較接近市場慣例與較有差異的兩種方向。辨識度還受到 Logo、名稱、版型與曝光經驗影響,應把候選放進完整素材測試。

競品分析能幫助你看見已有的選色方式,再決定哪些特徵值得延續、哪些可以改變。色相關係可搭配色相環配色手冊與色彩學完整指南理解,最後仍以品牌用途和實際畫面判斷。

五步驟品牌色挑選工作流

下面五步是一種可重複的工作順序。測試出現新問題時,可以回到前一步調整,並保留選擇理由。

第一步:鎖定品牌關鍵字,寫成一句色彩宣言

把品牌需求濃縮成一段簡短描述,例如「沉穩、自然,讓作品照片保持主角」。它可以協助比較候選,但仍要接受使用者回饋與技術測試的修正。

第二步:產出可以比較的候選色組

可以用配色工具從品牌主色或參考圖開始,建立幾組在明度、彩度或色相關係上有差異的候選。每組都要說明想解決的問題,讓比較有明確依據。

第三步:把候選色實際貼到你的真實素材上

這是最容易被跳過、卻最關鍵的一步。不要在色票網站上做決定,色票網站的背景是純白、是它自己的版面,跟你的真實使用情境完全不同。你必須把每一組候選色,實際貼到你的 logo、你的網站 hero 區、你的 CTA 按鈕、你的社群貼文模板上,用真實素材去檢驗。一個在色票上看起來很美的顏色,貼到你的產品照片上可能瞬間變濁,這種事只有實際套上去才看得出來。

候選品牌色需套入 Logo、網站與社群素材等實際接觸點再比較。
候選品牌色需套入 Logo、網站與社群素材等實際接觸點再比較。

第四步:跨螢幕與跨情境測試

同一色碼在不同裝置上可能呈現差異,原因包括色域、校色、亮度、軟體色彩管理和環境光。依本站受眾挑選代表性裝置,檢查品牌辨識與可讀性;若差異明顯,先確認色彩描述檔和輸出流程,再決定是否調整色票。

第五步:做競品盲測,確認它真的能被區分

可將候選與競品素材交給目標使用者比較,記錄熟悉程度、是否看過品牌,以及是否出現混淆。新品牌尚未建立記憶時,單看色塊認不出名稱很常見;應結合完整識別與實際任務解讀回饋。

主色、輔色、強調色: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 按鈕

下面六類接觸點可用來盤點品牌色。依品牌實際有使用的媒材安排檢查,並記錄允許的版本。

  1. Logo 與標準字。記錄網頁、深淺背景及印刷版本,核對清晰度與使用規範。可參考品牌 Logo 設計案例分析和Logo 標準字設計技巧。
  2. 網站主視覺。把標題、圖像與操作放在一起檢查主次,相關配置可搭配網頁配色實戰指南。
  3. CTA 按鈕。確認主要與次要動作、文字對比,以及鍵盤焦點、hover 等狀態。
  4. 社群模板。定義共用背景、文字與圖像用法,同時保留內容需要的變化。
  5. Email。在主要收件軟體與深淺模式下實測,確認內容和操作仍清楚。
  6. 印刷及實體素材。按紙材、墨水和製程確認色彩描述檔、特別色及打樣;名片完稿可對照名片送印檔案規格。

將各接觸點的規範整理在同一處,能減少團隊交接時的落差。整體識別可參考CIS 企業識別系統,理解色彩跟 Logo、標準字與版面如何配合。

品牌色規範文件:讓一致性不依賴任何人的記憶

很多品牌把前面這些功夫都做完了,卻在最後一步功虧一簣:選定了一組漂亮的品牌色,然後把它們留在設計師的腦袋跟某一份設計檔案裡。結果設計師離職、外包換人、半年後要出一批社群素材,沒有人記得當初那個 hex 值到底是哪一個,於是每個人憑印象挑一個「差不多」的顏色,一致性就這樣一點一滴漏光。一份寫下來的品牌色規範文件,就是防止這件事發生的保險。

規範可以從下列欄位開始,再依品牌媒材和協作方式補充:

左右捲動檢視完整表格

欄位內容用途
色票與角色名稱、用途、色值與版本讓團隊找到相同來源
輸出條件RGB 色彩空間;印刷用的 ICC 描述檔、CMYK 或特別色保留色值的適用條件
配置示例實際版面、主次與例外說明角色,而非只列百分比
對比組合背景、前景、字級、狀態與測試結果避免把一組測試結果套到不同用途
變更流程可調整範圍、審核與更新紀錄維護多媒材及多主題的一致性

把常用規範放在容易查閱的位置,並標示版本與維護人。色票、Logo 和字體授權也可收進共同資產庫,例如用 Eagle 建立品牌庫;交接時再確認檔案是否仍是目前核准版本。

共用的色彩規範與資產入口,可協助團隊取用核准版本。
共用的色彩規範與資產入口,可協助團隊取用核准版本。

三個最常見的品牌色地雷,與一份可複製的行動清單

以下三種維護問題,可以一起納入規範檢查。

第一,新增顏色卻沒有說明用途。先檢查是否能沿用既有角色,再依內容和語意需要增加,避免相同用途散落多個近似色。

第二,改色前沒有盤點影響。品牌定位、可讀性或媒材需求都可能需要調整色票;每次變更應記錄原因、更新範圍與轉換安排,讓新舊素材能有序交接。

第三,只用單一裝置作決定。Statista 的全球行動流量資料可作市場背景,測試仍應由本站的裝置與使用情境決定,涵蓋重要的螢幕及實體輸出。

把上面這些全部整進來,下面是一份你今天就能開始執行的品牌色挑選行動清單。它對應的就是前面五步驟工作流加上三個地雷的防呆:

  1. 寫下品牌需求、受眾任務和實際使用媒材。
  2. 建立具有差異的候選色組,說明各自探索的方向。
  3. 把候選套入 Logo、頁面、操作與行銷素材。
  4. 用目標裝置檢查色彩、文字與互動狀態。
  5. 結合競品觀察和使用者回饋,確認是否有混淆。
  6. 驗證文字及必要非文字資訊的適用對比要求。
  7. 依產品支援的主題與印刷需求,確認版本和打樣。
  8. 整理規範、檔案與變更紀錄,指定維護方式。

一套可用的品牌色規範,應能說明每個顏色的用途、通過哪些測試,以及如何在不同素材中重現。從一個實際頁面開始驗證,再把確認過的做法擴展到其他接觸點。

常見問題

品牌顏色怎麼挑?
先盤點品牌需求、受眾任務與媒材,建立可比較的候選,再套入 Logo、頁面與素材。結合使用者回饋、對比及輸出測試,記錄選擇理由。
一定要用 60-30-10 嗎?
它是主從配置的參考。先定義比較的範圍,再依內容、圖片和操作需求調整;品牌代表色可出現在不同角色。
螢幕和印刷如何保持一致?
記錄 RGB 色彩空間,以及印刷條件適用的 CMYK、ICC 描述檔或特別色。與印廠確認紙材和製程,必要時打樣,避免只用數字轉換判斷。
CTA 要用哪個顏色?
選擇在實際背景上清楚、與其他操作一致的顏色,並檢查文字與互動狀態。位置、形狀和標籤也要一起判斷,強調色不必限定只用於按鈕。

操作步驟

  1. 盤點需求記錄品牌方向、目標使用者的任務、裝置與媒材。
  2. 建立候選選幾組具有可比較差異的配色,說明各自目的。
  3. 套用真實素材在 Logo、頁面、按鈕與行銷素材中觀察主次和辨識。
  4. 驗證呈現測試文字對比、狀態、目標裝置,以及需要支援的印刷和深色版本。
  5. 整理規範保存角色、色值、輸出條件、測試與變更紀錄,指定維護方式。

Whoops 巫普斯科技有限公司

專注技術 SEO、GEO/AEO 與 AI 搜尋實務。本站文章以可驗證資料、公開來源與實作觀察整理而成。

關於 Whoops編輯守則服務內容

想把這篇的方法用在自己的站上?

SEO 健檢、GEO/AEO 引用優化、網頁設計諮詢——把文章裡的方法落地到你的網站。