Whoops

你也許曾打開過配色產生器,盯著幾百組看起來都好看的色票,反而越看越不知道該選哪一組?或是看到某個品牌用了某個顏色爆紅,就想把自己的品牌色也換成那一支?接下來要給你的,是一套能真正幫你把品牌定位翻譯成色彩、再落地到網站與行銷素材的完整工作流,跳脫那種「藍色代表信任、紅色代表熱情」、你背了也用不出來的對照表。

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

顏色是品牌最便宜的辨識資產:先算一筆「辨識度」的帳

我們先換個方式想品牌色這件事。一個 logo 重新設計可能要花你幾萬到幾十萬,一套網站改版動輒半年;但換一組品牌色,理論上只要改幾個 hex 色碼。也因此,實務上常會強調一件事:顏色是品牌所有識別元素裡,單位成本最低、卻對「第一眼辨識度」影響最大的一個變數

辨識度這件事,你可以用一個很粗暴的方式自我測試:把你網站的截圖、你的競品的網站截圖,並排放在一張白紙上,然後退後三步眯著眼睛看。如果那一排網站看起來是「同一家人」,就代表你的品牌色根本沒有在幫你說話,它只是在追隨這個產業的預設值。

以一間室內設計公司的網站為例,這類品牌常選沉穩的墨綠當品牌色,這個顏色其實選得很好,跟主打的老屋翻新、自然材質調性完全吻合。但問題往往出在舊網站:為了讓畫面「豐富」,首圖被套了亮橘、作品集套了粉膚、聯絡區又用了灰藍,三個區塊看起來像三家不同公司。訪客在三分鐘內根本記不住「這間公司的代表色是什麼」,墨綠這個原本很有潛力的品牌色,就這樣被雜訊吃掉了。

所以品牌色的第一個任務,不是「好看」,而是「可被記住」。好看是基本門檻,可被記住才是它真正該為品牌創造的價值。如果你選了一個顏色,卻沒辦法在一年後讓老客戶閉著眼睛描述出來,那這個顏色對你的品牌辨識度的貢獻,其實是零。

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

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

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

品牌維度要回答的問題它如何翻譯成色彩
性格定位你的品牌是冷靜專業,還是熱情奔放?是穩重成熟,還是年輕活潑?決定色相(冷色/暖色)與飽和度的高低
受眾輪廓你的主要客戶落在哪個年齡層、哪個性別、哪種消費力?決定明暗與彩度的偏好;例如高齡受眾通常需要更高對比
品類情境客戶在什麼心情下、為了什麼痛點來找你?決定情緒基調;例如安親服務偏安穩、娛樂消費偏興奮

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

填完這張表,你會得到一組「色彩關鍵字」。例如一間主打高端熟齡女性的保養品牌,翻譯出來可能是:冷靜、精緻、低彩度、偏暖的米膚調。一間主打兒童程式教育的品牌,翻譯出來可能是:活力、高彩度、對比鮮明、偏冷的前進色。這組關鍵字,就是你接下來走進色票時的篩選條件,它會幫你砍掉八成不適合的顏色,讓你只在剩下的兩成裡做選擇。

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

網路上流傳的色彩心理學對照表,大多長得很像:藍色代表信任、紅色代表熱情、綠色代表自然、黃色代表活力、紫色代表奢華。這種表有它的參考價值,但你如果真的拿它來選品牌色,大概會選出一個跟同業一模一樣的顏色。為什麼?因為你的競品也看過同一張表。

換句話說,色彩心理學在實務上有三個被嚴重簡化的事實,你必須先認清:

  • 顏色的情緒聯想是文化約定,不是物理定律。白色在西方婚禮象徵純潔,在華人喪禮卻是哀悼色;紅色在華人市場是喜慶,在部分西方脈絡卻是警訊。你賣給台灣消費者跟賣給歐美消費者,同一個顏色的情緒重量可能完全不同。
  • 情緒來自組合,不是單一色相。同一個藍色,配白色是科技冷靜,配橙色是活力對比,配深灰是高級沉穩。把你品牌色的「個性」寄託在單一色相上,是色彩心理學最常被誤用的地方。
  • 產業慣例會稀釋單一顏色的訊號。當所有金融品牌都用藍色,藍色就不再「代表信任」,它只是「代表金融」。你的品牌色在這種情況下,辨識度趨近於零。

