隨機色彩產生器的 CSS 程式碼是一個六位數的十六進位值，寫成 #RRGGBB，可以直接套用於任何 CSS 的 color、background、border 或 box-shadow 屬性，無需任何轉換。隨機色彩產生器會對紅、綠、藍三個通道各自獨立取樣 256 級，進而產生這些值，得到 16,777,216 種可能的組合，涵蓋任何標準螢幕所能呈現的完整色彩範圍。每次輸出都會同時以三種格式顯示：HEX (#rrggbb) 適用於 CSS、Figma 和大多數設計工具；RGB (rgb(r, g, b)) 以 0–255 的尺度表示，適用於影像編輯軟體；HSL (hsl(h, s%, l%)) 則以色相、飽和度、亮度這種貼近人類直覺的方式描述色彩。每種格式都只要一鍵即可複製，方便直接貼入樣式表、組件庫、設計代碼，或任何接受色彩值的 CSS 屬性，無需手動在不同表示法之間轉換，也不需要註冊。
就大多數前端工作而言，當有人搜尋「隨機色彩產生器 CSS 程式碼」時，HEX 格式就是答案。HEX 最短，也是在實際樣式表中最常見，並且在每個瀏覽器中都能直接使用，無需替代方案。RGB 和 HSL 同樣是有效的 CSS 值，並可從同一個工具複製出來，因此選擇取決於色彩最終會用在哪裡——RGB 用於影像編輯器和 JavaScript，HSL 用於以肉眼微調亮度和飽和度。
產生的三種 CSS 程式碼格式
你產生的每個色彩都會以三個字串回傳。這些字串描述的是同一個色彩；它們只是同一組紅、綠、藍色通道的不同表示法。
| 格式 | 模式 | 範例 | 最佳用途 |
|---|---|---|---|
| HEX | #rrggbb | #3a9d7f | CSS 色彩屬性、設計工具、Figma |
| RGB | rgb(r, g, b)，以 0–255 為尺度 | rgb(58, 157, 127) | 影像編輯器、JavaScript、螢幕運算 |
| HSL | hsl(h, s%, l%)，色相範圍 0–359 | hsl(158, 46%, 42%) | 依感覺微調色相、飽和度和亮度 |
HEX 是大多數開發者直接貼進樣式表的格式，因為它簡短、通用支援，且不含歧義。RGB 讀起來像函式呼叫，這在同樣的值需要透過 JavaScript 或引用個別色彩元件的 CSS 自訂屬性以程式方式設定時特別方便。HSL 是唯一能將色相與飽和度、亮度分離的格式，因此最容易微調——把亮度降低 10%，同一個色相仍然辨識得出來，但變得更暗，整個過程完全不涉及運算。
如何取得隨機色彩產生器的 CSS 程式碼
這個工具設計為一個畫面、三個步驟。不會上傳任何資料，也不需要帳號。
- 在數量欄位中設定你要產生的色彩數量（1 到 100）。
- 點擊 Generate 來產生一組全新的隨機色彩。
- 點擊任何色塊即可複製其 HEX，或點擊 RGB 或 HSL 的值來複製該格式。
HEX 值會以 #rrggbb 的形式進入你的剪貼簿，可立即貼入任何 CSS 規則。如果你需要同一個色彩作為 JavaScript 的函式呼叫，請改點色塊下方的 RGB 那行。若要重新產生，請更改數量或再次點擊 Generate——每批都是獨立隨機產生，新的一組與前一組沒有任何關聯。
完整的工作流程都內建於 隨機色彩產生器頁面中，它在你的瀏覽器中於本機端執行。
接受這些值的 CSS 屬性
每個接受色彩的 CSS 屬性都可以互換使用 HEX、RGB 和 HSL。模式都相同：指定屬性，寫上冒號，貼上值，最後以分號結尾。
對於單一色彩，基本形式是：
color: #3a9d7f;
background-color: #3a9d7f;
border: 2px solid #3a9d7f;
RGB 和 HSL 可以貼入相同的位置，無需更動任何前綴。瀏覽器不在乎你用的是哪種表示法——只在乎語法是否正確。以下是幾個在實際工作中能受益於隨機色彩的屬性：
- 圖表資料系列——為每條長條或每塊扇形指派不同的色塊，使各類別保持可區分。
- 標籤與頭像——依使用者或狀態為項目上色，無需維護固定的色票。
- 佔位 UI——在決定真正的色票前，先填滿原型組件。
- 測試固定資料——以看起來像真實 CSS 字串的值植入模擬資料。
另一個常見的用法是在 :root 層級設定一個 CSS 自訂屬性，讓這個隨機色彩在整份樣式表中都可取用。其模式看起來像：
:root { --brand-accent: #3a9d7f; }
此後，任何規則都可以引用 var(--brand-accent)，色彩只需在一個地方編輯，不必硬編碼到每個選擇器中。同樣的技巧也適用於圖表函式庫——大多數都接受 HEX 陣列作為色票參數，因此你可以把從產生器複製出來的色塊直接貼到圖表設定中。
| CSS 屬性 | HEX | RGB | HSL |
|---|---|---|---|
| color | 可以 | 可以 | 可以 |
| background-color | 可以 | 可以 | 可以 |
| border-color | 可以 | 可以 | 可以 |
| outline-color | 可以 | 可以 | 可以 |
| box-shadow | 可以 | 可以 | 可以 |
| text-shadow | 可以 | 可以 | 可以 |
| SVG fill / stroke | 可以 | 可以 | 可以 |
若要做出更精緻的效果，可以把同一個 HEX 疊入漸層或陰影中。漸層停駐點和 box-shadow 色彩都接受同樣的三種表示法，因此你可以從工具中複製兩個值，直接貼入 linear-gradient 或 radial-gradient 規則。一旦鎖定單一色彩，便可透過 色票產生器衍生出相關的色調與色階，它會將一個 HEX 擴展為互補色、類似色和三分色組合。
為何隨機色彩能涵蓋完整的 16.7M 範圍
標準螢幕以三個通道——紅、綠、藍——混合色彩，每個通道有 256 級（0 到 255）。256 × 256 × 256 相乘得到 16,777,216 種獨立色彩，這就是完整的 24 位元 RGB 色域。這個工具從該範圍中均勻取樣，這代表螢幕能顯示的每一種色彩都在範圍內，包括策展色票中較少觸及的低飽和度中間色和淡化粉彩色。
均勻取樣的重要性超乎想像。一個僅限數十個色塊的色票，每次重複使用時都會循環同一組少量數值；隨機取樣則不會。設計師和前端開發者特別使用它來跳脫既定習慣，偶然撞見自己不會刻意選出的搭配。那種不可預測性正是這個工具存在的實際原因：它在色彩選擇的第一步移除了品味偏見，強制造出一個本質上全新的起點。
隨機程式碼 vs. 策展色票：何時該用哪一種
隨機 CSS 程式碼和策展色票解決的是不同的問題。下表將最常見的情境對應到較合適的來源。
| 使用情境 | 隨機色彩 | 策展色票 |
|---|---|---|
| 類別眾多的圖表資料系列 | 最佳——每個類別都會得到一個不同的色塊 | 超過 6–8 種後，可區分的色彩就會不足 |
| 突破創作瓶頸 | 最佳——提供不可預測的起點 | 驚喜感較低；你往往會回到慣用的色彩 |
| 品牌或行銷設計 | 避免——隨機值會破壞品牌識別 | 必要——品牌色彩必須是刻意選定 |
| 原型中的佔位 UI | 最佳——快速且可丟棄 | 對早期 mockup 來說大材小用 |
| 對無障礙性要求嚴格的文字 | 有風險——上線前需要對比度檢查 | 已預先檢查並留下紀錄 |
無障礙性：上線前先檢查對比度
隨機色彩並不保證在任意背景下都清晰可讀。兩個在獨立檢視時看起來沒問題的色彩，實際對比度可能遠低於內文所需。廣泛引用的門檻是：一般文字為 4.5:1，大字為 3:1，依據為 WCAG 2.2。
任何承載資訊的成對色彩——文字與背景、圖示與按鈕、圖表資料系列與格線——在上線前都應該通過對比度檢查。對比度檢查工具接受前景與背景的 HEX，會即時依 WCAG AA 與 AAA 報告對比度比值，是確認一個隨機選擇的色彩能否安心上線的最快方式。
多做一個步驟就能抓住大多數失敗案例：如果隨機色彩會作為背景，請將前景固定為接近黑色或接近白色，並先測試這兩種組合。只要其中一組通過 4.5:1，該背景即可使用。若兩組都未通過，請重新產生並再試一次——下一批有相同的機率是可讀的。
若之後需要將複製的 HEX 轉換為其他格式——例如設計師給你一個 CMYK 目標值——RGB 轉 HEX和 RGB 轉 CMYK工具會代為運算，無需手動重新輸入數值。
如果你正在權衡選項，漸層產生器解析：CSS 是如何建構出來的對此有詳細說明。
如果你正在權衡選項，如何記錄你的 CSS 核取方塊產生器步驟對此有詳細說明。