隨機顏色生成器

隨機顏色從哪些數值範圍產生

本工具先為每個色塊生成一組 HSL 數值，再把同一顏色換算成 HEX、RGB 和 HSV。色相 H 來自所選色調範圍，飽和度 S 始終從 40%–100% 的整數中抽取，明度 L 則由“明亮、正常、暗色”決定。每個色塊獨立生成，因此適合快速取得候選色，而不是按固定種子重現一套顏色。

這些色相名稱是本工具採用的篩選區間，並非對整個色輪的唯一命名。例如紅色與橙色都可能抽到邊界 30°，而“隨機”才覆蓋完整色相環。

四種程式碼描述的是同一個色塊

格式選項只決定色塊懸停時顯示、點選時複製哪一種寫法，不會另生成一組顏色。HEX 是六位 sRGB 十六進制程式碼；RGB 把紅、綠、藍寫成 0–255 的整數；HSL 保留本次抽取的色相、飽和度和明度；HSV 則把同一 sRGB 顏色換算成色相、飽和度和值。輸出都不包含 Alpha 透明度。

一組可復算的格式示例

如果“藍色系”與“正常”檔恰好抽到 HSL(210, 60%, 50%)，工具會顯示同色的 #3380cc、rgb(51, 128, 204)、hsl(210, 60%, 50%) 和 hsv(210, 75%, 80%)。RGB 通道和 HSV 百分比會按當前換算結果取整，因此它們是同一色塊的不同座標，不是四次獨立隨機。

格式、隨機性與對比度依據

生成、篩選並複製一批候選色

1. 填寫需要的數量

   輸入正整數。頁面開啟時會按預設配置先生成 12 個色塊；若要改數量，以輸入框旁顯示的當前上限爲準。一次生成很多色塊不利於逐個比較，找靈感時通常先用較小數量更容易篩選。

2. 決定交付格式

   網頁樣式優先選 HEX、RGB 或 HSL；要把引數帶到使用 HSV/HSB 的設計軟體時選 HSV。切換格式會立即改變現有色塊顯示和複製的程式碼，不需要重新抽取顏色。

3. 收窄色相和明暗

   需要任意結果時選擇“隨機”；想集中檢視橙色、藍色或冷暖色時選擇對應範圍。明暗檔控制的是 HSL 的 L 區間。修改數量、色調或明暗後，點選“生成”讓這些條件應用到新一批色塊。

4. 檢視並複製單色

   把指標移到色塊上可檢視當前格式的程式碼，點選色塊即可複製。保留滿意的顏色時，應及時貼上到文件、樣式表或設計稿中；再次生成會用新結果替換整組色塊。

5. 恢復初始設定

   重置會把數量恢復爲 12、格式恢復爲 HEX、色調恢復爲隨機、明暗恢復爲正常，並清空當前結果。需要新色塊時再點選“生成”。

關於重複、CSS 與配色的常見疑問

隨機候選色不是自動配色方案

結果不檢查顏色和諧、品牌一致性、色覺辨識度、重複值或前景與背景的對比度。用於正式介面、圖表或狀態提示前，應結合真實文字、字號、背景和使用環境複覈。

• “明亮、正常、暗色”只是 HSL 明度區間。HSL 並非感知均勻色彩空間，相同 L 的黃色與藍色可能呈現明顯不同的視覺明暗。
• 不要只靠顏色區分成功、失敗、選中等關鍵資訊；還應配合文字、圖示、形狀或其他可識別線索。
• 若顏色承載文字，WCAG 2.2 的相關最低要求為普通文字 4.5:1、大號文字 3:1，並存在規範列出的例外。工具不會計算這些比值。

複製、透明度與批次使用邊界

• 色塊沒有透明度分量，複製結果均表示不透明的 sRGB 顏色；需要半透明疊加時，應在目標環境中另行設定 Alpha 並重新檢查疊加後的效果。
• 當前操作以單個色塊點選複製為主，不會把整批結果自動整理成變數表或檔案。再次生成前先儲存已選程式碼。
• 較大的數量會同時顯示大量色塊。若滾動、懸停或複製響應變慢，可拆成多批生成並及時整理結果。
• 不同螢幕、色彩配置與周圍背景會影響實際觀感；色塊預覽不能替代目標裝置和最終版式中的檢查。