色票產生器
基底色一鍵生成 5 色，鎖定、拖曳、PNG 匯出。
#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；拖曳色塊可排序；🔒 鎖定的顏色在「換一組」或換模式時會保留。
使用方式
- 選基底色與模式。
- 鎖定喜歡的顏色後按「產生」。
- 拖曳排序，匯出 PNG 或複製 CSS。
常見問題
有哪些配色模式？
鄰近色、互補色、三角色、分裂互補、單色系與隨機 6 種。以你選的基底色為基準演算，隨機模式則直接抽 5 個色相。
如何複製色碼？
點任一色塊即複製 HEX；也可用下方「複製全部 HEX」「複製 CSS 變數」或「匯出 PNG」一次取得整組色票。
鎖定與拖曳排序是什麼？
點色塊右上角的鎖頭可鎖定該顏色，「換一組」或切換模式時鎖定的顏色會保留，只重抽未鎖定的位置；拖曳色塊可自行調整順序。
可以自訂基底色嗎？
可以，用取色器或直接輸入 HEX（如 #2563EB），也有一鍵隨機基底色。
什麼是 60-30-10 配色法則？
主色 60％（背景、大面積）、輔色 30％（區塊、卡片）、點綴色 10％（按鈕與重點）。先用本工具抽出一組 5 色，再按這個比例分配，版面最不容易出錯。
怎麼確認顏色夠清楚、長輩也看得見？
文字與背景的對比至少 4.5:1：深色留給文字、淺色留給背景，灰色字先加深再用。這樣手機、投影與列印都不會糊掉，也符合無障礙建議。