色票產生器

基底色一鍵生成 5 色，鎖定、拖曳、PNG 匯出。

AD
#14B6DBrgb(20, 182, 219)
點擊複製 · 可拖曳排序
#1484DBrgb(20, 132, 219)
點擊複製 · 可拖曳排序
#1452DBrgb(20, 82, 219)
點擊複製 · 可拖曳排序
#1421DBrgb(20, 33, 219)
點擊複製 · 可拖曳排序
#3914DBrgb(57, 20, 219)
點擊複製 · 可拖曳排序

匯出

:root {
  --color-1: #14b6db;
  --color-2: #1484db;
  --color-3: #1452db;
  --color-4: #1421db;
  --color-5: #3914db;
}

點色塊複製 HEX；拖曳色塊可排序；🔒 鎖定的顏色在「換一組」或換模式時會保留。

使用方式

  1. 選基底色與模式。
  2. 鎖定喜歡的顏色後按「產生」。
  3. 拖曳排序，匯出 PNG 或複製 CSS。

常見問題

有哪些配色模式？

鄰近色、互補色、三角色、分裂互補、單色系與隨機 6 種。以你選的基底色為基準演算，隨機模式則直接抽 5 個色相。

如何複製色碼？

點任一色塊即複製 HEX；也可用下方「複製全部 HEX」「複製 CSS 變數」或「匯出 PNG」一次取得整組色票。

鎖定與拖曳排序是什麼？

點色塊右上角的鎖頭可鎖定該顏色，「換一組」或切換模式時鎖定的顏色會保留，只重抽未鎖定的位置；拖曳色塊可自行調整順序。

可以自訂基底色嗎？

可以，用取色器或直接輸入 HEX（如 #2563EB），也有一鍵隨機基底色。

AD