色彩心理學還是值得參考,但你要把它擺對位置:當成「排除法」的工具,用來剔除會傳達錯誤訊號的顏色(例如幼兒教育品牌用純黑色當主色),別指望它直接給你「唯一正確的那一個顏色」。關於色彩心理學更深入的色彩情緒光譜,可以再回頭參考這篇色彩心理學設計攻略,這裡我們把焦點留在「怎麼把心理學變成可執行的選色動作」。

六大色系的情緒光譜:哪一組最貼合你的產業

把色相環粗分,實務上能拿來當品牌主色的,大概可以歸成六大色系。這裡不是要給你「紅色等於熱情」這種重點摘述,而是要標出每個色系在台灣市場裡的慣用情境、優勢、跟最容易踩到的雷。你可以把這當成選色時的「地雷地圖」。

色系常見情緒聯想台灣市場高頻產業挑選時的主要風險
藍色系信任、專業、穩定金融、科技、醫療、法律同質性過高,難以區分
綠色系自然、健康、成長有機、保健、室內設計、永續偏黃綠易顯廉價,需控制彩度
紅色系熱情、食慾、急迫餐飲、促購、節慶、美容過飽和會造成視覺壓迫
橙/黃色系活力、親切、陽光教育、親子、運動、電商明度過高在白底上幾乎看不見
紫/粉色系精緻、浪漫、創意美妝、甜點、婚禮、設計彩度拿捏失當易顯俗氣
黑/灰/深色系高級、極簡、權威精品、建築、攝影、顧問對比不足時可讀性崩盤

這張表的核心訊息只有一句:不要問「你的產業適合什麼顏色」,要問「在你的產業裡,你要靠顏色走同一條路,還是走一條反差路」。走同一條路的好處是進場門檻低,消費者一眼就分類得出你是做什麼的;走反差路的好處是辨識度高,但你要有能力扛住這個反差帶來的「不像這個產業」的質疑。

這個「同質 vs 反差」的決策,其實就是你做品牌色策略時最關鍵的一個岔路。大多數人無意識地走了同質路,於是整個產業變成一整片顏色相近的網站;少數敢走反差路的品牌,反而靠顏色就先贏了一半的辨識度。色相環上兩個顏色的關係怎麼計算、互補色跟對比色到底差在哪,可以搭配色相環配色手冊色彩學完整指南一起看,你會更清楚反差路到底有多少種走法。

五步驟品牌色挑選工作流

前面講的都是觀念,這一段給你一套在實務專案裡反覆驗證過的工作流。它不是唯一的做法,但目前最能避免「選完才發現不能用」的最穩流程就是這一套。整個流程有明確的先後順序,你不能跳著做。

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

把前面那張品牌維度表填完之後,把得到的色彩關鍵字,濃縮成一句不超過二十個字的「色彩宣言」。例如「沉穩、自然、帶一點溫度的墨綠」或「高彩度、前進感、自信的珊瑚紅」。這句話是你後面所有選色動作的仲裁標準,任何一組候選色,只要不符合這句話,直接淘汰,連討論都不用。這一步看起來很瑣碎,但它能幫你省下後面八成的猶豫時間。

第二步:用工具產出候選色組,每組至少給三個備選

走進色票這一步,強烈建議用工具輔助,別只憑感覺。你不一定要從零拉色相環,可以直接用現成的配色工具輸入一個主色,讓它幫你生出和諧的輔色組合。關鍵紀律是:同一句色彩宣言,至少產出三組不同的候選色組,不要只看一組就定案。人腦在只有一個選項時會強迫自己接受它,在有三個選項時才會真正開始比較。

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

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

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

