JavaScript 中的隨機色彩代碼是一段字串,例如 #3a7f1c、rgb(58, 127, 28) 或 hsl(102, 49%, 30%),由瀏覽器內建的 Math.random() 函式產生,該函式會回傳介於 0(含)與 1(不含)之間的浮點數。若要將該浮點值轉換為可用的色彩代碼,你需將結果縮放至所需範圍(RGB 通道為 0–255,HSL 色相為 0–360),使用 toString(16) 格式化為 HEX,或透過字串串接處理 RGB 與 HSL,並可選擇在前面加上 #,以便直接貼入 CSS、設計工具或 canvas 呼叫中。整個運作於用戶端在幾毫秒內完成,這也是為什麼 JavaScript 的隨機色彩產生已成為標準教學範例,以及原型、測試資料、生成藝術和佔位 UI 的實用工具。

如果你想跳過自行撰寫邏輯,立即開始使用隨機色彩,這個 隨機色彩產生器 可同時產生 HEX、RGB 與 HSL 值,並讓你點擊任何色塊來複製所需的精確格式。本文其餘部分將逐步介紹驅動此類工具的 JavaScript 技巧、解釋每種色彩模型背後的數學原理,並展示在專案需要特定格式時如何進行轉換。

how to generate random color code in javascript
how to generate random color code in javascript

Math.random() 如何變成色彩代碼

JavaScript 中的每種隨機色彩技巧都從同一個呼叫開始:

const n = Math.random(); // 例如 0.274831...

那個單一數字就是種子值。從這裡開始,根據你需要的色彩模型,有三種常見路徑。HEX 最為精簡,因為 HEX 色彩只是將三對十六進位數字打包成井字號後方的六個字元。RGB 需要三個獨立的隨機值,每個通道各一個,每個值都是 0 到 255 之間的整數。HSL 則多了一項決定:飽和度與亮度應如何表現,因為完全隨機的 HSL 值通常看起來灰濁或褪色。

在 JavaScript 中產生隨機 HEX 代碼

經典的一行程式碼使用 Math.random().toString(16) 並將結果擷取至六個字元,然後在前面加上井字號:

function randomHex() { return '#' + Math.random().toString(16).slice(2, 8).padEnd(6, '0'); }

這能運作的原因在於 toString(16) 會將浮點數轉換為十六進位表示法。一旦移除前導的 0. 並取接下來的六個字元,你就得到一個有效的 HEX 數字字串。padEnd(6, '0') 防護機制可處理 Math.random() 在罕見情況下回傳小數點後十六進位數字少於六個的極小值。每次呼叫會產生類似 #3a7f1c 的字串,你可以直接放入 CSS 變數、內聯 style 屬性或 Canvas 填充樣式中。

在 JavaScript 中產生隨機 RGB 值

RGB 需要三個介於 0–255 範圍的獨立整數。常見的模式是乘以 256 再向下取整,如此可保留上界 255:

function randomRgb() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return 'rgb(' + r + ', ' + g + ', ' + b + ')'; }

由於每個通道都是獨立的隨機呼叫,兩次相鄰呼叫可能產生差異極大、有時甚至互相衝突的色彩。這對於壓力測試 UI 或在慶祝頁面上產生五彩碎屑來說沒問題,但如果你需要協調一致的色調,視覺上可能會顯得雜亂。若你想將產生的 rgb(r, g, b) 字串轉換為 CSS 用的 HEX 值,RGB 轉 HEX 工具可立即完成運算;當你想將兩個產生的色彩混合成更柔和的結果時,也可透過 色彩混合器 反向處理。

在 JavaScript 中產生隨機 HSL 值

當你重視色彩外觀而非原始位元組時,HSL 是最友善的格式。色相通道從 0 到 360 自由旋轉,而飽和度與亮度則位於 0–100 的百分比刻度上。典型的產生器會讓色相完全隨機,但將飽和度與亮度限制在目的範圍內:

function randomHsl() { const h = Math.floor(Math.random() * 360); const s = 50 + Math.floor(Math.random() * 40); // 50–89% const l = 40 + Math.floor(Math.random() * 20); // 40–59% return 'hsl(' + h + ', ' + s + '%, ' + l + '%)'; }

將飽和度縮窄至約 50–89% 可避免色彩變得灰淡,將亮度固定在 40% 至 59% 之間則能避免過暗或過於慘白的結果。這與 open-source 的 randomColor 函式庫所採用的原則相同,也是為什麼當你一次產生多個色塊時,HSL 是首選格式。

使用隨機色彩產生器建立一批隨機色彩

撰寫指令碼很適合學習,但當你只是為了情緒板、CSS 原型或簡報投影片需要色彩時,互動式工具會更快。以下是 隨機色彩產生器 的完整操作流程:

  1. 將數量欄位設定為你想要的色塊數,每批範圍為 1 到 100 個。
  2. 點擊 Generate(產生)以產生新的一批隨機色彩;每一列會同時使用 HEX、RGB 與 HSL 獨立產生。
  3. 點擊任何色彩色塊,即可將其 HEX 值連同井字號一起複製到剪貼簿,直接可用於貼入 CSS。
  4. 若你需要 RGB 或 HSL 格式,點擊色塊旁的對應值;每種格式皆可獨立複製。
  5. 將複製的值貼入你的樣式表、設計檔或程式碼編輯器,若該色彩將作為文字背景,在發布前可透過 色彩對比檢查器 進行檢查。

在隨機色彩代碼之間轉換

隨機產生只是工作的一半。多數實際專案在特定時刻需要特定格式:CSS 變數用 HEX、Canvas API 與 rgba() 透明度用 RGB、主題代碼用 HSL。它們之間的轉換只是少量的數學運算:

從 到 變更內容
HEX #3a7f1c RGB rgb(58, 127, 28) 將六個十六進位數字拆成三對,再將每對解析為 base-16 整數。
RGB rgb(58, 127, 28) HSL hsl(102, 49%, 30%) 將 r、g、b 標準化為 0–1,找出最小與最大通道,從主要通道推導色相,並根據分佈計算亮度與飽和度。
HSL hsl(102, 49%, 30%) RGB rgb(58, 127, 28) 透過 chroma-lightness-hue 公式將 HSL 轉換為 RGB,然後可選擇將結果格式化為 HEX。

你可以手動撰寫每個轉換,但對於一次性任務,最快的方式是從隨機產生器複製一個值,然後送入 RGB 轉 HEX 進行雙向轉換。MDN 上關於 CSS <color> 資料類型的參考文件,詳細記錄了每種標記法的精確語法規則,包括現代的 color() 函式,以及隨 CSS Color Level 4 一同推出的無逗號 hsl() 語法。

在實際專案中何時使用隨機色彩

隨機色彩不只是玩具。常見的實用用途包括:

  • 在後端建構過程中作為佔位資料,讓每筆使用者記錄都顯示獨特的大頭貼背景。
  • 在 p5.js 或 Canvas 中進行生成藝術草圖,隨機性是特色而非缺陷。
  • 壓力測試設計系統,以確認對比、版面配置與元件能承受任何色彩選擇。
  • 建立示範線框圖,刻意讓色彩可丟棄,使審閱者專注於結構。

一旦你從這些用途晉升到正式上線的 UI,就應從完全隨機的值切換為結構化的色調配置。色彩調色盤產生器 接受單一基礎色彩,並產生互補、類似、三等分與分裂互補等配色方案,這才是當色彩需要相互呼應而非互相衝突時你想要的結果。

產生隨機色彩時的常見陷阱

有幾個陷阱經常出現,值得預先標示出來:

  • HEX 中的位元長度不符。 Math.random().toString(16).slice(2, 8) 偶爾會因為浮點精度吃掉前導零,而回傳較短的字串。請如前述以 0 進行填補,或從三個獨立的隨機位元組建構 HEX。
  • RGB 範圍的 off-by-one 錯誤。 Math.floor(Math.random() * 256) 包含 255;Math.floor(Math.random() * 255) 則否。大多數選色器預期完整的 0–255 範圍,因此請採用較大的上界。
  • 未受限制的 HSL。 對每個 HSL 組件使用天真的 Math.random() 會產生大量灰色。請將飽和度與亮度限制在合理範圍,或對產生的色塊進行感知對比的後篩選。
  • 無障礙性退化。 內文背後的隨機色彩可能無法通過 WCAG 對比。對於任何打算上線的色彩組合,請透過 色彩對比檢查器 進行檢查,它會即時依據 W3C 所記錄的 WCAG 2.2 AA 與 AAA 值評估比率。
  • 印刷轉換。 隨機 RGB 值幾乎從未能在直接轉至印刷時存活。若專案最終落在紙本上,請在送印前將選定色彩透過 RGB 轉 CMYK 進行轉換。

整合應用

你現在擁有三段可運作的 JavaScript 程式碼片段,分別對應 HEX、RGB 與 HSL,加上當速度比撰寫程式更重要時的現成工具路。從 Math.random().toString(16).slice(2, 8).padEnd(6, '0') 開始,可快速取得內聯 HEX;當涉及透明度或 Canvas API 時,使用逐通道的 RGB 公式;而當你需要一批看起來協調統一的色彩時,立即切換到 HSL。至於其他情況,隨機色彩產生器 可同時並列提供三種格式,一鍵複製所需。

相關指南:一鍵為設計專案產生隨機色彩。

相關閱讀:如何檢查色彩對比以符合無障礙性:實用指南。

相關閱讀:如何在 CSS 中產生隨機色彩(快速方法)。

相關閱讀:如何在 Excel 中產生隨機色彩(快速方法)。