重點整理
PaletteMaker 是免費的線上配色工具，不用註冊，最大特色是把配色直接套進 Logo、網頁與 App UI、插圖、海報、圖樣等設計範例，讓你看到顏色實際用起來的樣子。可以依色系篩選、設定 2–5 個顏色，完成後匯出 HEX 色碼、圖片、Adobe ASE、Procreate 或程式碼。操作只要 5 個步驟。
一般配色工具多半只給一排色塊和色碼，對設計師來說夠用，但對正在找靈感、不確定顏色比例怎麼分配的人來說，很難想像這組顏色放到網站或海報上會是什麼樣子。PaletteMaker 解決的就是這個問題。這篇介紹 PaletteMaker 的功能，並示範從挑選配色到匯出色碼的完整流程。
PaletteMaker 是什麼？
PaletteMaker 是由設計師製作的免費線上配色工具，官網標明完全免費、不需要帳號。它會產生配色組合，並即時套用在預先做好的設計範例上，包括網頁與行動裝置 UI、品牌與 Logo、插圖、排版、海報和圖樣。2026 年的官網把配色產生功能標示為 AI 配色，介面和操作方式跟以前大致相同。
做好的配色可以複製 HEX 色碼，或匯出成圖片、Adobe ASE、Procreate 色票和程式碼，方便帶進 Photoshop、Illustrator、Procreate 或網頁 CSS 使用。
PaletteMaker 使用教學
到官網點「Launch App」（或「Create Your Palette Now」）就會進入配色工具，網址是 palettemaker.com/app。免費版頁面下方會顯示廣告，不影響操作。
步驟一：選擇色彩組合
左側會列出一排隨機產生的配色組合，點其中一組，右側所有設計範例就會換成這組顏色，馬上看出實際運用的效果。上方的色塊列也會顯示目前選中的顏色，點單一色塊可以編輯或刪除該顏色，按右側的交叉箭頭（Shuffle）可以打亂顏色位置。
步驟二：用顏色篩選器縮小範圍
點左上角的「Filter」可以依色系篩選，例如綠色系、藍色系、紅色系，左側就會只列出相近色系的配色。篩選器也能設定顏色數量，預設 5 個，最少 2 個；覺得顏色太多太雜，就把數量調少。
步驟三：挑選設計範例類型
上方中間的選單預設是「Mixed」（混合顯示），可以切換成只顯示 Web / Mobile UI、Branding & Logo、Illustration、Typography、Poster 或 Pattern，專心看某一種用途的效果。
步驟四：開啟單一範例的產生器
滑鼠移到某個設計範例上，會出現「Start the generator」按鈕。點下去後，這個範例會套用多組不同配色並排顯示，每組下方都有配色名稱、色塊與匯出按鈕，適合在同一個版型上比較哪組顏色最好看。
步驟五：匯出配色
點右上角的「Export palette」或範例右下角的匯出箭頭，會跳出匯出視窗，列出每個顏色的 HEX 色碼，點一下就複製到剪貼簿；也可以選擇 Image、ASE、Procreate 或 Code 下載。
想多比較幾款工具，可以參考 網站配色工具推薦；如果偏好看真實網站的配色比例，Happy Hues 也是類似思路的工具。
選好配色後，怎麼用在網站上？
從 PaletteMaker 匯出 HEX 色碼之後，還要決定每個顏色用在哪裡，網站看起來才會一致：
- 分配比例：常見的做法是「60-30-10」，約六成面積用主色或中性底色、三成用輔助色、一成用強調色。強調色留給按鈕、連結這類希望訪客點擊的地方。
- 填進佈景主題或 CSS：WordPress 的佈景主題通常可以在自訂器或主題設定裡填入全站色票；自己寫 CSS 的話，可以把顏色定義成 CSS 變數，日後改色只要改一處。
- 檢查文字對比：文字和背景的顏色太接近會看不清楚。依 WCAG 無障礙規範，一般內文與背景的對比度建議至少 4.5:1，可以用線上的對比度檢查工具確認。
常見問題
PaletteMaker 要付費或註冊嗎？
不用，PaletteMaker 官網標明完全免費，打開網頁就能使用，不需要建立帳號。免費使用時頁面會出現廣告。
PaletteMaker 可以匯出哪些格式？
可以複製 HEX 色碼，或匯出成圖片、Adobe ASE、Procreate 色票和程式碼。ASE 可以匯入 Photoshop、Illustrator 的色票面板，Procreate 格式則能直接在 iPad 上使用。
為什麼 PaletteMaker 的配色裡沒有黑色和白色？
因為黑、白通常當作文字與背景的基礎色，PaletteMaker 的配色只放主色與輔助色。實際設計時，再自行搭配黑、白或灰色當底色即可；官網的常見問題也有這一題。
結語
PaletteMaker 讓配色不再只是一排色碼，而是直接看到顏色放在 Logo、網頁、海報上的樣子。先用篩選器決定色系和顏色數量，再切換範例類型比較效果，最後匯出 HEX 或 ASE 色票，就能把配色帶進自己的設計流程。