同一個 hex 色碼,在你的設計師螢幕、在你的手機、在客戶那台老舊筆電上,看起來是三個顏色。這不是誇飾,是 OLED 跟 IPS 跟 TN 面板的色域差異造成的物理事實。所以你至少要在三種裝置上看過候選色:高階設計螢幕、一般辦公筆電、中階安卓手機。如果一個顏色在其中一種裝置上明顯走山,它就不該是你的主色。

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

把你選定的品牌色,跟三四個直接競品的品牌色,放在一起給沒參與設計的人看,問他們「哪一個是這間公司的顏色」。如果對方指不出來,或把你的顏色跟競品搞混,就代表這個顏色的辨識度還不夠,你得回到第二步重新挑。這個盲測做起來只要十分鐘,但它能幫你避開「自以為很有特色,其實跟別人撞色」的最致命錯誤。

主色、輔色、強調色:60-30-10 法則的實作比例

選定主色之後,接下來的問題是:它到底要佔整個畫面的多少?這時候就要搬出室內設計領域流傳多年、但完全適用品牌網站的 60-30-10 法則。它的精神很簡單:一個視覺空間裡,主色調佔百分之六十,輔色佔百分之三十,強調色佔百分之十。這個比例之所以好用,是因為它同時滿足了「和諧」跟「焦點」兩個需求。

角色建議佔比典型用途挑色原則
主色(底色)約 60%大面積背景、網站底色、主視覺空間低彩度、高明度,通常是白、米、淺灰或淡化的品牌色
輔色約 30%區塊背景、次要標題、圖片色塊、卡片跟主色同色系或鄰近色,負責支撐層次
強調色約 10%CTA 按鈕、連結、重要圖示、焦點元素跟主色呈對比,是品牌真正的「代表色」

這裡有一個很反直覺的重點很多人會搞錯:你的「品牌代表色」通常不是佔六成的那個顏色,而是佔一成的強調色。因為佔六成的必須是低刺激的安靜顏色,否則整個畫面會造成視覺疲勞;你品牌真正的個性、真正會被記住的那個顏色,反而是面積最小、但透過對比跳出來的強調色。這也是為什麼很多品牌的 logo 主色跟網站主底色差很多,logo 用的是強調色,網站底色反而是中性色。

把這個邏輯想通了,你就會理解為什麼很多國際大品牌的網站看起來「乾淨又有辨識度」:他們把品牌色壓在那一成的關鍵位置上(主要是 CTA 跟重點強調),其他九成留給中性色去撐呼吸感。關於 CTA 按鈕怎麼用顏色引導點擊,可以再深入看CTA 設計指南,這裡先記住一個原則:強調色出現的地方,就是要讀者採取行動的地方。

實作比例時,建議你直接在設計稿或網站上,用一個笨方法檢驗:把畫面截圖,轉成灰階,看看層次還在不在。如果轉灰階之後整個畫面糊成一團,代表你的色彩對比不足以撐起視覺層次,這時候不是加更多顏色,而是回頭調整明度差。這個灰階測試,比盯著彩色螢幕瞎猜準得多。

實務上最常見的比例錯誤有三種,你可以拿來自我檢查。第一種是把品牌強調色直接當成大面積底色,結果整個網站變得極度刺激,訪客待不到三十秒就想關掉。第二種是輔色挑了一個跟主色完全衝突的色相,兩個顏色在畫面上互相打架,層次反而被破壞掉。第三種是強調色用得太少、太分散,沒有集中在它該出現的行動點上,結果最重要的 CTA 看起來跟一般文字沒兩樣。這三種錯誤的共同來源,都是把 60-30-10 當成裝飾數字,而沒有看懂它背後「層次與焦點」的邏輯。

品牌色要過技術這關:對比度、可讀性與深色模式

