配色產生器

從基準色建立互補、類似、三色或單色配色，匯出 HEX、CSS 變數或 JSON。

顏色

模式

互補色類似色三色配色單色明暗

點選色塊即可複製 HEX。文字採用黑、白之中 WCAG 對比度較高者，產生的配色皆不透明。

輸出格式

CSS JSON

內容僅在此瀏覽器處理，不會上傳或儲存。

工具介紹

探索主色周圍的搭配，再把選定色票套用到專案樣式表。

設計工具

輸入 HEX、RGB 或 HSL 色彩，也可使用選色器。選擇配色方式後，點色票即可複製 HEX，整組配色可匯出為 CSS 變數或 JSON 陣列。

配色依 HSL 色相位移或明度變化產生，輸出不含透明度。色票文字採黑白之中 WCAG 對比度較高者並顯示數值；整組配色不代表任意兩色都符合無障礙要求，請另檢查實際文字與背景組合。

不保證。色卡顯示的是該背景與所選黑字或白字的對比度；實際介面的前景、背景組合需個別檢查。

灰色沒有飽和度，只旋轉色相不會產生可見差異。可改用飽和度較高的基色，再試互補色、類似色或三色配色。單色模式會改變明度，因此仍可得到不同深淺的灰階；匯出色彩皆不透明。