分類: 開發工具
配色產生器
以一個顏色為中心組出配色
選一個基準色，依色輪關係取得成套配色：互補、類比、三等分、四等分、單色或明暗階。每個數值都能以 HEX、RGB、HSL 複製。
顏色數量
- 1
#0f7b63 - 2
#7b0f26 - 3
#073b30 - 4
#3b0712 - 5
#17ba97
全部數值
#0f7b63 #7b0f26 #073b30 #3b0712 #17ba97
調色盤由你輸入的顏色計算得出，不上傳任何內容。
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
配色背後的關係其實是色輪上的幾何：互補色在基準色對面，類比色在兩側，三等分色是等距的三個點。手動推算得先轉成 HSL、加角度、再轉回來，嘗試往往就停在這一步。這裡替你旋轉色相；當某個方案的色相數少於你要的色塊數時，會改以明度分階而不是重複同一個顏色，所以由一對互補色產生五塊，仍然是五個可用的顏色。每個色塊都附可讀的標籤，可依你樣式表使用的寫法直接複製。
使用方式
- 選擇或輸入作為基準的顏色。
- 選擇配色方案以及需要幾個顏色。
- 複製單一數值，或一次複製整組配色。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 該從哪種方案開始？
- 想要沉穩、彼此相關就用類比色；需要一個跳出來的強調色就用互補色；希望介面收斂、讓內容當主角就用單色。
- 這些配色符合無障礙需求嗎？
- 不會自動符合。配色講的是和諧，不是對比度。上線前請以對比度檢查工具逐一驗證文字與背景的搭配。
- 我輸入的顏色會被送出嗎？
- 不會。調色盤是在頁面內依你輸入的顏色算出來的，不上傳也不儲存。