這一段是絕大多數品牌色文章不會講、卻最常讓品牌色在實務上翻車的地方。你選的顏色在設計稿上再漂亮,只要過不了接下來這幾個技術關卡,它就稱不上是一個能上線的品牌色。

第一關是對比度。網頁可及性標準(WCAG)對文字跟背景的對比度有明確規範:正常文字至少要達到 4.5:1,大字或粗體至少 3:1。你那一組看起來很優雅的淡藍配淺灰,對比度可能只有 2:1,在年輕設計師的螢幕上勉強看得見,在一般使用者螢幕上根本是霧裡看花。對比度不足不只是設計問題,它會直接影響你的網站能不能被所有使用者(包括視力退化、在陽光下用手機的使用者)正確閱讀。你在挑品牌色當背景或文字色時,務必用對比度檢查工具驗一遍,不要用眼睛憑感覺判斷。

第二關是色彩模式。品牌色在螢幕上是 RGB 加法混色,在印刷品上是 CMYK 減法混色,這兩個色域的涵蓋範圍不同,同一個 hex 色碼印出來可能整個走色。如果你的品牌會同時出現在網站跟名片、海報、包裝這類印刷品上,你必須在選色階段就同步準備 RGB 跟 CMYK 兩組數值,並實際打樣確認。RGB 跟 CMYK 的色域差異、為什麼螢幕上看起來鮮豔的顏色印出來會變濁,這部分的原理跟轉換實作可以參考這篇RGB 與 CMYK 色彩模式解析,這裡只強調一個實務結論:千萬不要等到印刷前一天才發現顏色不對,那個時候你已經沒有退路了。

第三關,也是現在越來越不能放過的一關,是深色模式。現代瀏覽器跟作業系統幾乎都支援深色模式,而且越來越多使用者預設開啟。你的品牌色如果只設計了淺色背景的版本,到了深色模式下可能完全失去對比,甚至變成另一個品牌。這代表你選色時,要同時思考這個顏色在深色背景上的呈現:它需不需要一個稍微調亮的深色模式版本?它跟深色背景的對比夠不夠?這些問題現在已經是品牌色規範的標準配備,不是選配。

深色模式帶來的另一個考驗是:你的強調色在深色背景上,往往需要稍微調亮或調降飽和度,才能維持跟淺色版相近的視覺重量。很多品牌直接把淺色版的同一個 hex 值套到深色背景上,結果強調色不是變得過於刺眼,就是被深色整個吃掉、CTA 按鈕看起來灰灰矇矇的。建議你為深色模式準備一組「微調版」的強調色數值,並在規範文件裡明確標示它是深色模式專用,這樣開發跟設計就不會誤把淺色版直接套過去。這個動作看起來龜毛,但它決定了你的品牌色在越來越普及的深色環境裡,到底是被正確看見,還是悄悄走山。

另一個跟技術高度相關、卻常被品牌端漏掉的點:你的品牌色很大一部分是透過圖片傳遞的(hero 大圖、產品照色調、社群貼文模板),而這些圖片如果沒有做好壓縮,網站載入速度就會被拖垮。一個配色再完美的網站,只要開啟速度太慢,使用者在看到你的品牌色之前就已經離開了。Google 在 web.dev 上明確指出,網頁載入速度從一秒拉長到三秒,跳出率會明顯上升,而速度之所以重要,是因為它直接決定了使用者會不會留下來體驗你的品牌(見 Google 在 web.dev 上的說明)。所以品牌色的落地,從來不只是設計問題,它也包含了圖片壓縮、字型載入這類技術紀律。如果你還沒把網站的圖片壓縮流程建立起來,可以先從這篇圖片壓縮工具實測著手。

競品色盤分析:在同質市場裡用顏色殺出重圍

前面反覆提過「不要跟競品撞色」,這一段我們把這件事變成一個可執行的分析動作。競品色盤分析不是要你抄競品,正好相反,它是為了讓你有系統地避開競品,找出色彩空隙。

