Kissmetrics 數據顯示：觀察顏色時，視覺訊號經視神經→下丘腦→腦垂體→甲狀腺，激素釋放引發情緒波動，最終驅動行為。科學證實顏色能引發負面情緒；訪客 90 秒內形成判斷，**62%-90% 的互動由產品顏色決定**。《Web UI Design for the Human Eye》指出：顏色在創造強烈第一印象上扮演不可否認角色。

顏色含義速查表（受個人偏好與文化影響）

圖片來源：UXpin

色彩心理非精準科學：認知與社會因素雙重影響

圖片來源：Kissmetrics

• 女性普遍偏愛紫色，男性多不喜歡（一般情況）。
• 巴黎歐萊雅官網：頁眉頁腳黑色傳達地位感與優雅，白色文字呈現現代靜謐，紫色代表奢華、優雅、女性特質——完美契合品牌定位。

• 女性健康雜志網站：大面積粉紅反而適得其反。粉紅老套且吸引「愛吃甜食人群」，與「女性健康」嚴肅主題脫節；次級頁面仍大面積粉紅，更加劇負面感受。

確定顏色主題：三大經典配色法

1. 三角色彩計劃：色環上相隔 120° 的三色，分別作背景、內容、導航，基礎穩健平衡。
   圖片：Ray Trygstad/維基百科
2. 復合色（互補色）：四色，兩組對比色（色環相鄰兩色的 180° 補色），難度較高但效果極佳。
   圖片：Ray Trygstad/維基百科
3. 近似色：側重互補色，強調色彩活力，誇大後可能過猛，需謹慎把控。
   圖片：Ray Trygstad/維基百科

關鍵在於將所有顏色作為整體考量——它們如何協同工作，而非單挑一色。需與背景、文字、按鈕等元素相得益彰，創造和諧。

實戰拆解：Codementor 配色邏輯

圖片來源：Codementor

• 黑色背景：傳達優質、精細、正式、統一企業形象，暗示學習編程是職業技能而非愛好。
• 紅色按鈕：與黑色強對比，專用於交易/註冊等核心 CTA，謹慎使用避免喧賓奪主。
• 白色文字/線性圖標：提供最高對比度，符合整體方案；半透明白色按鈕引導向下滾動獲取更多內容。

整體優雅正式，紅色點綴精準轉化——教科書級示範。

避雷顏色：棕色與橙色

• 棕色：喚起自然感、可靠性，但為大多數男性最不喜歡顏色。UPS 用棕色傳達「可靠」，懷俄明大學橄欖球隊棕色裝備卻被評「史上最差」，因男性不喜棕色抵消了「強度、耐用」正面聯想。
• 橙色：女性最不喜歡顏色之一，女性用戶群產品慎用。

圖片來源：Color Matters

以上為指導原則，具體仍依賴文案內容，**最重要的是所有顏色相得益彰、創造和諧。**

實用配色工具推薦

1. Adobe Color CC — Adobe 用戶信賴之選
2. Paletton — 簡單拾色器，適合新手
3. Flat UIColor Picker — 扁平設計專用
4. Mudcube Color Sphere — 提供主題選擇與十六進制值
5. Check My Colours — 檢查前景背景對比度，兼顧色盲用戶
6. Color — 螢幕滑動取色，調飽和度，輸出十六進制碼

從實例學習

成千上萬網站用色彩造就影響力，亦有大量反面教材。Awwwards 按色彩分類的優秀站點，輕易看懂其配色邏輯。