顏色在 0.1 秒內建立印象

心理學研究顯示，人對顏色的情感反應幾乎是即時的、無意識的。這意味著你的品牌配色在用戶讀到任何內容之前，就已經開始影響他們的判斷。

主要色彩的常見心理聯想：

藍色：信任、穩定、專業、科技（金融、科技業廣泛使用的原因）

橘色：活力、友善、行動力、創意（CTA 按鈕常用橘色的原因）

綠色：自然、健康、成長、平靜（健康食品、環保、金融「正成長」常用）

黑色：奢華、精緻、力量、嚴謹（高端品牌、時尚、科技旗艦產品）

金色／琥珀色：尊貴、品質、傳統、匠心（精品、高端服務業）

紅色：緊迫、激情、危險、重要（促銷、警示、食品）

這些聯想不是絕對的，文化背景也會影響（紅色在台灣文化中有喜慶意義），但可以作為出發點。

建立品牌配色系統

一個完整的品牌配色系統包含：

主色（Primary Color）：你最常用的顏色，代表品牌的核心個性。出現在 Logo、主要 CTA 按鈕、主要視覺元素。

輔助色（Secondary Color）：補充主色，用於次要元素、活躍的區塊、強調重點。

中性色（Neutral Colors）：灰色系列（從淺到深），背景色、文字色、邊框色都從這裡來。中性色通常佔網站配色的 60-70%。

語意色（Semantic Colors）：成功（綠色）、警告（黃色）、錯誤（紅色）、資訊（藍色）。這四種顏色在 UI 中有固定含義，和品牌色要保持一定距離，避免混淆訊息。

這是一個簡單易用的配色比例規則：

60% 主要顏色：通常是中性色（白色、淺灰、米白，或深色背景的深藍、深灰）。這是網站的主要背景色。

30% 次要顏色：品牌的主要識別色或輔助色，用於導航、重要區塊、卡片背景。

10% 強調色：最顯眼的顏色，用於 CTA 按鈕、重要標籤、活躍狀態。這 10% 讓用戶的視線自然被引導到最重要的行動點。

顏色最實際的應用問題：文字和背景之間要有足夠的對比度，讓人能輕鬆閱讀。

WCAG（網頁內容無障礙指南）建議：

可以用工具快速檢查：Contrast Ratio（contrast-ratio.com）或瀏覽器開發者工具的顏色選取器都有對比度顯示。

常見的對比度問題：

深色背景網站（Deep Dark UI）近年在科技和高端品牌中越來越流行，但配色邏輯和淺色系完全不同。

深色系的主要挑戰：

背景不是純黑：純黑（#000000）的對比度太強，使用深藍黑（#0D1117）、深灰藍（#0F172A）或帶有微暖色的深色（#111014）視覺上更舒適。

顏色「降溫」：高飽和度的亮色在深色背景上會顯得刺眼。把品牌橘色從 #FF6B2B 調整到 #E8622A 或同色系的淺暖色，視覺上更協調。

金色的妙用：金色（#B8922A 或 #C9A227）是深色背景上最優雅的強調色之一，微量使用可以快速建立「高端質感」的視覺印象。

透明度層疊（opacity layering）：深色系設計常用 rgba(255,255,255,0.08) 這類白色透明疊加來製造層次，比直接用灰色更有深度感。

Coolors（coolors.co）：隨機生成協調的配色方案，可以鎖定其中幾個顏色後讓它繼續生成。

Paletton：選定主色後，自動產生對應的互補色、分裂互補色、三角配色方案。

Realtime Colors（realtimecolors.com）：即時預覽你的配色在真實網頁版面中的效果，很直觀。

Adobe Color（color.adobe.com）：可以從你喜歡的圖片中擷取配色，適合「我想要和這個品牌類似的感覺」的需求。

顏色選擇看似主觀，但有了色彩理論的基礎，你就能對自己的設計決策給出理性的依據，也能更清楚地和客戶溝通配色選擇的原因。