實務上的做法是這樣:把你的五到八個直接競品的網站首頁截圖,貼到同一張白紙上,然後做三件事。第一,標出每一家最主要的品牌色是什麼(用滴管工具吸取 hex 值)。第二,把這些顏色排在色相環上,看看它們集中在哪一個色系區塊。第三,找出色相環上完全沒有人佔據的空隙,那就是你潛在的色彩機會區。

舉個具體的場景:如果你做的是法律事務所,你跑完這個分析,大概會發現八成的競品都擠在深藍、藏青這個區塊,少數用深紅或深綠。這時候你的色彩機會可能落在兩個地方:一是繼續走藍色系,但用一個明顯不同的明度或彩度做出差異;二是大膽走一個完全沒人用的色系,例如深墨綠或深咖啡,搭上極簡的版面,反而能在一片藍海裡被記住。這兩個選擇沒有絕對的對錯,它取決於你的品牌定位要「安全進場」還是「差異化進場」。

再換一個場景:如果你做的是咖啡館或烘焙品牌,跑完競品色盤分析,大概會看到一片焦糖棕、奶油白、暖橘,大家都在搶同一個「手作溫暖」的色彩印象。這時候反差路的機會,是往冷色系走,用一組帶灰的深青或墨黑,搭配大量留白跟質感攝影,反而能在一片暖色的甜膩裡,殺出「職人、冷靜、都會」的定位。但反差路要走得起來,你的攝影風格、字體挑選、文案語氣都必須同步撐住這個調性,否則顏色孤立地反差,只會讓消費者覺得「哪裡怪怪的」。這也是為什麼反差路不能只看色相環上的空隙就衝動填進去,它終究要回到你的品牌定位能不能撐起這個選擇。

這個分析還有一個延伸用途:它幫你判斷你選的顏色到底夠不夠獨特。如果你跑完發現你的候選色跟其中一個競品在色相環上的距離非常近,那就回到前面五步驟工作流的第五步,重新挑。寧可這時候多花一個禮拜重選,也不要上線後被客戶跟競品搞混。色彩辨識度的戰場,在你上線那一刻就已經決定了八成。

品牌色落地的六個接觸點:從 Logo 到網站到 CTA 按鈕

選好品牌色,不等於它會自動出現在該出現的地方。品牌色要真正發揮效果,必須在六個關鍵接觸點上保持一致。你可以在心裡把這六個點想成「品牌色的六個考試科目」,任何一科不及格,整體辨識度就會被打折。

  1. Logo 跟標準字。Logo 是品牌色最濃縮的載體,這裡的顏色必須是最精準的那一個 hex 值,不能有「差不多就好」。Logo 跟標準字的色彩搭配,會回頭影響整個品牌色的使用基調,如果你想深入這部分,可以看品牌 Logo 設計案例分析Logo 標準字設計技巧
  2. 網站主視覺。網站的 hero 區是訪客對你品牌色的第一印象,它在三秒內決定別人怎麼記憶你。這個區塊的色彩配置要嚴格遵守 60-30-10 比例,強調色精準地落在 CTA 上。整體網站的色彩計畫怎麼系統化展開,可以搭配網頁配色實戰指南一起規劃。
  3. CTA 按鈕。CTA 是品牌色「創造價值」的地方,它是把辨識度轉換成點擊的關鍵接觸點。CTA 的顏色通常是你的強調色,而且它的對比度必須是整個頁面裡最高的,讓使用者的視線自然被吸過去。
  4. 社群貼文模板。社群是品牌色曝光頻率最高的地方,但你會發現很多品牌的社群貼文跟網站看起來像兩個品牌,這就是模板沒有統一色彩規範的結果。固定一組貼文背景色、強調色、文字色的組合,長期累積下來就是強大的視覺資產。
  5. Email 與電子報。Email 客戶端對色彩的支援參差不齊,有些會強制覆寫你的樣式,所以 Email 裡的品牌色要用最保守、最廣泛支援的方式呈現,通常是把強調色放在標題跟按鈕上,其他地方留白。
  6. 印刷與實體素材。名片、海報、包裝、招牌,這些實體素材的色彩精準度,取決於你有沒有準備好 CMYK 版本並做好打樣。前面提過的 RGB 跟 CMYK 色域差異,在這一關會用最殘酷的方式檢驗你。

