配色產生器
調色盤系統 // v1.0
範圍：1-10
等待輸入...
這個工具如何幫助你
RandomHub 每次產生 1 到 10 個顏色，並顯示每個色票的 HEX、RGB 與 HSL。六種配色規則依序為隨機、單色調、相近色、互補色、三元色、四元色；六種色調為任意、粉彩、鮮豔、柔和、暗色、亮色。配色規則決定色相之間的關係，色調則縮小飽和度與亮度的範圍。保留相同設定再次產生，會抽出另一組符合條件的配色；改變設定則會探索色彩空間的不同區域。每次結果都可逐項複製，也能把整組配色整理成多行文字，方便比較不同候選。畫面上的色名只是依 RGB 距離找到的最接近顏色之近似標籤，不是精確色彩規格。設計交付與程式實作應以 HEX、RGB 或 HSL 數值為準。
六種明確配色規則
六種色調
三種可複製格式
避免模數偏差的整數抽樣
什麼是隨機配色產生器？
RandomHub 每次產生 1 到 10 個顏色，並顯示每個色票的 HEX、RGB 與 HSL。六種配色規則依序為隨機、單色調、相近色、互補色、三元色、四元色；六種色調為任意、粉彩、鮮豔、柔和、暗色、亮色。配色規則決定色相之間的關係，色調則縮小飽和度與亮度的範圍。保留相同設定再次產生，會抽出另一組符合條件的配色；改變設定則會探索色彩空間的不同區域。每次結果都可逐項複製，也能把整組配色整理成多行文字，方便比較不同候選。畫面上的色名只是依 RGB 距離找到的最接近顏色之近似標籤，不是精確色彩規格。設計交付與程式實作應以 HEX、RGB 或 HSL 數值為準。
適合哪些使用情境？
產品與品牌設計師
在檢查對比、無障礙與品牌一致性前，先快速擴大視覺方向。
前端開發者
建立暫用配色，並把精確數值複製到 CSS、設計 token 或原型。
資料視覺化團隊
先取得相隔較遠的色相，再於實際圖表中驗證可讀性與語意。
每個設定實際做什麼
六種明確配色規則
隨機會各自抽取色相；單色調維持同一色相，相近色落在 80° 視窗內，互補色交替使用相差 180° 的色相，三元色與四元色則循環使用三個或四個等距色相。
六種色調
任意不限制飽和度與亮度；粉彩、鮮豔、柔和、暗色、亮色各自套用不同 HSL 範圍。
三種可複製格式
每個結果都有 HEX、RGB、HSL，可複製單一數值或整組多行配色。
避免模數偏差的整數抽樣
色相選擇使用 Web Crypto getRandomValues 搭配 rejection sampling，避免用簡單餘數縮小 Uint32 範圍時產生偏差。
實際使用起點
介面方向探索
以 5 個相近色、粉彩色調開始安靜的介面方向，再檢查文字對比。
設定：5 色・相近色・粉彩。把 HEX 複製到探索用的 token 組。
高能量概念
以 3 個鮮豔三元色跳脫熟悉的品牌配色。
設定：3 色・三元色・鮮豔。把結果視為探索方向，而非完成的識別系統。
圖表分類
先用四元色建立分類草案，再檢查可讀性、色覺差異與語意順序。
設定：4 色・四元色・任意。應在真實圖表中驗證，而不只看色相距離。
使用方法
- 1.
選擇數量
輸入 1 到 10 的整數。
- 2.
選擇配色
依照需要的色相接近或分離程度，從六種規則選擇。
- 3.
選擇色調
保留任意，或選擇粉彩、鮮豔、柔和、暗色、亮色。
- 4.
產生並複製
產生配色後，複製 HEX、RGB、HSL 或整組多行結果。
常見問題
隨機值從哪裡來？
產生器使用 Web Crypto getRandomValues；整數範圍採 rejection sampling，避免簡單取餘數造成分布偏差。
配色規則如何計算？
相近色分布於基準色相 −40° 到 +40°（±40°），互補色相差 180°，三元色每隔 120°，四元色每隔 90°；單色調則在同一色相上改變亮度。
色調會限制什麼？
粉彩、鮮豔、柔和、暗色、亮色會套用不同的飽和度與亮度範圍；任意則使用完整範圍。
畫面上的色名是精確名稱嗎？
不是。系統依 RGB 距離從整理過的色名中找出最接近項目，再顯示在地化名稱。需要精確值時請使用 HEX、RGB 或 HSL。
為什麼同時提供三種格式？
HEX 適合簡潔交付，RGB 對應螢幕色彩通道，HSL 則方便分別調整色相、飽和度與亮度。
使用配色規則就能符合無障礙嗎？
不能。色相關係不保證文字對比或色覺友善，仍須在最終前景、背景與圖表情境中測試。
從隨機方向到設計判斷
產生的配色最適合用在設計初期：此時選項廣度比完成度更重要。RandomHub 清楚呈現數量、配色規則、色調、精確數值與近似色名。配色規則描述的是色相之間的幾何關係，並不會決定哪個顏色應作為內文、強調、警示或背景。請先在實際介面或圖表裡分配角色，再依預定的文字大小、元件狀態檢查對比與不同色覺下的辨識度。實作與交付應使用 HEX、RGB 或 HSL；近似色名只適合協助閱讀與區分。也可以保留多組候選，在相同元件與資料上並排測試，而不是只看單獨色票。品牌語意、印刷或不同螢幕上的重現，以及整體視覺層級，也都必須放回最終使用情境判斷，不能只由色相距離推定。
相關隨機工具
相關隨機工具
繼續使用適合教學、遊戲、寫作、規劃與日常決策的相關工具。