一、如何精準提取適配的配色方案

Photoshop 內建的「存儲為 Web 所用格式」功能（快捷鍵 Ctrl+Shift+Alt+S）是快速提取圖片主色調的利器。操作流程分為兩大步驟：

1. 尋找參考圖片

首先確定設計風格，蒐集大量符合調性的高解析度圖片進行篩選。本教程以 Galaxy S4 內建壁紙為例——色彩豐富、畫面明亮、尺寸龐大，提取出的顏色純度極高。

2. 執行色彩提取

將選定圖片置入 Photoshop，開啟「存儲為 Web 所用格式」對話框，格式選 PNG-8，色塊數設為 8（可依需求調整）。程式會自動依畫面面積比例篩選出 8 個代表色。點擊色板右側下拉選單選擇「存儲色彩表」，儲存為 .act 檔，再用 Photoshop 開啟即可在色板面板看到提取的色組。

3. 提取成果：3 色相 8 色階

得到的色板涵蓋三大色相，各具深淺層次，為後續設計奠定堅實基礎。

二、提取色彩如何落地應用

以提取色系打造一款 Metro 風格改良版網頁為例（內容為佔位文字），展示色彩在真實介面中的協調運作。

頁面結構與配色策略

頁面自上而下分為導航區、 Banner 區、內容區三大塊：

• 導航區：文字與 Logo 採用最淺藍色，保持輕盈感。
• Banner 區：直接沿用原始壁紙作大背景，主標題 Logo 用最深藍色形成視覺錨點。
• 內容區：三組色相交替出現，若直接平鋪易顯突兀，故插入數張過渡圖片調節節奏；正文文字沿用導航淺藍，按鈕則以白色疊加透明度處理，避免色彩衝突。

設計師三多：多看、多想、多練。工具只能輔助，唯有不斷觀察、分析、實踐，才能將色彩駕馭得游刃有餘。