一個隨機色彩產生器調色盤從一個點擊開始：每次按下 Generate，就會從完整的 24 位元 RGB 空間中抽取新色彩——紅、綠、藍各有 256 個等級，共可產生 16,777,216 種組合——並以三種格式顯示每一個顏色，讓你直接貼到實際工作流程中使用（HEX、RGB 和 HSL）。重點就在於隨機性。設計師、插畫家與前端開發人員早已熟知自己的預設偏好，因此會用這個工具來跳脫慣性，意外撞見自己絕不會刻意選用的組合。三種格式各司其職：HEX（#rrggbb）用於 CSS、Figma 和大多數設計工具；RGB 以 0–255 的範圍表示，適用於影像編輯器和任何混合螢幕光源的程式碼；HSL（色相、飽和度、亮度）則用一般人實際思考色彩的方式來描述顏色。點擊任何色票即可複製其 HEX，或點擊 RGB／HSL 數值來複製該格式——無需註冊、無需上傳，所有資料都不會離開你的瀏覽器。數量欄位可一次接受 1 到 100 個顏色，因此只要按一次，整個調色盤的雛形就能一次取得，而不是只能反覆產生單一色票。
為什麼隨機色彩產生器能解決空白色票的難題
盯著空白畫布是開始創作最大的敵人。當你已經有一套「慣用」的調色盤——通常包含幾個品牌藍、灰色和點綴色——每個新專案看起來都會和前一個如出一轍。一個隨機色彩產生器能打破這個循環，因為選擇來自你的慣性之外。
每一個顏色都是從整個 24 位元 RGB 色彩空間中均勻抽取。要看出這個空間有多大，可以將 256（紅色等級）乘以 256（綠色等級）再乘以 256（藍色等級）：256 × 256 = 65,536，而 65,536 × 256 = 16,777,216。這就是標準顯示器能呈現的完整範圍，而產生器會從其中均勻取樣。
結果就是你鮮少會刻意選用的組合：衝突的色相、意料之外的中間色、偏離常軌的中性色。這種不可預測性是特色，而不是缺陷。設計師用它來跳脫預設傾向；插畫家用它來尋找起步的視覺主題；前端開發人員則在真實資料尚未存在時，用它為圖表系列、標籤、 avatar 和佔位 UI 上色。
如何從隨機選色建立一套調色盤
產生顏色是簡單的部分。把這些顏色變成你真正會用的東西，只需要三個簡短的決策。
- 在數量欄位中設定你想要的顏色數（1 到 100）。如果要五色調色盤，輸入 5；如果要八階漸層，輸入 8。這個工具會一次產生正好該數量的色票。
- 點擊 Generate 來產生一整批新的隨機顏色。每個色票都是從完整 RGB 空間中獨立抽取，因此連續兩次產生的結果可能截然不同。
- 點擊任何色票即可複製其 HEX，或點擊 RGB／HSL 數值來複製該格式。直接貼到 CSS、Figma 或設計檔案中即可。
- 反覆重抽直到組合順眼為止。把每一批都當作起點——如果五個色票中有三個合用，就再按一次 Generate，只換掉不適合的那兩個，或調整數量來重抽一組較小的修補組。
這就是完整的流程。整個循環——設定數量、產生、複製——只需片刻，而且完全不會離開你的瀏覽器。無需帳號、無需上傳、無需等待伺服器。
一種色票，三種格式：HEX、RGB 與 HSL
每個色票都會以三種格式顯示同一個顏色，而每種格式在實際程式碼和設計檔案中各有不同用途。
| 格式 | 範例 | 適用情境 |
|---|---|---|
| HEX | #3a9d7f | CSS、Figma、大多數設計工具 |
| RGB | rgb(58, 157, 127) | 影像編輯器、JS Canvas API、螢幕光源運算 |
| HSL | hsl(158, 46%, 42%) | 快速調整色相、無障礙微調 |
HEX 是大多數人貼進樣式表的簡寫。RGB 是螢幕實際混合光線的方式——三個通道皆以 0–255 範圍表示——也是影像編輯器和 JS Canvas API 公開的方式。HSL 以人類實際思考色彩的方式來描述顏色：先選色相（0–360°），再調整飽和度與亮度（0–100%）。這種結構讓 HSL 成為將隨機結果微調為可用色彩最容易的格式：提高亮度、降低飽和度，同一個色票就會變成自身的淡色或暗色版本。
你現在就能產生的調色盤靈感
要從這個工具獲得最大效益，就是在按下 Generate 之前先給自己一個任務。一個鬆散的指定能將一組隨機結果轉化為協調的調色盤。可以試試以下這些起點提示：
- 五色 UI 調色盤：輸入 5，按下 Generate，把結果分別當作背景、表面、邊框、主要動作和點綴色。
- 八階資料視覺漸層：輸入 8，按下 Generate，再依 HSL 的亮度排序，就能得到由最亮到最暗的漸層序列。
- 品牌入門三色組：輸入 3，按下 Generate，決定哪一個為主色，哪兩個為輔助色。
- 情緒板種子：輸入 10 個以上，按下 Generate，擷取這一批畫面，作為專案其餘部分的視覺定錨。
- Avatar 與佔位填色：輸入 20，按下 Generate，在真實內容尚未決定時，把色票當作一次性的背景填色。
這些做法之所以有效，是因為隨機性迫使雙眼為每個選擇提出理由，而不是照預設行事。想更仔細了解隨機調色盤如何融入實際設計工作流程，請參考網頁設計的隨機色彩產生器：實際工作流程。
隨機與和諧式調色盤
隨機調色盤並不等於和諧調色盤，兩者各有不同的用途。
| 方式 | 取得的成果 | 適用情境 |
|---|---|---|
| 隨機產生器 | 來自完整 RGB 空間、無法預測且範圍寬廣的色票 | 激發靈感、佔位 UI、突破創作瓶頸 |
| 和諧法則（互補、類似、三分） | 以一個基準色為基礎，數學上相關的色彩組合 | 最終品牌系統、插畫組、需要內部一致性的任何項目 |
隨機調色盤最適合作為起點。一旦得到一組合適的顏色，你可以用 HSL 微調來重新平衡——調整色相以歸納相近色調，拉高或降低亮度以建立階梯——接著若有需要，再轉用和諧式工具（如色彩調色盤產生器）來完成最終系統。這兩個工具並非競爭關係，而是涵蓋同一工作的不同階段。
超越靈感：隨機調色盤的實際用途
隨機調色盤不只能用於情緒板。在真實資料尚未決定之前，前端開發人員會用隨機 HEX 值來為圖表系列、標籤和 avatar 背景上色。QA 和測試工程師在測試資料和模擬資料中使用它們，以確保色彩編碼 UI 不會在極端情況下出錯。教師與學生用它來展示同一個顏色在 HEX、RGB 和 HSL 下其實是相同的——這是讓學習者迅速理解三種模型差異的捷徑。這些用途要的是原始、可拋棄的色彩，而非精心策劃的品牌系統，而隨機產生器正是處理這些工作的最佳工具。
一個提醒：務必檢查對比
隨機產生的顏色並不保證符合無障礙規範。兩個並排看起來沒問題的色票，可能無法通過 WCAG 純文字對比要求，導致低視力使用者面臨實際的使用體驗問題。如果產生的顏色將承載文字或語意，請在上線前檢查它與背景之間的對比比例。
專門的色彩對比檢查工具是最安全的做法——貼上前景與背景的 HEX，得到比例，並查看在該文字大小下是否能通過 AA 或 AAA。作為粗略經驗法則，內文所需的對比比例高於大型標題文字，小型 UI 標籤比粗體標題需要更高的區隔。請把任何對比未通過視為必須修正的問題，而非可忽略的警告。
要找到調色盤靈感最快的方法，就是停止自己挑選，讓工具替你選。設定數量、按一次，讓 16,777,216 色的色彩空間給你意想不到的組合。把每一批都當作起點，複製你實際需要的格式，等到調色盤準備上線時再一次檢查對比。