這六個接觸點,就是品牌色能不能被記住的真實戰場。把六個接觸點的色彩一致性做好,品牌色才會從「一個好看的顏色」變成「能被消費者記住的識別資產」。如果正在思考更上層的整體識別系統,CIS 企業識別系統會把色彩放進完整的品牌識別脈絡,說明色彩跟 Logo、標準字及版面規範如何互相支撐。

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

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

這份文件不需要做成幾十頁的品牌手冊,但它至少要涵蓋下列幾個欄位,缺一不可。你可以把它想成「任何一個剛接手的人,憑這份文件就能把品牌色用對」的最小標準:

欄位該寫的內容為什麼必要
色票清單主色、輔色、強調色的命名與 hex 值統一所有人腦中「那一個顏色」到底是哪一個
多色域數值每個顏色的 RGB、CMYK、HSL 數值應付螢幕、印刷、簡報軟體的不同色域
使用比例60-30-10 的實際配置示範防止主色被誤用成大面積底色
對比組合哪些顏色可搭文字、哪些不行直接解決可讀性爭議,不用每次重算
禁止事項不能改色、不能加色、不能降透明度當新色把最常見的走樣方式提前封死

這份文件的真正價值,從來不在於它做得多精美,而在於它能不能被一個剛報到的工讀生,在不問任何人的情況下,把品牌色用對。建議把它做成一頁就能看完的版本,放在公司共享空間跟設計檔案的根目錄,讓它成為任何要動到品牌色的人,第一個會去翻的查閱點。當一致性不再依賴任何單一個人的記憶,你的品牌色才真正開始長期、穩定地替你累積辨識度。規範成形後,也可以把色票、Logo 檔與指定字體一起收進數位資產庫,例如用 Eagle 建立品牌庫,日後任何人要取用正確版本的檔案,都有單一入口可查。

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

實務上最常見、也最致命的品牌色地雷有三個,在這裡一次攤開來講。它們都稱不上什麼高深的事,但每一個都真的會讓品牌色毀掉。

第一個地雷:為了「豐富」而不斷增加顏色。這就是開頭那間室內設計公司的狀況,一組很好的墨綠品牌色,被「畫面要豐富」這個念頭慢慢稀釋掉。品牌的視覺豐富度,真正來自的是層次、留白、跟攝影質感,跟顏色數量的關係其實不大。加顏色是最廉價、也最容易毀掉辨識度的一種「豐富」。

第二個地雷:跟著流行換品牌色。每隔一兩年就會有一個「年度代表色」或某個大品牌爆紅的顏色,然後一堆品牌就跟著改色。品牌色是一個需要時間累積辨識度的資產,你每改一次,過去累積的視覺記憶就歸零一次。除非你的品牌定位真的發生結構性轉變,否則品牌色應該是一個「五年級別」的決策,不是「季度級別」的決策。

