隨機色彩產生器圖表是一個單一的視覺面板,可同時顯示多個隨機顏色,每個色塊都標示著你在實際工作時會直接貼上的三組色彩代碼:HEX、RGB 和 HSL。開啟隨機色彩產生器,將數量設定在 1 到 100 之間,然後點擊 Generate 即可產生一批全新的色彩,從完整的 24 位元 RGB 色彩空間中均勻抽取 —— 全部 16,777,216 種可能的顏色都在範圍內。你看到的每一個色塊都是這些組合之一,挑選時不帶任何偏誤。圖表形式正是讓這個工具在瀏覽時實用的關鍵:與其產生一個你必須單獨判斷的顏色,不如直接看到一個並排的色塊網格,每個色塊下方都列出三組數值,方便你比較對比、掃描可用的點綴色,或一鍵複製符合你技術棧的格式。它把「這是個好顏色嗎?」變成了「放在那些顏色旁邊是好顏色嗎?」。
隨機色彩圖表實際顯示的內容
隨機色彩產生器以圖表形式呈現結果,而不是單一選擇。圖表的每一列代表一種顏色,以填色色塊呈現,下方印有三組代碼:以 # 開頭的 HEX 字串、rgb() 三元組,以及 hsl() 三元組。HEX 是你貼到 CSS 或設計工具中的格式,RGB 對應影像編輯器在色彩選擇器中顯示的內容,而 HSL 以色相、飽和度、明度來描述同一個顏色 —— 這是人們實際思考色彩時最接近的模型(「稍微亮一點的藍綠色」)。
圖表的數量欄位控制一次顯示多少列。當你只需要一個佔位色時,可以只要求一個色塊;當你想掃描大量樣本以尋找圖表系列、標籤顏色或調色盤靈感時,則可將數量提高到 100。只有當你點擊 Generate 時,輸出才會更新,因此單一批次會保持在畫面上,讓你四處點擊以複製所需的代碼。
無需註冊、無需上傳,也沒有儲存的歷史紀錄。每個批次都是使用瀏覽器內建的隨機函式在本機產生,因此除非你重新產生相同的數量,否則看到的確切顏色不會重複。
三步驟產生隨機色彩圖表
- 將數量欄位設定為你希望在圖表中擁有的色塊數量 —— 範圍從 1 到 100。
- 點擊 Generate,從完整的 24 位元 RGB 色彩空間中抽取一批全新的隨機色彩。
- 點擊任何色塊即可複製其 HEX 值,或點擊色塊下方的 RGB 或 HSL 那一行,以複製該格式。
隨意重新抽取多次。每次點擊 Generate 都是獨立的 —— 批次之間沒有延續,因此新圖表中的任何色彩都不會受到前一批次的偏誤影響。如果某批次接近但不完全正確,請再次點擊 Generate 以取得全新的替代,而不是嘗試修正個別色塊。
為什麼每個色塊都顯示三種格式
在同一個色塊上顯示 HEX、RGB 和 HSL 並非多餘。它們描述的是同一個顏色,但每種格式在不同情境下都更為實用,而圖表讓它們同時可見,因此你無需即時轉換。
| 格式 | 描述內容 | 最佳使用時機 | 範例 |
|---|---|---|---|
| HEX | 六位數十六進位代碼 (#rrggbb) | CSS、Figma、大多數設計工具 | #3a9d7f |
| RGB | 紅、綠、藍,範圍 0–255 | 影像編輯器、canvas API、像素運算 | rgb(58, 157, 127) |
| HSL | 色相、飽和度、明度 | 將隨機結果調整為可用的顏色 | hsl(158, 46%, 42%) |
HEX 最為簡潔,幾乎所有網頁和設計工具都將其作為預設格式接受。RGB 直接對應螢幕實際混光的方式,因此它是影像編輯器、HTML canvas API 以及任何處理像素的程式碼路徑所採用的格式。當隨機產生的結果接近理想但需要微調時,你就會選擇 HSL —— 調整色相使其更暖、降低飽和度使其更柔和、提高明度使其更明亮。由於圖表將三種格式並列顯示,你可以直接抓取 HSL、微調其中兩個數值,然後直接將結果貼到 CSS 中,中間無需任何轉換步驟。
1670 萬種顏色從哪裡來
隨機顏色只是三個通道各自的數值。圖表從螢幕實際能顯示的相同色彩空間中抽取:每個通道 8 位元,紅、綠、藍各有 256 個層級。要取得這個空間的大小,將每個通道的層級數相乘即可:
256 × 256 × 256
逐步運算:256 × 256 = 65,536 個紅綠組合層級。然後 65,536 × 256 = 16,777,216 種顏色總數。這就是 24 位元或全彩顯示器能夠顯示的數量,也是圖表取樣的池子大小。由於每種組合出現的機率相等,你看到的色塊會大量偏向那些你絕不會刻意挑選的顏色 —— 粉彩色緊鄰著近乎黑色,旁邊又是柔和的黃綠色。當你想打破創作慣性時,這種不可預測性正是重點,這也是為什麼圖表檢視在瀏覽時比單一色彩選擇器更有效。
隨機色彩圖表的實際用途
圖表檢視是為瀏覽而設計的,不僅僅是挑選單一顏色,因此在多種不同的工作場景中都很有用:
- 設計靈感。設計師和插畫家在盯著同一組品牌配色太久時,會開啟圖表。一次性產生 20 到 30 個色塊,能浮現出你憑手感無法想到的組合 —— 一個出乎意料的點綴色、一對互補色,或一個能打破厚重版面的柔和底色。
- 前端與資料視覺化的佔位元素。開發人員在真實數值尚未確定時,會使用隨機顏色作為圖表系列、標籤、大頭貼背景和 UI 骨架。圖表讓你一次取得 5 到 10 個不同的色塊,並將每個色塊的 HEX 複製到樣式表或元件屬性中,無需逐一產生。
- QA 與測試 fixtures。隨機十六進位值可用於植入模擬資料、快照測試和視覺回歸基準。50 個色塊的圖表比一次抽一種顏色提供更廣泛的樣本,也降低了意外選到重複系列顏色的機率。
- 教學色彩模型。將同一個顏色以 HEX、RGB 和 HSL 並列顯示,是展示這三種模型如何對應到你實際所見內容的快速方法。課堂上可以預測哪些 HSL 變更會使色塊變亮或降低飽和度,然後透過編輯數值並觀察色塊更新來驗證。
- 在限制下進行調色盤腦力激盪。當專案有固定的品牌色,而你需要輔助色調時,產生 10 個隨機色塊並詢問哪些在視覺上與品牌色塊搭配得當,比手動套用色相規則來得快。
發佈前務必檢查對比
隨機產生的顏色並不保證具備可存取性。看起來不錯的填色色塊作為文字顏色時可能嚴重失敗,而鮮豔的色調在相關背景下可能會消失不見。WCAG 2.2 為文字和 UI 元素定義了對比比率,而維持在這些規則內的最簡單方法,是在將任何一組你打算使用的色彩組合提交到設計之前,先使用色彩對比檢查工具進行檢查。將圖表視為候選色彩的來源,並讓每個承載意義或文字的候選色彩先通過對比檢查。
一旦色塊通過對比檢查,請直接從圖表複製符合你技術棧的格式 —— CSS 用 HEX、影像作業用 RGB、仍想微調時用 HSL —— 然後繼續。重新抽取下一批,或固定一個色塊並繼續圍繞它調整周圍的調色盤。圖表形式的目的就是讓這個循環更快速:產生、瀏覽、複製、重複。
如果你正在權衡選項,RGB 轉 CMYK 維持可存取性:在印刷中保持對比對此有詳細說明。
如果你正在權衡選項,如何檢查混合兩個 HEX 顏色後的結果對此有詳細說明。