重點整理
Happy Hues 是免費的配色靈感網站，收錄 17 組調色盤，特色是把每組顏色直接套在一個完整網頁上，讓你看到背景、標題、按鈕、卡片、插圖各該用哪個顏色。點色碼就能複製；網站同時整理色相、明度、飽和度等色彩名詞與色彩心理學。2026 年 10 月仍可正常使用，不需註冊。
拿到一組好看的色票，真正難的是「哪個顏色放哪裡」：背景用哪色、按鈕用哪色，文字放上去看不看得清楚。很多配色網站只給色碼，Happy Hues 則是直接用整個網站示範每一組配色，換一組，整頁跟著變。這篇說明 Happy Hues 的使用方式，以及怎麼把它的配色帶回自己的網站。
Happy Hues 是什麼？
Happy Hues 是一個「把顏色放進情境」的配色靈感網站，官方的說法是讓你看到顏色在實際設計專案裡可以怎麼用。網站本身就是示範頁：選一組調色盤，整個頁面的背景、標題、段落、按鈕、卡片和插圖都會換成那組顏色。目前共有 17 組調色盤。
步驟一：從左側選一組調色盤
進入網站後，左側是 17 組調色盤，每組以編號區分；右側是套用該配色的網頁。點選任一組，右邊整頁會立刻換色，可以快速比較不同配色在同一個版面上的感覺。
步驟二：開啟區塊色彩說明，點色碼複製
右上角有兩個開關：
- Toggle palettes：開關左側的調色盤清單，關掉可以用全寬畫面看效果。
- Toggle section colors：開關每個區塊下方的色彩說明，會逐項列出這個區塊的 Background（背景）、Headline（標題）、Sub headline（副標）、Button（按鈕）、Button text（按鈕文字），以及插圖的 Stroke、Main、Highlight、Secondary、Tertiary 顏色。
點色碼就會複製到剪貼簿，直接貼到 Figma、Photoshop 或 WordPress 佈景主題的顏色設定即可。這份「元素對應顏色」的清單，就是 Happy Hues 最實用的地方。
步驟三：順便學色彩名詞與色彩心理學
往下捲動，網站還有兩段教學內容：
- Color terminology：解釋 Hue（色相）、Tint（加白）、Shade（加黑）、Tone（加灰）、Value（明度）、Saturation（飽和度），以及在 Figma 等軟體裡怎麼調出這些變化。
- The psychology of color：介紹紅、黃、藍等顏色給人的感受，以及常被聯想到的關鍵字，例如紅色常和勇氣、力量、熱情連在一起。
把 Happy Hues 的配色用到自己網站的小技巧
- 照著元素對應來用：背景、標題、按鈕的顏色照 Happy Hues 的分配，比自己重新分配更不容易出錯。
- 按鈕色要和品牌色協調：如果已有品牌色，可以挑「按鈕／Highlight」接近品牌色的那組，再微調。
- 檢查文字對比：調整過顏色後，記得確認文字在背景上清楚可讀。
需要更多配色工具，可以參考 網站配色工具推薦 與 Adobe Color 教學。
常見問題
Happy Hues 要付費或註冊嗎？
不需要，打開網站就能瀏覽全部調色盤並複製色碼。
Happy Hues 有幾組配色？
2026 年 10 月查詢時共有 17 組調色盤，每一組都有完整的網頁套用示範。
Happy Hues 的色碼要怎麼複製？
開啟右上角的「Toggle section colors」，區塊下方會列出各元素的色碼，點一下就會複製到剪貼簿。
結語
Happy Hues 的組數不多，但每一組都告訴你「顏色該放在哪裡」，對不是設計背景、又要自己架站的人特別有幫助。挑一組喜歡的配色，照著背景、標題、按鈕的分配套用，網站看起來就會整齊很多。