網站配色預覽工具
把五色調色盤套用到網頁範例，檢查文字對比，並匯出對應的 CSS 色彩變數。
設定五個顏色的用途
請輸入不透明的 sRGB HEX 色碼，支援 3 碼或 6 碼，可省略 #。修改後會立即更新預覽。
用空白、逗號或分號分隔，順序為頁面背景、卡片背景、頁面文字、按鈕背景、按鈕文字。剛好五個有效色碼會立即套用，之後可再交換用途。
即時網頁配色預覽
這個靜態網頁範例用來呈現常見元件的配色效果，導覽文字與按鈕僅供視覺預覽。
為下一個靈感，留一點空間。
在製作網站、作品集或管理介面之前，先看看這組顏色放在整個頁面上的搭配效果。
把小想法說清楚
用卡片整理實用資訊，也別忘了確認內文在頁面背景與卡片背景上都容易閱讀。
看看這個企劃預覽中各組文字的對比
頁面文字 / 頁面背景
#1E293B / #F1F5F9
對比值： 13.35:1
- 一般文字 AA（4.5:1）: 符合
- 一般文字 AAA（7:1）: 符合
- 大字 AA（3:1）: 符合
卡片文字 / 卡片背景
#1E293B / #FFFFFF
對比值： 14.63:1
- 一般文字 AA（4.5:1）: 符合
- 一般文字 AAA（7:1）: 符合
- 大字 AA（3:1）: 符合
按鈕文字 / 按鈕背景
#FFFFFF / #1D4ED8
對比值： 6.70:1
- 一般文字 AA（4.5:1）: 符合
- 一般文字 AAA（7:1）: 不符合
- 大字 AA（3:1）: 符合
使用 WCAG 2 sRGB 公式檢查三組純色文字與背景，以未四捨五入的值判斷，顯示小數點後兩位。大字指一般字重至少 24 CSS px，或粗體至少 18⅔ CSS px。
匯出配色 CSS 變數
這五個自訂屬性與預覽使用的顏色一致。加入樣式表後，可透過 var(--palette-background)、var(--palette-surface)、var(--palette-text)、var(--palette-primary) 與 var(--palette-on-primary) 引用。
如何預覽網站配色
- 逐一輸入五個 HEX 色碼、貼上五色清單，或從五色調色盤產生器開啟。
- 將顏色分配到頁面、卡片、文字與按鈕，使用交換選單嘗試不同用途。
- 比較網頁預覽與三組對比結果，複製 CSS 變數或下載 .css 檔案供專案使用。
試試這些配色方式
- 以淡色頁面背景、白色卡片、深色文字與藍色按鈕的範例，規劃企業形象網站配色。
- 交換頁面背景與文字色，嘗試深色網站配色，並重新確認卡片和按鈕的對比。
- 從照片或品牌調色盤選出五個顏色，分配到介面用途，再檢查文字是否清楚易讀。
常見問題
這與色彩深淺產生器有什麼不同？
這個工具將現有的五個顏色套用到網頁用途與版面範例，不會產生新的深色或淺色。你可以交換用途，觀察同一組調色盤用在實際介面上的效果。
對比檢查會比較哪些顏色？
會分別比較頁面文字與頁面背景、頁面文字與卡片背景，以及按鈕文字與按鈕背景。每一組都會顯示一般文字 AA、一般文字 AAA 與大字 AA 的結果。
為什麼顯示 4.50:1 卻沒有通過 AA？
畫面將數值四捨五入到小數點後兩位，但判斷使用完整計算值。實際對比稍低於 4.5:1 時，即使顯示 4.50:1，仍不符合一般文字 AA。
匯出 CSS 後，網站就會自動套用配色嗎？
匯出五個 CSS 自訂屬性，在網站的背景、文字與按鈕樣式中引用，即可套用配色。
我輸入的顏色會被儲存或上傳嗎？
編輯內容只在目前瀏覽器分頁處理，色碼不會出現在分析事件中。從調色盤產生器開啟時，會透過同分頁的暫存工作階段儲存空間傳遞，成功讀取後便移除。想保留配色時，請自行複製或下載。
配色僅在目前瀏覽器分頁處理，色碼不會寫入分析事件或網址。你明確從產生器傳送的調色盤會透過同分頁的暫存工作階段儲存空間傳遞，載入後即移除。請複製或下載以保留配色。
覺得這個工具好用嗎？分享給你的團隊一起加快流程。
如果覺得不錯，按 支持；需要改進也可以按 ，我們會優先調整。