色彩提取不靠感覺，靠科學流程。本教學揭秘「存儲為 Web 格式」隱藏功能：以 PNG-8 量化提取畫面主導色，構建 3 色相 8 色盤；實戰演示 Metro 風格頁面佈局中的色彩分配邏輯：導航/標題/內容區層級色彩映射、過渡圖片緩衝色衝、透明度疊加技巧，理論結合實踐，直擊設計痛點。

一、科學提取合適色彩：Web 格式量化法

核心工具

存儲為 Web 所用格式（Ctrl + Shift + Alt + S）

兩步走流程

1. 找圖：風格定調與篩選

確定設計風格 → 搜集大量符合風格大圖（大尺寸色彩更準） → 篩選對比 → 選定 1-3 張基準圖。案例選用 Galaxy S4 系統壁紙：色彩豐富、積極向上、超大尺寸。

圖 02

2. 提色：PNG-8 量化自動篩選

打開基準圖 → 存儲為 Web 格式 → 格式選 PNG-8 → 色塊數設 8（可按需調整） → 面板自動呈現畫面佔比最大的 8 色 → 點擊色板右側下拉選單 → 存儲色彩表（.act 格式） → 用 PS 打開 .act 文件，色板面板即顯示提取色組。

圖 01

圖 03

圖 04：3 色相 8 色提取成功

二、提取色彩如何落地應用：Metro 頁面實戰邏輯

頁面三區色彩映射策略

圖 05：最終頁面效果

圖 06：頁面結構拆解

區域	色彩分配邏輯
導航區	最淺藍色（最高亮度色）作為 Logo/導航文字，通透輕盈
Banner 區	直接使用原始素材大圖作背景，承載最豐富色彩
內容區	三色相色彩輪轉出現；按鈕用白色疊加透明度而非直接用提取色，避免色衝

關鍵技巧總結

• 過渡圖片緩衝：內容區色相切換處插入過渡圖片，調整畫面節奏，避免生硬色塊堆砌。
• 白色疊加透明度：UI 元素（按鈕、分割線）用白色 + 不透明度替代純色，適應多色背景且不衝突。
• 文字色彩統一：正文/導航文字統一用最淺藍，保持視覺一致性。
• 設計師三多：多看、多想、多練 —— 看到、理解、用自己的形式表達出來。

進階建議

若無現成完美素材圖，可在 PS 中先調色（曲線/色相飽和/色彩平衡）再提取。建立個人「風格-色板」素材庫，長期積累，調用即用。