調色盤產生器

在您的瀏覽器中本機執行

產生可鎖定的配色方案、OKLCH 色調階梯與設計權杖

種子顏色

支援含透明度的 HEX、RGB、HSL、OKLCH 與 CSS 顏色名稱。

配色規則顏色數

調色盤顏色

顏色 1

淺色變化

深色變化

文字大小

不透明背景

比值只說明顏色組合，不代表頁面認證。一般文字 AA 4.5:1、AAA 7:1。透明顏色依背景合成。

對比度: 前景色 / 背景色 (一般文字)
前景色 \ 背景色	1	2	3	4	5
1 `#6366F1`	1.00 未通過	1.18 未通過	1.23 未通過	1.42 未通過	1.49 未通過
2 `#3C69C0`	1.18 未通過	1.00 未通過	1.45 未通過	1.20 未通過	1.76 未通過
3 `#8F72EA`	1.23 未通過	1.45 未通過	1.00 未通過	1.74 未通過	1.22 未通過
4 `#0063A3`	1.42 未通過	1.20 未通過	1.74 未通過	1.00 未通過	2.11 未通過
5 `#B27FE0`	1.49 未通過	1.76 未通過	1.22 未通過	2.11 未通過	1.00 未通過

權杖輸出匯出來源

命名空間

匯出顏色數: 5 (一般調色盤)

:root {
  --primary-1: #6366F1;
  --primary-2: #3C69C0;
  --primary-3: #8F72EA;
  --primary-4: #0063A3;
  --primary-5: #B27FE0;
}

匯入

調色盤資料

貼上匯出的 CSS/SCSS、Tailwind v3 JSON 設定、JSON 權杖、陣列或逗號/換行分隔顏色。11 色調必須由淺到深排列。

漸層選取: 0 / 6

依所需順序選取 2–6 種顏色，不會自動截斷。

產生、對比度與匯出全部在本機執行，不上傳顏色。

調色盤產生器

產生可編輯、可鎖定的顏色系統，提供 OKLCH 色調與實用設計權杖。

選項

選擇種子或隨機流程，編輯顏色並在重新產生前鎖定要保留的顏色。配色規則使用感知色相位移，手動鎖定可覆蓋規則。色調階梯保留一般調色盤並產生完整 50–950；固定亮度不保證種子位於 500。檢查淺深變化、四種格式與對比度，再複製或下載五種權杖格式。

對比度

保留透明度。對比度先合成背景再合成前景，不代表無障礙認證。匯入的 11 色調必須亮度遞減。資料留在本機，儲存可選。明確選取 2–6 色傳遞至目前語言的漸層工具。重設與匯入可復原。