TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
PaletteMaker 配色教學，把色票套進設計預覽
PaletteMaker 能把配色套進網站、手機介面與 Logo 等設計範例。本文示範三色篩選、輸入 HEX、Shuffle 重排及匯出色票，並以白字搭配淺綠與藍底的對比檢查，說明套回作品前該如何確認。
用 AI 摘要這篇文章：
選色時，幾個色塊排在一起很好看，放到登入按鈕或整張海報卻不一定合適。PaletteMaker 是一款線上配色工具，可以把同一組顏色套進網站、手機介面、Logo、海報等內建範例，邊看畫面邊調整，再匯出色票與色碼。
這篇示範從三色配色開始，換入指定 HEX、比較顏色順序，最後下載色票。跟著操作時，準備一個想用的主色色碼即可；還沒定主色，也能先從現成組合挑選。官方目前將服務列為免費，本次在桌面瀏覽器完成這條流程，沒有遇到登入或付款要求。
進入 App，先選色數與預覽類型
開啟 PaletteMaker 官網，點 Launch App 進入編輯畫面；也可以直接開啟 PaletteMaker App。停在首頁時看到的是功能介紹，要進入 App 才能開始選色。
桌面版上方是目前使用的顏色，左側排列現成色票，中間則是套色後的設計範例。先用左側 Filter 的篩選控制展開選項，在 Numbers of colors 選 2、3、4 或 5，再點一組符合色數的色票。教學以三色為例，較容易看出每個顏色替換了哪些部分。
這裡有兩種不同的篩選：Filter by color 用顏色縮小左側色票範圍；上方的 Mixed 選單則決定要看什麼設計。做網站或 App 可以切到 Web / Mobile UI，做識別設計可看 Branding & Logo，另外也有 Illustration、Typography、Poster 和 Pattern。這裡以顏色篩選列操作，沒有標成「暖色系／冷色系」的文字分類。
切換類型後，先挑一張與自己作品接近的範例。看大面積背景會不會搶走注意力、按鈕是否容易辨認，以及強調色出現得會不會太密。不同範例會以不同方式分配同組顏色；你選的是配色方向，實際畫面的色彩比例仍要回到自己的設計決定。
換入主色色碼，再比較顏色順序
想保留既有品牌色，可以直接改上方的顏色。這裡用 #2563EB 示範，操作順序如下：
- 點上方第一個顏色的編輯控制，打開色彩選擇器。
- 在 HEX 欄位輸入
#2563EB，讓欄位失去焦點後，查看第一格與中間範例是否跟著變色。 - 按 Done 結束編輯，再檢查其他色格是否仍是原本的顏色。
本次選到的三色原為 #9AC1F0、#72FA93、#A0E548；輸入後，第一色變為 #2563EB，另外兩色沒有改變。實際選到別組色票也沒關係，核對的重點是指定那一格有沒有變成你輸入的色碼。
若想比較同組顏色的不同用法，再按上方的 Shuffle。本次連按兩次，三個色碼都還在，排列順序卻改變了；第二次後依序為 #A0E548、#2563EB、#72FA93，原本放在第一格的藍色移到第二格，畫面中的色彩分配也跟著變化。
因此，要讓品牌色一直留在第一格，不能把 Shuffle 當成鎖色功能。先記下色碼與順序，或先匯出目前喜歡的組合，再嘗試重排。若某個按鈕突然換色，先檢查上方色格順序；需要回到指定配置時，逐格輸入原來的 HEX，確認預覽後再往下做。
匯出色票，依接下來的工作選格式
按 Export palette，先核對視窗內的色碼是否正確，再選匯出方式。這次調整後的組合在視窗中顯示為 Custom Palette；以自己的畫面與色碼為準，不必追求相同名稱。
| 接下來要做什麼 | 選哪個項目 | 取得後怎麼確認 |
|---|---|---|
| 留一張配色參考圖，與同事討論 | Image | 開啟下載的圖片，核對色票及下方色碼 |
| 匯入支援 ASE 的設計軟體 | ASE | 在目標軟體匯入後，確認色數及每個色碼 |
| 在 Procreate 使用色票 | Procreate | 匯入後打開色票面板，核對顏色是否一致 |
| 把色碼交給工程師或填入自己的程式 | Code | 依需要取用帶有 # 的色碼、逗號分隔文字或陣列 |
本次點 Image 實際下載到 Custom Palette.png，尺寸為 2160 × 2160。開啟後能看到三色與各自的 HEX；檔案中的三個色彩也與匯出前選定的 #A0E548、#2563EB、#72FA93 一致。這是色票參考圖，並不是預覽畫面裡的登入頁或海報設計原稿。
Code 提供的是色碼資料。 本次視窗列出有無 # 的逗號分隔文字與陣列，例如帶 # 的陣列是 ["#a0e548", "#2563EB", "#72fa93"]。如果只是要填 CSS 顏色，取出對應的一個色碼即可；整段陣列不能直接當成按鈕的背景色值。
ASE 和 Procreate 是目前介面提供的選項，本次沒有在目標軟體內實際匯入。若匯入後少色、順序不同或看起來不一致，先對照匯出視窗與已保存的 PNG，再逐一核對色碼。不要僅憑螢幕上的相似外觀就認定資料相同。
套回自己的畫面，檢查文字與背景對比
配色預覽能幫你找方向，文字是否容易閱讀，還需要看它實際放在哪個背景上。先為自己的畫面指定背景、正文、按鈕與強調色，再把真正相鄰的文字色與背景色送進 WebAIM Contrast Checker，分別填入 Foreground Color 與 Background Color。
依 WCAG 2.2 的文字對比要求，一般文字的 AA 門檻至少為 4.5:1，大型文字至少為 3:1；大型文字是至少 18 pt，或至少 14 pt 的粗體，另有 Logo 等例外。檢查普通介面文案時，先用一般文字的門檻判斷，不能只因按鈕看起來很大就套用較低要求。
以上面那組配色為例，本次在 WebAIM 將白字 #FFFFFF 的不透明度設為 1，分別測試兩個背景：
- 配
#72FA93淺綠底：顯示約 1.32:1，一般文字與大型文字的 AA 都未通過。 - 配
#2563EB藍底：顯示約 5.16:1，一般文字的 AA 通過。
這說明同一組色票內，並非每個顏色都適合搭配白字。若對比不足，可以改文字色或背景色，再測一次；若加了透明度、漸層或背景圖片，則要按實際顯示狀態重新檢查。單一文字組合通過 AA，也不代表整個網站已符合所有無障礙要求。
最後把選定色碼放回自己的設計，查看正文、按鈕及不同互動狀態，並把色票檔與用途記錄一起保存。例如記下哪個色碼用在主要按鈕，後續就能依用途核對，而不必猜它當初是色票中的第幾格。
