圖形 / 顏色

配色盤產生器：一鍵建立和諧配色

運用色彩理論產生配色盤：類似色、互補色、三角色、分裂互補色、單色或隨機配色，可選擇三到八種色彩。鎖定喜歡的色彩並重新產生其餘色彩，查看每種色彩與白色的對比度比例，還能將配色盤匯出為CSS變數、Tailwind設定檔、JSON、hex色碼或PNG。

配色盤產生器：一鍵建立和諧配色: 每個配色盤都從基準色相開始；如果你鎖定了色彩，就會以鎖定的色彩作為基準，並依照選定的規則配置其他色相：類似色採用30°間隔、互補色採用相反色相、三角色採用120°間隔、分裂互補色在兩側各取150°，單色則使用同一色相從深到淺的變化。明度和飽和度會有所變化，讓配色組合包含淺色、中間色和深色成員；每種色彩也會顯示其與白色的WCAG對比度比例。全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類: 開發者工具
使用次數: 在瀏覽器中
費用: 免費・免註冊
可用狀態: 可立即使用

調色盤工作台本機處理

全程在瀏覽器中執行

和諧色顏色

或按下空白鍵。鎖定您想保留的顏色。

#64A6F5白色背景上的2.5:1

#382B9D白色背景上的10.5:1

#772BB7白色背景上的7.5:1

#BE4BBA白色背景上的4.3:1

#E0367B白色背景上的4.2:1

匯出為

:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

使用色盤

常見的配色比例是使用一種中性色約60%、第二種顏色30%，再搭配10%的強調色，讓最醒目的顏色少量用於按鈕和重點標示。

對比度

4.5:1是一般文字符合WCAG AA的最低標準，大型文字則為3:1；7:1符合AAA標準。

使用方式

選擇配色和諧類型及色彩數量。
按下產生按鈕或空白鍵，直到找到喜歡的配色；鎖定色彩即可保留。
將配色盤複製為程式碼，或下載為PNG。

隱私與限制

所有內容都在您的瀏覽器中產生。

常見問題

如何保留喜歡的色彩？

點選色彩上的鎖定按鈕即可。鎖定的色彩會保持不變，而第一個鎖定的色彩也會設定其他色彩所依據的基準色相。

可以使用我的品牌色嗎？

可以：點選色票，將它設定為任何色彩後鎖定，再以它為基準產生其餘色彩。

配色盤上的文字是否容易閱讀？

每個色票都會顯示其與白色的對比度比例。WCAG要求一般文字至少達到4.5:1，因此低於此比例的色彩需要搭配深色文字。

免費工具・使用在瀏覽器中次・免註冊

使用色盤

對比度

使用方式

隱私與限制

相關工具

常見問題