隨機色彩產生器是一種工具，它從完整的 24 位元 RGB 色彩空間中均勻選取顏色——也就是全部 16,777,216 種可能的組合——並以 HEX、RGB 和 HSL 三種格式顯示每個結果，讓你只要點一下就能複製。因為每次抽樣都會獨立從紅、綠、藍各 256 個階層中取值，所以出現一個霧濛濛的藍綠色，跟出現一個霓虹萊姆色或近乎黑色的深藍色，機率完全相同。你拿回的色彩搭配，是你不會刻意去挑選的那種——這正是重點：設計師、插畫家，以及前端開發人員會用這個工具來跳脫自己的預設習慣，撞見一些自己從來不會刻意選擇的搭配。每次產生的色票都會同時以三種格式呈現，所以你可以視需要在給 CSS 用的十六進位字串、給影像編輯器用的通道值，以及想在差一點的色彩上微調成可用成果時用的色相/飽和度/明度三元組之間切換。整個工具都在你的瀏覽器中本地執行，因此你可以反覆抽取想要的次數，而不用上傳任何檔案，也不用註冊任何帳號。為了把這抽象的範圍講得具體一點，本文剩下的部分會逐一展示十個真實的輸出範例，以及工具所呈現的格式。
隨機色彩產生器如何從 16.7M 種顏色中挑選
當一個顏色被描述為「隨機」時，在這個情境下這個詞其實有精確的意義。產生器會使用你瀏覽器內建的隨機函式，為紅色通道從 0 到 255 選一個整數，再為綠色選一個，再為藍色選一個——也就是螢幕實際混光所用的同樣三個通道。把 256 × 256 × 256 乘起來，你會得到 16,777,216，這正好是一塊 24 位元顯示器所能顯示的不同顏色總數。從這個空間均勻取樣，代表霧濛濛的藍綠色跟霓虹萊姆色或近乎黑色的深藍色一樣可能出現；這個工具並不會偏向「漂亮」的顏色或常見的調色盤組合。
正是這種均勻性，讓輸出感覺出乎意料。一個用了十年同樣六個強調色的設計師，很少會自己手動挑到栗紅色或冰黃色，但只要隨機性一介入，這兩種顏色就會立刻冒出來。隨機色彩產生器呈現的是原始的抽樣結果，而非經過策展挑選的版本，因此你看到的，就是數學實際產生的東西。重新抽樣彼此獨立——抽到薰衣草色並不會透露下一次抽樣的任何線索——這也是為什麼產生器通常會一次給你一批顏色，而不是一次給一個。
10 個隨機色彩產生器範例（HEX、RGB 與 HSL）
為了讓「隨機」變得具體，以下是一個產生器可能在同一批中交給你的十個真實色票。底下的每個範例都包含工具所提供的三種格式，並搭配一段簡短說明，解釋這個顏色在色彩空間中的位置。把它們當成你可以預期的多樣性樣本——你自己抽到的批次會涵蓋同樣的範圍。
- #4A90E2 — rgb(74, 144, 226) — hsl(212, 72%, 59%)。一種清澈、中等飽和度的天空藍。它位在色環的冷色調那一側，藍色佔絕對主導，只帶著剛好足夠的紅，讓它看起來不會太數位化——在淺色介面上作為主要 CTA 顏色，是很自然的選擇。
- #B83A5E — rgb(184, 58, 94) — hsl(343, 52%, 47%)。一種比洋紅只淡一階的覆盆子色。明度低於 50%，讓它帶有像被紅酒染過的布料那種深沉、飽和的質感，適合用在純紅色會顯得太張狂的強調場合。
- #2D5F3F — rgb(45, 95, 63) — hsl(141, 36%, 27%)。一種深森林綠，因為帶點藍色偏移而偏向藍綠色。低飽和度加低明度，讓它成為那種能穩住標題、又不會跟更亮的強調色互搶戲的顏色。
- #F4A261 — rgb(244, 162, 97) — hsl(27, 87%, 67%)。一種跟赤陶土同一族的暖砂橘色。高飽和度加上高明度——這正是大多數人想到「夕陽」時腦中浮現的顏色，產生器也很常落在這個區段。
- #6A4C93 — rgb(106, 76, 147) — hsl(265, 32%, 44%)。一種霧濛濛的紫色，看起來比較接近皇家紫而非霓虹紫。32% 的飽和度在這裡發揮了關鍵作用——再往下調幾個百分點，這塊色票就會偏向平淡的灰色。
- #E63946 — rgb(230, 57, 70) — hsl(355, 78%, 56%)。一種自信、略帶暖感的紅色。這是設計師在需要為中性版面挑選單一強調色時最常挑的顏色，而隨機抽樣也常常會把它交到你手上。
- #1ABC9C — rgb(26, 188, 156) — hsl(168, 76%, 42%)。一種落在色環冷色調那一側的明亮土耳其綠。飽和度足以擔任狀態指示燈，亮度足以在白底上閱讀，是「成功」語意下很容易使用的視覺提示。
- #F1FAEE — rgb(241, 250, 238) — hsl(105, 55%, 96%)。一種帶有淡淡綠色調的近白色。即使是在 16M 範圍的最亮端，也會不時冒出這類偏白的色塊；其中綠色通道只勉強贏過紅色與藍色。
- #264653 — rgb(38, 70, 83) — hsl(197, 37%, 24%)。一種深沉、低飽和度的藍綠色，比較接近炭灰色而非青色。這是你想要深色模式介面，卻又希望保留可辨識色相時該挑的顏色。
- #E9C46A — rgb(233, 196, 106) — hsl(43, 74%, 66%)。一種偏暖的柔和芥末黃。產生器出乎意料地常常落在這個黃橘色帶，因為它在 24 位元立方體中統計上很常見。
交叉比對各種格式，本身就是個有用的練習。一段十六進位字串的前兩個字元代表紅色數值，中間兩個是綠色，最後兩個是藍色——用的是以 16 為基底而非十進位。HSL 則用更容易推敲的角度描述同一個顏色：先在色環上挑一個色相，再依需求調整飽和度與明度。
如何使用瀏覽器工具產生隨機色彩
隨機色彩產生器會即時產出上面所有的內容。三個輸入欄位就涵蓋了完整的工作流程，整個過程都在你的裝置上本地執行。
- 在數量欄位設定你想要幾個顏色（1 到 100）。想快速瀏覽的話，十個一批很順手；只需要單一佔位顏色的話，一個就夠了。
- 點擊 Generate，產生一批新的隨機顏色。每點一次都會從完整的 24 位元空間重新抽樣，所以先前顯示的數值會被直接取代，而不是打亂順序。
- 點擊任一色票即可複製其 HEX 值，或點擊 RGB / HSL 的數值來複製該格式。被選中的字串會進入你的剪貼簿，可以直接貼到 CSS、Figma、JSON fixture，或任何你需要顏色的地方。
整個循環就是這樣。想要多少次就重新抽多少次，需要不同語法就點選不同格式，一直做到這批結果順眼為止。不必上傳檔案、不必註冊帳號，什麼都不會離開你的瀏覽器。
設計師與開發人員實際會用隨機色彩的時機
「隨機」這個標籤乍看像是噱頭，但實務上這個工具解決了四種不同的工作。
調色盤探索。盯著空白畫布發呆的設計師，會用一批隨機結果來跳脫自己預設的強調色習慣。光是單一一個不顯而易見的色塊，就能撐起整套調色盤——舉例來說，從上面那串裡抽到一個像 #E9C46A 這樣的霧感芥末黃，往往能解鎖設計師手動篩選時永遠不會挑出來的搭配。一旦選定一個隨機的「主角色」，就可以用一個調色盤產生器，把那個主角色當作基底，回推出周圍互補或類比的色彩。
圖表系列與資料視覺化。正在建立儀表板的前端開發人員，在真正資料定案前，需要給長條圖的序列、線條的描邊、標籤晶片和大頭貼背景之類的東西放一些用過即丟的顏色。隨機抽樣能快速給出夠分得開的色相，避免相鄰系列不小心撞色。
佔位 UI。元件庫、Mockup 和設計審查，都能從「真實」的顏色中受惠，而不是只用一般常見的灰色或蕃茄紅色當佔位。隨機填色能傳達「這不是最終版本」的訊息，又不會在截圖裡看起來像壞掉了。
QA fixture 與測試資料。測試工程師會在 JSON fixture、影像處理管線和單元測試中塞進隨機的十六進位值，以確認處理色彩的程式碼涵蓋了完整的 24 位元範圍，而不是只覆蓋幾個手工挑選的 hex 代碼。
整體來看，這些用途共享一個特質：設計師或開發人員需要的，是完整 16M 空間帶來的多樣性，而不是任何一個特定的顏色，而請隨機性代勞，比起自己手動挑選要快得多。
HEX、RGB 與 HSL：選擇要複製的正確格式
上面每個範例中的顏色，都是同一塊色票用三種不同方式描述的結果。挑對符合目標工具的格式，才能讓一個隨機抽樣的結果，不用再轉換就直接貼上去。
| 格式 | 它表達的內容 | 通常貼在哪裡 |
|---|---|---|
| HEX (#rrggbb) | 三個通道的 6 位數簡寫，採 16 進位 | CSS、Figma、Sketch，以及大多數設計工具 |
| rgb(r, g, b) | 每個通道以 0 到 255 的整數表示 | 影像編輯器、JavaScript，以及 CSS color() 函式 |
| hsl(h, s%, l%) | 色相 (0–360)，以及飽和度與明度（百分比） | 想在 CSS 中即時微調顏色、做動畫，或做主題變化時 |
下面這一個逐步演練的轉換範例，展示了這三種格式如何對應到上面清單中的同一塊色票。
格式轉換，逐步說明。以 #4A90E2 為例。用 16 進位讀取這段十六進位字串：4A = 4×16 + 10 = 74，90 = 9×16 + 0 = 144，E2 = 14×16 + 2 = 226。所以 RGB 三元組就是 rgb(74, 144, 226)。再用標準公式換算成 HSL——明度分量 l = (max + min) / 2——同一個顏色就落在 hsl(212, 72%, 59%)。這段十六進位字串和這個十進位三元組，描述的是完全相同的像素。
HSL 是用來修飾一個隨機結果最方便的格式。如果 hsl(355, 78%, 56%)「幾乎對了」，只是稍微太亮，把明度數值調高或調低，顏色的其他部分仍會保持協調——這是你直接編輯十六進位字串時很難做到的。
無障礙：在你正式採用一個隨機顏色之前的提醒
隨機顏色並不保證具有可讀性。16M 這個立方體裡充滿了對比度不足的配對，一塊原本只是當佔位的色票，最後可能會在成品設計中被用來承載文字或狀態資訊。如果一個顏色會出現在可閱讀的內容旁邊，正式採用前請務必確認它與背景之間的對比比例——依據 WCAG 2.2 無障礙規範，內文文字至少需要 4.5:1 的比例才能符合 AA 標準。另一個獨立的色彩對比檢查工具，是最簡單、能在當下確認配對結果、避免意外踩到無障礙地雷的方式。
想進一步了解，請參閱互補色尋找器範例：常見的十六進位配對。