核心顏色混合規律：從物理到視覺心理
理解顏色混合的底層邏輯，能讓配色從「靠感覺」進化為「可推演、可複現、可解釋」。
紅色系：能量核心的溫度調節器
- + 黃 → 橙紅：熱力升級、躁動、年輕、促銷感強
- + 藍 → 紫紅/玫紅：冷靜下來、優雅、女性化、高級感
- + 黑 → 暗紅/栗色/酒紅：沉穩、厚重、傳統、奢華、莊嚴
- + 白 → 粉紅/玫瑰紅：溫柔、含蓄、浪漫、年輕化、降低攻擊性
黃色系：最敏感的視覺頻率
- + 藍 → 綠黃/草綠：高傲轉為平和、生機、自然、科技綠
- + 紅 → 橙黃/橙色：冷漠轉為熱情、溫暖、食慾、親和力
- + 黑 → 橄欖綠/苔蘚綠：成熟、穩重、軍事/戶外/複古風
- + 白 → 奶黃/米黃/淡黃：柔和、易接近、兒童/母嬰/溫馨生活
藍色系：穩定器與無限畫布
- 極強的個性穩定性：加入紅/黃/黑/白/橙，藍的「冷靜/專業/內向」核心人格幾乎不變
- + 黃 (綠傾向) → 青綠/蒂芙尼藍：現代、科技、清新、高識別度
- + 紅 (紫傾向) → 靛藍/紫藍：深邃、神秘、靈性、高端科技
- + 白 → 淺藍/天藍/愛麗絲藍：輕盈、醫療/金融/雲服務信任感
綠色系：天然的和諧調解者
- 本質 = 黃(擴張/暖) + 藍(收縮/冷) → 動態平衡
- 黃分量大 → 黃綠/嫩綠/青春/活潑/幼稚感
- + 黑 → 深綠/松石綠/英倫綠：莊重、成熟、財富/金融/傳統機構
- + 白 → 薄荷綠/嫩綠/潔淨/醫療/科技清新
紫色系：最低明度的神秘王者
- 紅分量大 → 紫紅/洋紅/玫紅：壓抑感、威脅感、極強視覺張力
- + 黑 → 深紫/茄皮紫：沉悶、悲傷、恐怖、哥特風
- + 白 → 淡紫/薰衣草/淡紫丁香：優雅、嬌氣、女性魅力、療癒系
白色系：純淨畫布的微妙染色
- + 紅 → 粉白：誘惑、溫柔、婚禮/美妝/母嬰
- + 黃 → 乳白/奶白：溫潤、香膩感、食品/家居/護膚
- + 藍 → 冷白/冰白/愛麗絲藍：醫療/科技/極簡/高級感
- + 橙 → 米白/蛋殼白：乾燥質感、陶藝/手作/自然生活
- + 綠 → 蜜瓜白/嫩綠白：稚嫩、柔和、嬰童/有機/自然
- + 紫 → 幽靈白/淡紫白：若隱若現芳香感、高端美妝/香氛
網頁配色四大實戰策略
- 單色系統 (Monochromatic)： 一個色相 + 10級色階。最安全、最統一、最易維護。適合：極簡風、專業工具、內容重度站點。
- 鄰近色系統 (Analogous)： 色環相鄰 2-3 色 (如藍-青-綠)。自然和諧、層次豐富。適合：品牌延展、插畫風、情感類頁面。
- 對比色系統 (Complementary/Split-Complementary)： 主色 70-80% + 對比色 10-15% (CTA/關鍵數據/狀態) + 中性 10-15%。視覺衝擊力最強。適合：營銷頁/電商促銷/品牌首頁/儀表盤關鍵指標。
- 中性色 + 品牌色 (Neutral + Brand)： 黑白灰構建骨架，品牌色只做「強調」。最高效、最專業、最耐看。適合：SaaS/後台/企業官網/文檔站/大多數產品。
配色避坑十誡
- 🚫 全調色盤上陣 → 控制 3 個主色以內 (含中性色)
- 🚫 高純度色大面積鋪底 → 視覺疲勞、閱讀受損、無視覺焦點
- 🚫 背景圖案/紋理過於豐富 → 干擾文字可讀性
- 🚫 紅綠作為唯一狀態區分 → 色盲用戶無法識別，必須雙重編碼
- 🚫 忽略深色模式適配 → 50%+ 用戶使用深色模式
- 🚫 文字對比度不達標 → WCAG AA 4.5:1 硬指標
- 🚫 互動狀態顏色語義混亂 (如成功用紅、錯誤用綠) → 違背用戶心智模型
- 🚫 跨文化項目直接套用本地色彩隱喻 → 必須文化適配測試
- 🚫 品牌色在不同組件/狀態下不一致 → 建立設計令牌強制統一
- 🚫 為了「好看」犧牲「可用」 → 美感服務於功能，順序不可顛倒
配色工作流工具鏈
色彩是設計師手中最強大、成本最低、影響最廣的杠桿。用科學方法馭色，讓每一個像素都精準服務於業務目標與用戶體驗。