隨機色彩產生器是一鍵式工具，可以從全部 16,777,216 種可能的螢幕色彩中挑選一種，同時以 HEX、RGB 和 HSL 三種格式顯示給你看。對初學者來說，這一句話就是整個重點：你按下一個按鈕，工具選出一個你自己幾乎不可能選到的色彩，並且把數值以 CSS、Figma、Photoshop 以及你慣用的設計工具都能直接讀取的精確格式交給你。不需要帳號、不需要上傳，也不需要先做色彩理論的功課。
這種隨機性正是它的特色，而不是缺陷。設計師用它來擺脫預設的慣性，開發者用它來產生佔位 UI 與測試資料，初學者則透過它來了解這三種色彩模型與螢幕所顯示的內容之間的實際關聯。隨機色彩產生器完全在你的瀏覽器中執行，可以一次產生 1 到 100 個色彩，只要點擊色塊或其數值就能把任何格式複製到剪貼簿。
隨機色彩產生器到底是什麼？
隨機色彩產生器是一個小巧的瀏覽器工具，它從整個 24 位元 RGB 色彩空間中均勻取樣，並在你需要時回傳一個全新的色彩。「均勻」是這裡的關鍵字：16,777,216 種可能的色彩中，每一種出現的機率都一樣，包括那些混濁的棕色、近乎黑色的暗色，以及大多數色板都悄悄避開的刺眼霓虹色。這正是初學者覺得它有用的原因。你的眼睛有慣性，而隨機產生器完全沒有。
這個工具不是選色器、不是調色盤工具，也不是對比檢查器。它不會分析你的照片、不會取樣你的品牌色彩，也不會遵守無障礙規則。它只是在整個色彩立方體內公正地擲一次骰子，然後把結果顯示給你看。至於你要怎麼處理這個結果——挑選最好看的、複製到 mockup 中、搭配主題——都是在點擊之後才發生的事。
HEX、RGB 和 HSL 不講術語的解釋
你螢幕能顯示的每一種色彩都是由三種成分組成：紅色通道、綠色通道和藍色通道，每一個通道的調整範圍都是 0 到 255。隨機色彩產生器會以三種不同的標記法顯示同一個色彩，因為每一種在不同的地方都很方便。
HEX 是以井字號開頭的短短字串——例如 #3a9d7f。這是你貼到 CSS、Figma 以及大多數現代設計工具中的形式。RGB 把同一個色彩寫成 rgb(58, 157, 127)，這是影像編輯器和 JavaScript 慣用的色彩表示方式。HSL 則把它寫成 hsl(158, 46%, 42%)，更貼近人們實際思考色彩的方式：色相、飽和度與亮度。如果你需要把隨機產生的結果調亮一點或調暗一點，HSL 通常是最容易手動編輯的格式。
| 格式 | 範例 | 最適用於 |
|---|---|---|
| HEX | #3a9d7f | CSS、Figma 以及大多數現代設計工具 |
| RGB | rgb(58, 157, 127) | 影像編輯器、JavaScript 和影片 |
| HSL | hsl(158, 46%, 42%) | 手動微調、配色邏輯和學習 |
對初學者來說，實用的規則很簡單：網頁用就複製 HEX，影像作業用就複製 RGB，想在事後調整色彩就複製 HSL。上面範例中的同一個色彩——#3a9d7f——也可以寫成 rgb(58, 157, 127) 和 hsl(158, 46%, 42%)。如果你能讀懂其中一種，就能讀懂另外兩種；這個工具只是把三種都給你，省得你自己轉換。
如何產生你的第一個隨機色彩
整個工作流程只有三個步驟，而且這個工具不需要教學。如果你曾經用過一個網站，你就已經會用這個了。
- 開啟隨機色彩產生器，如果你只想要單一色彩，就把數量欄位設為 1；如果想要一次比較一小批色彩，則可以設成 1 到 100 之間的任何數字。
- 點擊 Generate。工具會立即重新整理色塊，整個過程都在你的瀏覽器中完成，沒有重新載入頁面，也不會發出網路請求。
- 點擊色塊即可複製其 HEX，或點擊下方的 RGB 或 HSL 數值來複製該格式。數值已經在你的剪貼簿中，可以直接貼到 CSS、樣式檔、Figma 或任何其他地方。
如果第一個色彩感覺不對，再點一次 Generate。重新擲骰子不花任何成本，這正是使用真正隨機輸出時一個被低估的好處。
16,777,216 種色彩真正的意義
這個數字不是行銷話術。它來自螢幕本身。標準顯示器可以顯示 256 級紅色、256 級綠色和 256 級藍色。把這些相乘就得到這個工具取樣的色彩空間大小：
256 × 256 × 256 = 16,777,216
這正是你螢幕所能產生的範圍，所以從這個工具得到的「隨機色彩」在技術上絕不會超出色域。這也解釋了為什麼產生器會讓人感到驚喜：人眼預設大概只能叫出幾百種色彩的名稱，而這個工具是從一千六百萬種色彩中取樣。你會看到一些沒有通用名稱的粉色，以及你本來不會刻意挑選的灰色，而這種不可預測性正是隨機色彩對激發靈感有用的原因。
初學者實際會在哪裡使用隨機色彩
隨機色彩不僅僅是用來激發靈感。一旦開始使用，同樣那幾個使用情境會一再出現。
- 打破創作瓶頸。 與其盯著空白的選色器發呆，不如點一下，然後對出現的結果做出反應。有時候，錯誤的色彩正是讓版面動起來的那一把鑰匙。
- 佔位 UI。 在真正的設計還在討論時，把一個隨機色彩放到元件、按鈕或圖表長條上，讓審閱者有具體的東西可以看。
- 模擬資料與測試。 圖表、標籤、 avatar 和種子使用者都需要看起來逼真的色彩。隨機 HEX 數值非常適合，因為它們看起來永遠不會像開發者的預設配色。
- 學習色彩模型。 產生一個色彩，然後分別以 HEX、RGB 和 HSL 讀回來，這是體會這三種格式描述同一個像素最快速的方式之一。
- 原型設計 CSS 效果。 你可以把 HEX 直接貼進樣式表、一個 CSS 隨機色彩 示範，或漸層預覽中，看看一個陌生的色相在實際版面中真正的表現。
最後這項對初學者特別有用，因為把隨機 HEX 直接貼進真正的樣式表，是觀察陌生色相在完成版面中實際表現最快速的方式。
在你正式使用隨機色彩之前必須檢查的一件事
隨機性有一個盲點：無障礙設計。由公正骰子選出的色彩不保證易讀，特別是當它被用在文字背後或作為狀態指示燈時。在任何隨機色彩被賦予意義而進入真實介面之前，請檢查它與所在背景的對比比例。色彩對比檢查器可以針對你給定的任何一組色彩執行 WCAG AA 與 AAA 測試，並告訴你哪些組合真正通過。
同樣的規則也適用於任何必須讓使用者感覺是有意設計的元素——錯誤狀態、號召行動按鈕、連結文字和圖表圖例。對於純裝飾性的表面、主視覺背景，以及任何只是用來看起來有趣的元素，無障礙的重要性就比較低，隨機性本身就是重點。了解這之間的差異，正是把隨機色彩產生器當玩具使用、與當作真正工具使用的分別所在。
想深入了解，請參閱 互補色查找器入門指南。