什麼是隨機顏色產生器？

隨機產生顏色並顯示對應的 HEX、RGB 及 HSL 色碼。鎖定喜愛的顏色，重新產生其餘顏色，單擊即可複製任意色碼。

按空白鍵(或點擊產生)頁面就會換上一排新的隨機顏色,每個都同時顯示名稱以及 HEX、RGB 和 HSL 值。拖動滑桿,調色盤可以從單一強調色一直加到八格。把「風格」切到粉彩、鮮亮、暗調或大地色,可以把隨機往某種氣氛上引;選一種「和諧配色」規則(互補、鄰近、三等分、四等分),顏色就會按色彩理論彼此關聯,而不是各自為戰。喜歡的色用鎖頭圖示固定,再把其他幾格重新產生即可。任何色碼點一下就進剪貼簿,整組配色還能下載成純文字檔或一張可直接分享的 PNG 圖片。 要寫程式?一鍵就能把整組複製成一段 :root 裡的 CSS 自訂屬性,再一鍵複製一條連結,貼到哪裡都能原樣開啟這組配色。點開任一色塊下方的淺深色條,就能取得五個較淺與五個較深的色階,用於懸停狀態、邊框與淡底色。

使用方法

1. 先設定要幾種顏色（1 到 8 種皆可，預設 5 種），再點擊產生把調色盤填滿。
2. 鎖定想保留的顏色，再次產生時僅替換未鎖定的顏色。
3. 點擊任意色碼（HEX、RGB 或 HSL）即可複製到剪貼簿。

何時使用

• 對著 Figma 空白檔案、毫無配色方向時,用來打破思考僵局。
• 替副業專案、腦力激盪文件或小孩的美術活動找個色彩方向,只要隨機就好。
• 做一次性圖(橫幅、社群配圖、鎖屏)時直接抓一個 HEX,不用翻流行色清單。

結果

一位網頁設計師需要為新專案挑選強調色。反覆產生調色盤後找到 #E8674A（暖珊瑚色），鎖定該顏色，繼續產生以尋找互補色。

常見問題

顏色到底怎麼被隨機選出來的?

在預設的「隨機+任意」模式下,紅、綠、藍三個通道各取一個 0–255 的整數,所以可能出現的 RGB 組合大約有 1,670 萬種,分布完全均勻,沒有人為偏向「好看」的顏色。如果選了風格(粉彩、鮮亮、暗調、大地色),工具會在那個氣氛對應的色相/飽和度/明度區間裡抽隨機數。和諧配色模式則是先隨機定一個基色,其餘顏色按色彩理論在色輪上的偏移推導出來。

為什麼隨機出來的常常灰灰濁濁?

RGB 立方體中大部分點落在中灰、暗調區,均勻隨機自然偏中性。最快的辦法是把「風格」從「任意」換成鮮亮或粉彩,工具就只在挑好的色相/飽和度/明度範圍裡取樣,泥濘的中間根本不會出現。也可以把鮮亮的格子先鎖住,其餘再多刷幾次,很快就能湊出一組對比鮮明的五色組合。

可以只留下喜歡的顏色,其餘重抽嗎?

可以。點任一格上的鎖頭就能固定,接著再按生成。被鎖的不會變,其他繼續換。決定主色之後想找搭配色時,這是最快的方法。

HEX、RGB、HSL 有什麼差別?

HEX(#1A2B3C)是 RGB 的十六進位寫法,CSS 與設計軟體最常用。RGB(rgb(26,43,60))用十進位表示三個通道。HSL(hsl(210,40%,17%))描述色相、飽和度、明度,手動微調比較直觀。

結果是真隨機還是有種子?

用的是 JavaScript 的 Math.random,嚴格說是偽隨機,但對配色而言與真隨機難以分辨。重新整理頁面,每次都會得到全新的五色組合。

相關工具