第三個地雷:只在單一裝置上做決定。這一點前面工作流的第四步提過了,但它的殺傷力大到值得在這裡再講一次。只在設計師的高階螢幕上選色,是品牌色翻車最常見的原因。現在超過六成的全球網站流量來自行動裝置,你的品牌色被看到的第一個、也是次數最多的那個螢幕,是手機,不是設計師的螢幕(依 Statista 的統計,2026 年 4 月)。不在手機上驗證過的品牌色,就不算選完。

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

  1. 寫出一句不超過二十個字的色彩宣言,把它貼在你看得到的地方,作為後面所有判斷的仲裁標準。
  2. 用配色工具產出至少三組候選色,不允許自己只看一組就定案,強迫產生比較空間。
  3. 把候選色實際貼到你的 logo、網站 hero、CTA、社群模板上,在真實素材上做決定,不要在色票網站上做決定。
  4. 在三種裝置上檢驗:高階螢幕、一般筆電、中階手機,任何一個走山就要回頭重挑。
  5. 跑一次競品盲測,確認你選的顏色真的能被區分出來、沒有跟競品撞在一起。
  6. 用對比度檢查工具驗文字跟背景的對比,正常文字至少 4.5:1,大字至少 3:1,這一關沒過的顏色不能上線。
  7. 同步準備深色模式版本跟 CMYK 印刷數值,不要等到要用才發現沒準備。
  8. 寫成一份色彩規範文件,把主色、輔色、強調色的 hex 值、RGB 值、CMYK 值、使用比例、禁止事項全部寫清楚,交給團隊跟外包,讓一致性不依賴任何單一個人的記憶。

品牌色這件事,說到底就是一句話:它是一個需要被系統化經營的識別資產,不是一個憑感覺選的裝飾。你願意在前面花時間把定位翻譯成色彩、把候選色丟進真實素材跟跨裝置測試、把規範寫成文件,你的品牌色就會開始替你工作,在每一次曝光裡累積辨識度。這條路不快,但它累積下來的東西,是任何競品都搶不走的。

常見問題

品牌顏色要怎麼挑選才不會後悔?
先把品牌個性、目標客群、使用情境寫成條件清單,至少產出三組候選色,再依 60-30-10 比例定出主色、輔助色、強調色,最後務必用 RGB 與 CMYK 雙色碼在螢幕與印刷上實際打樣。後悔多半來自省略前置條件或只看螢幕未打樣。
主色、輔助色、強調色的比例要怎麼分配?
採用業界慣用的 60-30-10 黃金比例:主色約佔 60% 負責定調,輔助色約 30% 做層次,強調色約 10% 落在 CTA 與關鍵圖示。比例失衡比色相選錯更傷質感,把心力放在比例而非色相上,往往比換顏色更能拉起整體質感。
為什麼品牌色在螢幕和印刷上看起來不一樣?
螢幕使用 RGB 加色模式、印刷使用 CMYK 減色模式,兩者色域範圍不同,同一個 hex 色碼印出來可能整個走色。做法是同一個品牌色同時準備 RGB 與 CMYK 兩組色碼,並在實際印廠打樣後才定案。
CTA 按鈕該用品牌色的哪一個顏色?
用強調色。它的角色就是刻意跟主色拉出反差,把使用者視線引導到要點擊的位置,面積維持約一成即可;若畫面其他位置也大量使用強調色,CTA 會失去對比優勢,這時要把非 CTA 元素的強調色收回。

操作步驟

  1. 寫條件清單:用三到五個形容詞定義品牌個性,寫下目標客群的年齡、性別、產業屬性與使用情境,作為後續所有決策的過濾器。
  2. 做情緒板加負空間板:收集想要的參考,也刻意收集絕對不要的風格,用線上配色工具即可上手。
  3. 收斂到三色:用配色工具從圖中提取色盤後,主動刪減到主色、輔助色、強調色三個品牌色加一兩個功能色,並檢查每個顏色的明度層次。
  4. 套 60-30-10 比例:主色約 60%、輔助色約 30%、強調色約 10%。先做出標準版當基準,再考慮是否為明確的品牌策略理由偏離。
  5. 切 CMYK 預覽加實體打樣:在選色階段先淘汰印不出來的色,定案前要求印廠實體打樣確認。
  6. 寫規範文件並檢查 WCAG:把色票清單、多色域數值、使用比例、對比組合、禁止事項等欄位填齊放到共用空間,同時用 WCAG 對比比值檢驗文字組合,手機端到戶外實測一次。

主題聚落|色彩學與配色心理 看「網頁設計與前端開發」中樞 →

相關文章

褚崇名(Sliven) 創辦人・巫普斯科技有限公司

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

完整作者介紹LinkedInGitHubX

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

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