色票產生器

選一個基底色，一鍵生成 5 色調色盤——鄰近、互補、三角色等 6 種模式，點色塊即複製。

#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. 用取色器或輸入 HEX 選基底色。
  2. 切換配色模式（鄰近色／互補色／三角色／分裂互補／單色系／隨機）。
  3. 點色塊複製 HEX；拖曳色塊可排序；點鎖頭 🔒 鎖定顏色。
  4. 「換一組」只重抽未鎖定的顏色，可用「匯出 PNG」下載色票圖。

配色小知識：60-30-10 與對比度

實務上最穩的比例是 60-30-10：主色六成（背景、大面積）、輔色三成（區塊、卡片）、點綴色一成（按鈕、重點標示）。先用本工具抽出一組 5 色，再按這個比例分配，版面立刻有層次。

另一件事是對比度：文字與背景的對比至少 4.5:1 才符合無障礙（WCAG）建議，淺灰字放白色底通常不通過。做法是深色留給文字、淺色留給背景；灰色字先加深再用，投影或列印才不會糊掉。

常見問題

有哪些配色模式？

鄰近色、互補色、三角色、分裂互補、單色系與隨機 6 種。

如何複製色碼？

點色塊複製 HEX；下方按鈕可複製全部、CSS 變數或匯出 PNG。

鎖定與拖曳排序是什麼？

🔒 鎖定後「換一組」保留該色，只重抽未鎖定的位置；拖曳色塊可調整順序。

可以自訂基底色嗎？

可以，取色器或手輸 HEX，也有隨機基底色按鈕。

什麼是 60-30-10 配色法則？

主色 60％（背景）、輔色 30％（區塊）、點綴色 10％（按鈕與重點）；先抽 5 色再按比例分配最穩。

怎麼確認顏色夠清楚？

文字與背景對比至少 4.5:1：深色做文字、淺色做背景，灰色字先加深再用；按鈕白字也一樣。