配色產生器
調色盤系統 // v1.0
範圍：1-10
等待輸入...
什麼是隨機配色產生器？
隨機配色產生器會從螢幕能顯示的數百萬顏色裡，挑出一個顏色或一組協調的調色盤，並把實際要用的數值直接交到你手上。RandomHub 一鍵回傳 1 至 10 個顏色，套用五種色彩學規則（單色、相近色、互補色、三元色、四元色，再加純隨機），並依你選的色調（粉彩、鮮豔、柔和、暗、亮，或不限制）收斂結果。每個顏色都附 HEX、RGB、HSL 三種格式可一鍵複製，貼進 Figma、CSS 或 Tailwind 都不用再手動轉換。整個流程都在你自己的瀏覽器內以 HSL 數學算出來 — 不用註冊、不會上傳、不留紀錄。設計師需要量的探索、品牌團隊要在短時間內試方向、寫前端的同事要快速來幾個 placeholder，這個工具都是為了這幾個現場存在的。
這個工具是給誰用的？
UI 與產品設計師
在 stakeholder review 前快速試一輪配色，跳脫品牌固定的那六色。冥想 App 用粉彩相近色、兒童產品用鮮豔三元、開發者工具用暗色四元。
品牌識別設計師
在 brand sprint 的廣域探索期，連續刷幾十組互補與四元組合。打破「最後又回到深藍」的死循環。
前端工程師
寫 CSS demo 或 Tailwind config 需要三個 placeholder 顏色嗎？一鍵複製 HEX 貼到樣式裡，不用打開 Figma 就繼續。
插畫家與數位繪師
為限色練習生成一組受限調色盤。五個柔和相近色會逼你用明度對比建構畫面，而不是依賴色相差。
資料視覺化作者
三元、四元在數學上能拉出明顯區隔的色相，適合做類別編碼。色調可以再疊一層 — 鮮豔給強調層，柔和給背景層。
設計學生與老師
把配色規則跑出來看。先三元、再四元、再單色 — 同一個基準色相，每種規則出來的氛圍完全不同。
為什麼選這個配色產生器
五種真正的配色規則
不是「隨便五個不打架的顏色」。單色、相近色、互補色、三元色、四元色 — 從基準色相出發，依設計學校真的在教的數學算出來。
對應實際 brief 的色調預設
粉彩給健康與教育、鮮豔給運動與年輕族群、柔和給編輯與金融、暗色給科技與精品、亮色給醫療與 SaaS。先選氛圍，工具就把你帶到對的色彩區段。
HEX、RGB、HSL 並排顯示
每一行都有三種格式各自的複製按鈕。在 CSS 裡微調飽和度用 HSL 最順手，交給設計師就用 HEX，寫進程式碼就用 RGB。看顏色要去哪裡，挑對應格式。
只在瀏覽器裡跑，不留資料
這個頁面用 HSL 數學在本機算出顏色。不存調色盤、不蒐集 email、沒有 premium 版本。每個來訪的人看到的是同一個工具。
常見場景與範例
健康類 App 的 mood board
為冥想 App 找配色。太銳利的顏色會壞掉氛圍。用相近色＋粉彩拉 5 個顏色，會得到一組互相滲透的柔綠與柔藍。
設定：5 色／相近色／粉彩。可能輸出：#C8E1D2、#B6D8C7、#A4CFBC、#92C6B1、#80BDA6 — 低彩度的綠色族群，一分鐘內貼進 Figma frame。
能量飲料的 rebrand 探索
品牌衝刺進入第三週，思路一直繞回紅黃配。用三元色＋鮮豔拉 4 個顏色，強行把搜尋區域推開。
設定：4 色／三元色／鮮豔。三個色相相隔 120° 配高彩度 — 直接離開紅黃，跳到團隊還沒試過的 magenta-cyan-amber 組合。
Tailwind CSS 原型
想要為 light mode 的 demo 頁挑幾個 accent。生成 3 個亮、低彩度的顏色，HEX 直接貼進 config，繼續建頁面。
設定：3 色／隨機／亮色。輸出例：#E8DCD0、#D4E0DD、#DCD8E8。在 tailwind.config 裡寫成 accent-50、accent-100、accent-200，頁面就能直接 demo。
限色繪畫練習
畫家與插畫家在強制限制下會進步。生成 5 個柔和色，用同一組顏色重畫同一張靜物。
設定：5 色／隨機／柔和。每個顏色彩度約 30 %、明度中段 — 一組灰塵感、互相搭得上的色彩，逼你靠明度而不是色相去組畫面。
怎麼用
- 1.
設定數量
1 到 10 個。預設 5 個 — 變化夠用，又不會多到記不住。
- 2.
選配色規則
想隨意探索就用隨機；要近似就用相近色；想要對比就用互補色；類別配色就用三元或四元；做明度練習就用單色。
- 3.
選色調
粉彩、鮮豔、柔和、暗、亮，或「任意」。每種預設會收緊飽和度與明度，讓整組調色盤掉到該掉的氛圍區段。
- 4.
產生並複製
按產生鍵或 Enter。每個顏色都有自己的 HEX、RGB、HSL 複製鈕；「全部複製」會把整組調色盤拉成多行字串，方便貼進 Figma、程式碼或筆記。
常見問題
調色盤是真的隨機，還是從固定清單抽？
是真的隨機。每組調色盤會先抽一個 0 到 360° 的基準色相，套用配色規則，再從你選的色調的飽和度與明度範圍內抽樣。相同設定跑兩次會得到不同調色盤 — 結構保留，數值不同。
五種配色規則差在哪？
單色：一個色相，靠明度變化撐起變化。相近色：色相環上的鄰居（約 ±25°）。互補色：色相環上正對面的兩色（180°）。三元色：相隔 120° 的三色。四元色：相隔 90° 的四色。同一個基準色相，五種規則出來的感覺差很多。
色調預設背後的設定值是什麼？
每個預設會限制飽和度（S）與明度（L）。粉彩：S 25–55 %、L 78–92 %。鮮豔：S 85–100 %、L 42–58 %。柔和：S 15–40 %、L 40–60 %。暗色：S 40–95 %、L 12–32 %。亮色：S 30–70 %、L 70–88 %。
能保存或分享喜歡的調色盤嗎？
按「全部複製」就會把整組以 HEX · RGB · HSL 一行一個的純文字格式給你。Figma、筆記 App、文件、Slack 都能直接貼。不提供綁帳號的儲存 — 是有意這樣設計，東西不離開瀏覽器。
為什麼同時提供 HSL，而不只是 HEX 和 RGB？
HSL 把色相、飽和度、明度切成三個獨立數值，要在 CSS 或設計工具裡做「飽和度 +10 %」或「色相 +30°」這類微調最方便。HEX 比較短，適合交付。RGB 最接近螢幕真正繪製顏色的方式。
能在商業專案裡用嗎？
可以。色彩數值不受著作權保護，產生出來的調色盤可以拿去用在商業專案、品牌素材、付費客戶案、要販售的產品上，不需要註明來源。
跟 Coolors 或 Adobe Color 比起來呢？
Coolors、Adobe Color 是成熟工具，有調色盤庫、漸層產生、從圖片抽色、社群分享等等。RandomHub 只專心做一件事 — 用規則快速產出隨機調色盤，HEX / RGB / HSL 直接給你 — 不註冊、無調色盤庫、不推升級方案。
為什麼上限只有 10 個？
超過七、八個顏色之後，多數配色規則生出來的結果會視覺上彼此相近，眼睛就分不出它是調色盤了。10 是一個寬裕但不會破壞辨識度的上限。
關於設計裡的隨機調色盤
設計師把隨機當成創作輸入這件事，跟這門學科一樣老。Bauhaus 的練習「把三個顏色放在一起，硬是讓它們搭起來」其實就是同一個機制 — 限制和意外把腦袋從第一個反射動作往前推。螢幕之後改變的，是配色規則可以被瞬間算出來：1965 年要拿 Munsell 色相環畫半小時的三元配色，2026 年只要按一下。速度就是重點。第一個產生出來的調色盤，幾乎不會是上線的那一個；真正有價值的是五分鐘內刷二十組，挑出哪一組打中。RandomHub 在意三件事：規則要扎在真的色彩理論裡，不是「五個顏色亂湊」；色調要對應真的設計 brief，不是抽象分類；HEX、RGB、HSL 一起出，不要再花心思手動換算。如果你常用的某個規則或色調這裡沒有，那是個值得回報的訊號 — 寫信告訴我們。