調色盤與對比檢查器 使用方法
- 1
從一個顏色開始
輸入或選擇基準色，再挑選類似色、三角配色或分裂互補色等配色規則，也可以直接產生隨機配色。
- 2
鎖定與微調
再次隨機配色前，先鎖定喜歡的色票；也可以直接編輯任何一個色票，或從照片中取出五種主要顏色。
- 3
檢查可讀性
開啟「對比」，依 WCAG 2.2 的 AA 與 AAA 標準檢查文字與背景的搭配，套用建議的修正，並預覽調色盤在色盲視覺下的樣子。
- 4
匯出
複製 CSS 變數、Tailwind v4 主題或 v3 設定、SCSS 或 JSON（含 50–950 色階），也可以下載 PNG 色票。
限制與 Pro
全部免費：5 色調色盤、6 種配色規則、不限次數的隨機配色與匯出，取色圖片上限 50 MB，PNG 色票寬 1600 像素。
關於 調色盤與對比檢查器
這個調色盤產生器會建立五色配色，並備齊設計系統需要的周邊資料。配色規則會在 HSL 色環上轉動基準色相：類似色是左右各 30°，互補色加入正對面的色相，分裂互補色取對面兩側的兩個色相，三角配色是相距 120° 的三個色相，四角配色採用 90° 的正方形，單色則是同一色相的五種明度。隨機模式會保留已鎖定的色票，而從圖片取色則會在 OKLab 空間中將照片像素分群，找出最常見且差異明顯的五種顏色。
「色階」分頁會為每個顏色產生 OKLCH 的 50–950 共 11 階色階，最接近你所選顏色的那一階就是原色；也可以產生 Material 3 HCT 系統的 13 個色調，以及 Material 主題會衍生的五組關鍵色盤。對比檢查採用 WCAG 2.2 的亮度公式，對比度不會四捨五入進位，建議的修正只調整明度、保留色相，找出最接近且通過的顏色。格狀表會列出調色盤中每組顏色與白色、黑色的對比度。
色盲模擬以 Machado 矩陣處理紅色盲、綠色盲、藍色盲與全色盲，並標示會變得難以分辨的色票。匯出時會依色相命名，也可自訂名稱。本工具不會判斷顏色是否適合品牌，模擬結果也只是近似色覺異常者所見，無法取代實際測試。
隱私
所有色彩運算、對比檢查與圖片分析都在這個分頁內完成：用來取色的照片只會從你的磁碟讀入小型畫布，不會上傳。調色盤可以存在網址中，複製連結就能重新開啟；伺服器上不會儲存任何內容。
功能
六種配色規則與圖片取色
從一個基準色產生類似色到四角配色，可鎖定後隨機配色，也能取出照片的主要顏色。
WCAG 2.2 對比與修正建議
檢查一般文字、大型文字與介面圖形的 AA、AAA 標準，一鍵套用最接近且通過的顏色。
開發者適用的匯出格式
CSS 變數、Tailwind v4 與 v3、SCSS 和 JSON，支援 HEX、RGB、HSL 或 OKLCH，也可匯出 PNG 色票。