免費線上配色方案產生器
從HEX或選色器建立互補、類似、三角、單色及隨機五色配色，鎖定色卡、複製RGB／HSL參考，匯出CSS、JSON、PNG並檢查文字對比。
文字與背景對比
對比欄可獨立指定任兩色，不因重新產生而改變。一般文字AA≥4.5:1、AAA≥7:1；大型文字AA≥3:1、AAA≥4.5:1。大型字通常至少18pt，或粗體14pt；完整無障礙還需評估其他條件。
從一個品牌色開始建立五色色盤
輸入HEX或使用選色器。互補色使用原色與相差180°的色相，再配明暗版本；類似色為原色相前後60°、30°與原色；三角配色使用0°、120°、240°與兩個明暗版本。單色系固定色相、飽和度，亮度取15、32、50、68、85%。HSL是設計起點，不保證每組色都適合文字。
鎖定與隨機
每張色卡可獨立鎖定；切換模式或重新產生時保留它，其他位置才更新。若五張都鎖定，重新產生不會改變任何顏色。黑白灰飽和度為0時，色相改變仍可能看起來一樣，這是HSL的正常結果，不會假造不同色。隨機五色只是設計探索，不代表專業品牌建議。
先檢查對比，再使用按鈕與標題
依標準sRGB轉線性值：通道≤0.04045時除12.92，否則((通道＋0.055)÷1.055)^2.4；相對亮度以R×0.2126＋G×0.7152＋B×0.0722計算，對比＝(亮色亮度＋0.05)÷(暗色亮度＋0.05)。黑字白底為21:1。判斷使用未取位值，並依WCAG對比要求分別列出文字大小的AA／AAA，不宣稱整頁取得認證。
交付配色檔
點單張複製HEX，或一次複製全部。CSS檔輸出:root中的--color-1至--color-5；JSON保存五個HEX；PNG為1600×800並寫入色碼。色卡顯示RGB與HSL，8-bit HEX取位與不同螢幕／色彩管理會影響視覺；不提供透明色、CMYK或印刷校色。
接著也用得到：HEX／RGB／HSL 色碼轉換器 ↗Favicon 網站圖示產生器 ↗QR Code 產生器 ↗
接著也用得到：WCAG 色彩對比度檢查器 ↗
簡單幾步，就完成。
- 選擇基礎HEX與配色模式，查看五張色卡與RGB／HSL。
- 鎖定想保留的色卡，再更新基礎色或重新產生隨機配色。
- 檢查文字背景對比，複製HEX或匯出CSS Variables、JSON及PNG色板。
生活裡的這些時刻，都用得到
適合網頁按鈕、簡報與品牌視覺的初步配色探索，不取代完整無障礙或印刷校色檢查。
你可能還想知道
鎖定後重新產生會換色嗎？
不會。鎖定色卡保留原HEX，未鎖的位置才依所選模式重算；全部鎖定時整組不變。
互補色與三角配色如何產生？
以HSL色相計算180度互補及120度三角，搭配明暗變化形成五色；色卡以8-bit HEX顯示，取位可能略改HSL。
AA與AAA如何判斷？
依sRGB相對亮度計算未取位對比，一般文字AA至少4.5:1、AAA7:1，大型文字AA3:1、AAA4.5:1，不表示整站已合規。
可以匯出哪些格式？
可複製單色或全部HEX、下載CSS Variables與JSON，以及1600×800 PNG色板。沒有CMYK或印刷色彩管理。
會保存我選的品牌色嗎？
不會。色盤與鎖定狀態只在本頁記憶體，不寫入Storage、網址或外部服務。