隨機顏色產生器
按空白鍵換一組新配色。選好配色規則和色調風格，鎖住喜歡的顏色，其餘的繼續隨機。點任何色碼就能複製。
小技巧：按 空白鍵 換一組配色，鎖定的顏色不會變。
文字對比度
- Aa#264653白字 10.1 · 黑字 1.8AAA
- Aa#2A9D8F白字 3.3 · 黑字 5.4AA
- Aa#E9C46A白字 1.7 · 黑字 10.7AAA
- Aa#F4A261白字 2.1 · 黑字 8.7AAA
- Aa#E76F51白字 3.1 · 黑字 5.8AA
最近的配色
換掉的配色會出現在這裡，點一下就能找回來。
- 繪畫配色挑戰隨機抽三個顏色，只用它們畫一張小圖，跳脫平常習慣的配色。
- 設計靈感與品牌色做情緒板、UI主題或Logo提案時，從一組自己想不到的配色開始。
- 開發與佔位色圖表色、頭像底色、測試資料，隨手拿一個HEX色碼，還能直接複製成CSS變數。
- 手作、美甲與穿搭毛線、指甲油、串珠或今天穿搭的顏色，交給隨機決定。
三步做出一組順眼的配色
選規則與風格
完全隨機什麼都可能出現；類似色、單色系較沉穩，互補色、三等分更有衝擊力。粉彩、鮮豔、莫蘭迪、暗色決定整體色調。
重新產生並鎖定
按「產生配色」或空白鍵。遇到滿意的顏色就鎖住，之後的配色會圍繞它搭配。
複製帶走
點HEX、RGB或HSL色碼即可複製，也能把整組配色複製成CSS變數，或放上轉盤抽一個。
不只是一組隨機色碼
配色規則一覽
配色規則就是依照顏色在色相環上的位置來挑選色相。產生器先隨機選一個起始色相，再依規則放上其他顏色；色調風格決定它們的彩度與明暗。
| 配色規則 | 色相關係 | 感覺 | 適合 |
|---|---|---|---|
| 類似色 | 相鄰約20到30度的色相 | 柔和、自然、一致 | 插畫背景、風景、溫和的品牌 |
| 單色系 | 同一色相，不同明度 | 乾淨、克制 | UI主題、資料圖表、極簡海報 |
| 互補色 | 色相環上相對，相差180度 | 強烈、對比鮮明 | 行動按鈕、球衣、普普風 |
| 分割互補 | 一個色相加上對面兩側的色相，相差150與210度 | 活潑但較好平衡 | 角色設計、包裝 |
| 三等分 | 三個色相相隔120度 | 俏皮、平衡 | 兒童品牌、遊戲、資訊圖表 |
| 四等分 | 四個色相相隔90度 | 豐富、多樣 | 圖樣、節慶物料、多分類圖表 |
| 完全隨機 | 每個色相互不相關 | 意外，有時會撞色 | 繪畫挑戰、打破習慣 |
使用配色時可參考經典的60-30-10法則：主色約佔六成面積，輔助色三成，點綴色一成。
HEX、RGB、HSL該複製哪一個？
三種寫法描述的是同一個螢幕顏色。紅、綠、藍各有256階，所以HEX色碼一共有16,777,216種顏色。
| 格式 | 範例 | 數字意思 | 適用場合 |
|---|---|---|---|
| HEX | #2A9D8F | 紅綠藍各用兩位十六進位數表示，從00到FF | CSS、Figma、Canva等大多數設計工具 |
| RGB | rgb(42, 157, 143) | 紅綠藍各從0到255 | 寫程式、Photoshop、修圖 |
| HSL | hsl(173, 58%, 39%) | 色相用角度，彩度與明度用百分比 | 手動微調顏色、做深淺色階 |
對比度標籤代表什麼？
每塊顏色上的文字會自動選白色或近黑色中比較清楚的一種，並顯示兩者的對比度。等級依據網頁內容無障礙指引WCAG 2。
- AAA，7比1以上：內文閱讀很舒服，對許多視力較弱的人也友善。
- AA，4.5比1以上：網站與App一般字級文字的通用最低標準。
- 僅大字，3比1以上：適合大字（約24像素，或19像素粗體）以及圖示、按鈕邊框。
- 偏低，低於3比1：適合當裝飾色或背景，不要直接拿來寫字。
繪師常玩的隨機配色挑戰
- 三色挑戰：產生三色配色，只用這三色加白色畫任何主題，很適合發IG或Threads打卡。
- 限定色風景：鎖定一個莫蘭迪色當陰影，其他顏色一直換到天空順眼為止。
- 角色換色：用一組三等分配色幫喜歡的角色重新上色。
- 每日一色：每天隨機一個顏色，畫出五樣真的可能是這個顏色的東西。
- 同景雙色調：同一個場景畫兩次，一次用粉彩配色，一次用暗色配色。
- 速塗挑戰：每組配色限時10分鐘，按空白鍵換下一組，不准反悔重抽。
常見問題解答
怎麼隨機產生一個HEX色碼？
在「顏色數」選「單色」，再按「換一個顏色」或空白鍵，HEX色碼會以大字顯示。點它就能複製，也可以點下面的RGB或HSL。
怎麼保留一個顏色、只換其他顏色？
按色塊上方的鎖頭按鈕。鎖定的顏色再產生時不會改變，類似色、三等分等規則會以第一個鎖定的顏色為基準重新搭配。
色塊上的AA、AAA是什麼意思？
這是色塊上文字的WCAG對比度等級。AA要求一般字級至少4.5比1，AAA要求7比1。「僅大字」表示這個顏色只適合大字或圖示。
可以隨機產生粉彩色或莫蘭迪色嗎？
可以。色調風格選「粉彩」會得到高明度、柔和的顏色，選「莫蘭迪」會得到低彩度的灰調色。它們能和任何配色規則搭配，例如粉彩加類似色就是一組很溫柔的配色。
配色怎麼用在CSS或Figma？
按「複製成CSS」會得到color-1到color-5這樣的CSS自訂屬性，直接貼進樣式表。「複製HEX清單」會得到以逗號分隔的色碼，可以逐一貼到Figma、Canva或Procreate。
為什麼按空白鍵沒反應？
焦點在按鈕、連結或輸入框上時，空白鍵會保留原本的功能（例如按下目前的按鈕），不會重新產生配色。先點一下頁面空白處再按就可以了。
顏色真的是隨機的嗎？
是的。色相、彩度與明度都由瀏覽器的加密等級亂數在色調風格的範圍內抽出，全部在本機完成，不會上傳任何資料。